Search code examples
c#xamlwinui-3

Binding to auxiliary Xaml files located within the immediate namespace


The application I'm working on entails a WinUI3 Packaged project which will generate a line grid which contains vertical/horizontal lines overlayed perpendicularly by Line markup (generated by GoogleSheets). I have two xaml files, one for each of vertical/horizontal xaml code. I would like to bind both files into MainWindow.xaml to get the grid going on a grid panel for the app. I need some ideas on how to get the xaml files incorporated into the MainWindow.xaml code for presentation. I've tried searching for some info but haven't found anything pertinent enough as of yet. Any ideas? (thanks in advance)

I've tried the following so far:

MainWindow.xaml:
<Grid>
    Blank -- waiting for some ideas...
</Grid>


V_Grid.xaml:
<Line x:Name="ln1" X1="0" X2="0" Y1="0" Y2="1500" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln2" X1="10" X2="10" Y1="0" Y2="1500" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln3" X1="20" X2="20" Y1="0" Y2="1500" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln4" X1="30" X2="30" Y1="0" Y2="1500" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln5" X1="40" X2="40" Y1="0" Y2="1500" Stroke="#1f1f1f" StrokeThickness=".3" />
etc...

H_Grid.xaml:
<Line x:Name="ln1" Y1="0" Y2="0" X1="0" X2="2000" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln2" Y1="10" Y2="10" X1="0" X2="2000" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln3" Y1="20" Y2="20" X1="0" X2="2000" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln4" Y1="30" Y2="30" X1="0" X2="2000" Stroke="#1f1f1f" StrokeThickness=".3" />
<Line x:Name="ln5" Y1="40" Y2="40" X1="0" X2="2000" Stroke="#1f1f1f" StrokeThickness=".3" />
etc...

I've tried a couple of ideas which were to no avail.

I tried the following:

Within Main.xaml:
<Page x:Name="V_Grid" Resources="V_Grid.xaml"></Page>


Within App.xaml:
<ResourceDictionary>
    
    <Page x:Name="V_Grid" x:Key="V_Grid.xaml"></Page>
    
    <ResourceDictionary.MergedDictionaries>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </ResourceDictionary.MergedDictionaries>
    
</ResourceDictionary>

(none of these work...)

Solution

  • I guess you might want to try the XamlReader for this.

    For example:

    MainPage.xaml

    <Grid RowDefinitions="Auto,*">
        <Button
            Grid.Row="0"
            Click="LoadXamlButton_Click"
            Content="Load XAML" />
        <Frame
            x:Name="DynamicFrame"
            Grid.Row="2" />
    </Grid>
    

    MainPage.xaml.cs

    private async void LoadXamlButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
    {
        string loadedXamlText = await File.ReadAllTextAsync("V_Grid.xaml");
    
        if (Microsoft.UI.Xaml.Markup.XamlReader.Load(loadedXamlText) is FrameworkElement dynamicElement)
        {
            this.DynamicFrame.Content = dynamicElement;
        }
    }
    

    The file that will be loaded dynamically, should have at least the namespaces required. In this case:

    V_Grid.xaml

    <Grid
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Line
            x:Name="ln1"
            Stroke="Red"
            StrokeThickness=".3"
            X1="0"
            X2="0"
            Y1="0"
            Y2="1500" />
        <Line
            x:Name="ln2"
            Stroke="Green"
            StrokeThickness=".3"
            X1="10"
            X2="10"
            Y1="0"
            Y2="1500" />
        <Line
            x:Name="ln3"
            Stroke="Blue"
            StrokeThickness=".3"
            X1="20"
            X2="20"
            Y1="0"
            Y2="1500" />
        <Line
            x:Name="ln4"
            Stroke="#1f1f1f"
            StrokeThickness=".3"
            X1="30"
            X2="30"
            Y1="0"
            Y2="1500" />
        <Line
            x:Name="ln5"
            Stroke="#1f1f1f"
            StrokeThickness=".3"
            X1="40"
            X2="40"
            Y1="0"
            Y2="1500" />
    </Grid>