How to bind a resource to a flowdocumentreader from a treeview with only XAML?

Question

This time I am working on a help-window mini-application (to include in the other project, the imageediting application).

I have a grid with two columns and a gridsplitter inbetween. On the left I have a treeview with several nodes (set in XAML) and on the right a flowdocumentreader.

I have about 10 resourcedictionaries where I keep my documents, one for each node, that I want to display in my flowdocumentreader. I actually have no idea how to bind this! Anybody have an idea how I can do this? My code so far (only one resourcedictionary added)

      <Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary x:Name="About"  Source="About.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="500"/>
    </Grid.ColumnDefinitions>
    <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns"
              Width="5" Background="#FFBCBCBC"/>
    <TreeView Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
        <TreeViewItem Header="Help">
            <TreeViewItem Header="About the application"></TreeViewItem>
            <TreeViewItem Header="Getting started"></TreeViewItem>
            <TreeViewItem Header="Images from Flickr"></TreeViewItem>
            <TreeViewItem Header="Images from the computer"></TreeViewItem>
            <TreeViewItem Header="Images from the browser"></TreeViewItem>
            <TreeViewItem Header="Editing">
                <TreeViewItem Header="Open and Save"></TreeViewItem>
                <TreeViewItem Header="Uploading"></TreeViewItem>
                <TreeViewItem Header="Crop"></TreeViewItem>
                <TreeViewItem Header="Resize"></TreeViewItem>
                <TreeViewItem Header="Filters"></TreeViewItem>
                <TreeViewItem Header="Adding text"></TreeViewItem>
                <TreeViewItem Header="Remove red eyes"></TreeViewItem>
            </TreeViewItem>
        </TreeViewItem>
    </TreeView>
    <FlowDocumentReader Grid.Column="2" >

    </FlowDocumentReader>
</Grid>

Answer 1

You could use the Tag property of the nodes to define a string value to be loaded. Then do a binding on the selected Node's Tag.

If you then use a converter you can load your document content from file/res.Dict or whatever:

  <TreeView x:Name="documentTreeView" Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
    <TreeViewItem Header="Help">
      <TreeViewItem 
         Header="About the application" 
         Tag="ResDict1.xaml"></TreeViewItem>

....

  <FlowDocumentReader Document="{Binding ElementName=documentTreeView, Path=SelectedItem.Tag, Converter={StaticResource stringToFlowDocumentConverter}}"  Grid.Column="2" />