Merge xaml files using resource dictionaries

Question

The information on merging two XAML files is kind of confusing, could someone point me in the right direction? (W10, VS2017, UAP, Midi)

I have app.xaml, MainPage.xaml, and A.xaml. I also have an xaml resource dictionary. I want to insert A.xaml into MainPage.xaml. (A is actually called MidiWrapper.xaml)

app.xaml

<Application
x:Class="Kawai_ES110_Midi.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Application>

Following How can i combine multiple XAML files using C# in WPF? I get access violation when I put first solution into app.xaml

MainPage.xaml

<Page
x:Class="Kawai_ES110_Midi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Kawai_ES110_Midi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


<Grid>
<Grid.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="XAMLWrapper.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Grid.Resources>
</Grid>
</Page>

A.xaml (aka MidiWrapper.xaml)

<ResourceDictionary
x:Class="Kawai_ES110_Midi.MidiWrapper"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Kawai_ES110_Midi"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <ListBox x:Name="midiInPortListBox"/>
        <ListBox x:Name="midiOutPortListBox"/>
</ResourceDictionary>

Resource Dictionary xaml aka (XAMLWrapper.xaml)

<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Application>

Thanks for your help in advance. Maybe app.xaml needs reference the resource dictionary and/or put "merged" tags into MainPage and A. Or perhaps MainPage and A have to also be/act like dictionaries? I've updated my code, but I don't see the listboxes showing up still

Answer 1

I'm not sure that what you are trying to do is possible using a resource dictionary. A resource dictionary is exactly that, a list of things that are resources for your XAML so you might define styles in there or templates, etc. These are then referenced by your XAML that uses the resource. I've never tried to define elements in one but I don't think you can initialise a grid with it (which is what I think you are trying to do?).

Edit:

Re-reading your original post in combination with the comment i don't think you want resource dictionaries for this at all. What you want is a separate user control. You can find information on this here but as a short example i created a WPF project and added 2 user controls, 1 that contains a list and one that contains a button.

Mainwindow.xaml

<Window x:Class="test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <local:ListUserControl Grid.Column="0" Grid.Row="0"/>
        <local:ButtonUserControl Grid.Column="0" Grid.Row="1"/>
    </Grid>
</Window>

ListUserControl.xaml

<UserControl x:Class="test.ListUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:test"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Background="White">
    <StackPanel>
        <ListBox>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
        </ListBox>
    </StackPanel>
</UserControl>

ButtonUserControl.xaml

<UserControl x:Class="test.ButtonUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:test"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Background="DarkRed">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top" Width="75"/>
    </Grid>
</UserControl>

This achieves the separation between the elements that i think you are trying to achieve. So this should allow you to compose a view of several user controls where each control is a collection of controls (potentially other user controls but this can get messy). This could also be achieved using data templates as described here where you can see the content is being changed based on which template is applicable. You could define the templates in your resource dictionary and reference them that way. I think this could also be worth referencing as whilst not directly related to your question it outlines the various ways you can segment content within your application and has some relevant discussion.