Tree View Navigation Design RRS feed

  • Question

  • I am doing a website design and would like to be able to setup my tree view control so that I can click on a tree node and have a frame on the right hand side within the same page get displayed like a help file structure would exist.  I dont want to navigate out to a new page I just wanted a side pane to be populated based on the tree selection I make.  As of now I can only navigate out to a totally new page.
    Any insights would be much appreciated.

    Friday, February 5, 2010 3:20 AM

All replies

  • Did you try to put a Controle like a Canvas or Grid on the right side in which you can load new UserControls after clicking on the TreeView nodes?
    Friday, February 5, 2010 6:46 AM
  • That was one of the things I have tried but I cant figure out how to limit the right hand pane items to just the controls that are relevant to that branch of the tree. 
    Friday, February 5, 2010 2:50 PM
  • I don't get the point maybe...

    I would create UserControls for each Node entry and after clicking a node I'd remove the old Control and insert the fitting new UserControl into the placeholder.

    Or I am totally wrong?
    Friday, February 5, 2010 3:00 PM
  • Ok so just for background I have only been using Sketchflow for a total of about 3 weeks and I am not technical (no development background).  What you are stating seems like a logical solution set but I dont know how to designate a certain set of user controls to a tree node item that would display within a canvas (right hand pane).  I have built a user control of fields that I would like to display when selecting a tree node.  Where do I then assign that user control on click of the tree node to display within the canvas?

    Friday, February 5, 2010 3:55 PM
  • You can use EventTriggers for that.

    <Window.Resources> <Style TargetType="MenuItem" x:Key="MenuItemStyle"> <Setter Property="Width" Value="100" /> <Setter Property="Height" Value="40" /> <Setter Property="Foreground" Value="Black" /> <EventSetter Event="Click" Handler="MenuItem_Click" /> </Style> </Window.Resources> <Grid x:Name="LayoutRoot" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Grid.RowDefinitions> <RowDefinition Height="40" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Menu x:Name="mnuMain" Grid.Row="0" VerticalContentAlignment="Center" VerticalAlignment="Top" HorizontalAlignment="Left" > <Menu.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="#FFA1A1A1" Offset="1"/> <GradientStop Offset="0.412" Color="#68FFFFFF"/> <GradientStop Offset="0.578" Color="#72FFFFFF"/> </LinearGradientBrush> </Menu.Background> <MenuItem Header="Item1" Style="{DynamicResource MenuItemStyle}" /> <MenuItem Header="Item2" Style="{DynamicResource MenuItemStyle}" /> <MenuItem Header="Item3" Style="{DynamicResource MenuItemStyle}" /> </Menu> <ItemsControl x:Name="ccContent" Grid.Row="1" HorizontalContentAlignment="Left" HorizontalAlignment="Left" BorderThickness="0" /> </Grid> </Window>

    In the CodeBehind I've put the following Code

     void MenuItem_Click(object sender, RoutedEventArgs e)
                Type type = this.GetType();
                Assembly assembly = type.Assembly;
                string strUC = "uc" + ((MenuItem)sender).Header.ToString();
                UserControl uc = (UserControl)assembly.CreateInstance(type.Namespace + "." + strUC);
                if (uc == null)
                    MessageBox.Show(string.Format("No UserControl for Menutiem {0} found.",((MenuItem)sender).Header.ToString()));
            void ChangeContent(UserControl uc)
    Just name the UserControls Item1.xaml, Item2.xaml etc...
    Hope this helps a little bit.
    Monday, February 8, 2010 5:59 AM