This project is read-only.

Navigate using Treeview items

Mar 26, 2013 at 6:43 PM
Hi,

Thanks for the project - excellent piece of work. I wondered if you help me sort out an issue I have with navigation. I need to build a TreeView and have the items act in the same way that the mui:Links do - i.e. load content windows. How you would suggest I best do this ?

Thanks.
Mar 27, 2013 at 12:53 AM
Edited Mar 27, 2013 at 12:56 AM
I would use MVVM and implement a ViewModel where the selected item of the treeview is bound (most likely two way) to a selected item in the view model. The Source of the ModernFrame instance rendering your content is bound to the source of the selected item.

When navigating the treeview, the selected item in the view model gets updated and the modern frame source will subsequently be updated.

Hope this makes sense.
Mar 27, 2013 at 2:43 AM
Hi,
Could you please give an example?
Thanks
Mar 27, 2013 at 1:13 PM
Create a new hierarchical link type that contains child links:
public class HierarchicalLink : Link
{
  public LinkCollection ChildLinks { get; set; }
}
Define a view model that exposes a collection of hierarchical links and the selected link.
public class MyViewModel : NotifyPropertyChanged
{
  private LinkCollection rootlinks;
  private Link selectedLink;

  public LinkCollection RootLinks
  {
    get { return this.rootlinks; }
  }

  public Link SelectedLink
  {
    get { return this.selectedLink; }
    set
    {
      if (this.selectedLink != value) {
        this.selectedLink = value;
        OnPropertyChanged("SelectedLink");
      }
    }
  }
}
Now assuming you want a split page with a TreeView on the left and a ModernFrame:
<Grid Style="{StaticResource ContentRoot}">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="6"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <TreeView x:Name="tree" ItemsSource="{Binding RootLinks}" Margin="{StaticResource SplitLeft}"> 
    <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding ChildLinks}">
        <TextBlock Text="{Binding DisplayName}" />
      </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
  </TreeView>
  <GridSplitter Grid.Column="1" />
  <mui:ModernFrame Source="{Binding SelectedLink.Source}" Grid.Column="2 " Margin="{StaticResource SplitRight}"/>
</Grid>
Set the DataContext of your page to a new instance of MyViewModel and fill the RootLinks with your data. Finally since the TreeView.SelectedItem is read-only you should implement a SelectionChanged event handler and in the event handler set the SelectedLink on the view model.

The ModernFrame.Source binding now automatically loads when you select a tree item.
Apr 1, 2013 at 3:20 AM
Thank you for the example. It solved my problem!
Apr 2, 2013 at 2:13 PM
Thanks for the tips KOZW, they came in very handy and I've now got a working solution.

Cheers.