Change Sub Form Based On Selected Option in C# WPF Project

Question

I apologize for the poor title, I don't know how else to explain it.

I have an interface like this (sorry can't post an image directly as I'm new).

And I want to have the right side display controls based on the tree selection on the left. What's the easiest way to do this in a WPF project? Is there a better way to go about this?

Thanks!

Answer 1

Ideally, you would use the MVVM design pattern to do this, but if you're looking for a simple and easy way to get this working, you could try this... Create UserControls to be the different subforms, and throw them into a frame. You could use a grid as well, but a frame allows you to use navigation (forward, back) if you need it.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>

    <!--TreeView Code Here-->
    <TreeView x:Name="treeView" SelectedItemChanged="TreeView_SelectedItemChanged">
        <TreeViewItem Header="Devices" IsExpanded="True">
            <TreeViewItem Header="Device 1" Tag="UserControl1.xaml"/>
            <TreeViewItem Header="Device 2" Tag="UserControl2.xaml"/>
            <TreeViewItem Header="Device 3" Tag="UserControl3.xaml"/>
        </TreeViewItem>
        <TreeViewItem Header="Users" IsExpanded="True">
            <TreeViewItem Header="Add" Tag="UserControl4.xaml"/>
            <TreeViewItem Header="Edit/Delete" Tag="UserControl5.xaml"/>
        </TreeViewItem>
    </TreeView>

    <!--Frame to hold your subform (UserControl)-->
    <Frame x:Name="SubForm" Grid.Column="2" NavigationUIVisibility="Hidden"/>
</Grid>

CodeBehind:

private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    TreeViewItem item = (TreeViewItem)treeView.SelectedItem;
    SubForm.Source = new Uri(item.Tag.ToString(), UriKind.RelativeOrAbsolute);
}