Showing a different view for treeview item selected - wpf

Question

I am trying to build a help module with a treeview and the goal is to have a different view show up in the redbox based on selected treeview item. how would I go about to do that?
This is all the code I have:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TreeView Margin="2" Width="250" HorizontalAlignment="Left" Height="auto" IsEnabled="True" FontSize="20">
<TreeViewItem Header="Introduction">
</TreeViewItem>
<TreeViewItem Header="Logging in" Margin="0,10,0,0">
<TreeViewItem Header="Changing Password" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Home" Margin="0,10,0,0">
<TreeViewItem Header="Dashboard Elements" Margin="0,10,0,0"/>
<TreeViewItem Header="Parking Spots" Margin="0,10,0,0" />
<TreeViewItem Header="Docking Spots" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Log Table" Margin="0,10,0,0"/>
<TreeViewItem Header="Security" Margin="0,10,0,0">
<TreeViewItem Header="Domestic Trucks" Margin="0,10,0,0"/>
<TreeViewItem Header="International Trucks" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Administration" Margin="0,10,0,0" Visibility="{Binding Source={x:Static model:ViewModel.CurrentUser}, Path=IsAdmin, Converter={StaticResource My.Converter.BoolToHidden}}">
<TreeViewItem Header="Permissions" Margin="0,10,0,0"/>
<TreeViewItem Header="Editing a User" Margin="0,10,0,0"/>
<TreeViewItem Header="Adding a new company" Margin="0,10,0,0"/>
</TreeViewItem>
</TreeView>
</Grid>

Answer 1

I really think that this Control is not doing what you expect. I would rather use Markdown to create a help file and save it to html, pdf or xps. You can open this document when the user hits the help button. IMO it is not a good idea to "hard-code" a Help module.
But to answer your question any way, you can do it this way:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TreeView x:Name="TreeView_TOC">
<TreeViewItem Header="Chapeter 1">
<TreeViewItem.Tag>
<TextBlock Text="Your Content goes here" />
</TreeViewItem.Tag>
</TreeViewItem>
</TreeView>
<ContentControl Grid.Column="1"
Content="{Binding ElementName=TreeView_TOC, Path=SelectedItem.Tag, Mode=OneWay}"/>
</Grid>
Happy documenting
Tim