Switch User control on Treeview Selection Change

Question

How to switch user controls based on treeview Selection Change. I have acheived this on ListBox but couldn't figure out how to do that with Wpf Treeview. Here is my XAML Code.

<Window x:Class="MainScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewModelSettings="clr-namespace:ViewModel.Settings" >

 <Window.Resources>
    <DataTemplate DataType="{x:Type viewModelSettings:BasicSettingsViewModel}">
        <viewSettings:BasicSettingsView/>
    </DataTemplate>
     <DataTemplate DataType="{x:Type viewModelSettings:AdvancedSettingsViewModel}">
        <viewSettings:AdvancedSettingsView/>
    </DataTemplate>
 </Window.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>

    <ListBox x:Name="ListBoxMenu"                    
             Grid.Column="0" Margin="5,5,5,385"
             ItemsSource="{Binding Settings}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" Padding="10"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

   <Border Grid.Column="1" Margin="5">
        <ContentControl Content="{Binding ElementName=ListBoxMenu, Path=SelectedItem}"/>
   </Border>
</Grid>
</Window>

I am using Data Template to define Various Viewmodels and binded views with them

To Make it completely MVVM, Here is my code behind

 public partial class MainScreen : Window
  {
     public MainScreen()
     {
         InitializeComponent();
         DataContext = new OptionsDialogViewModel();
     }
 }

// OptionsDialogViewModel Class

 public class OptionsDialogViewModel : ViewModelBase
 {
    private readonly ObservableCollection<SettingsViewModelBase> _settings;

    public ObservableCollection<SettingsViewModelBase> Settings
    {
        get { return this._settings; }
    }

    public OptionsDialogViewModel ()
    {
        _settings = new ObservableCollection<SettingsViewModelBase>();
        _settings.Add(new BasicSettingsViewModel());
        _settings.Add(new AdvancedSettingsViewModel());
    }
}

// SettingsViewModelBase class

public abstract class SettingsViewModelBase : ViewModelBase
{
    public abstract string Name { get; }
}

and now my ViewModel(s) are derived from this SettingsViewModelBase

public class AdvancedSettingsViewModel : SettingsViewModelBase
{
    public override string Name
    {
        get { return "Advanced"; }
    }
}

I have 2 questions now, Is this the right approach to do this task ? How can I switch my list view to treeview

Answer 1

Unfortunately selecting items with a treeview is not as straight-forward as selecting with a ListBox.

Unlike simply binding to a ListBox with Content="{Binding ElementName=ListBoxMenu, Path=SelectedItem}", binding to a treeview item involves a bit of code-behind. Check out SO threads here and here for more discussion on the how's and why's.