Implementing TeachingTip control for a UWP App

Question

To install the TeachingTip-control in my UWP app, I've done the following stepts:

1. installed Microsoft.UI.Xaml package via Nuget in my project
2. Added <XamlControlsResources xmlns = "using:Microsoft.UI.Xaml.Controls" /> into App.xaml.
3. Imported Namespace xmlns:controls="using:Microsoft.UI.Xaml.Controls"

I implemented the TeachingTip-control as follows:

<Button x:Name="BackButton"
        Background="{x:Null}"
        Content="Back"
        Click="BackButton_Click">
    <Button.Resources>
        <controls:TeachingTip x:Name="ToggleThemeTeachingTip"
                              Target="{x:Bind BackButton}"
                              Title="Change themes without hassle"
                              Subtitle="It's easier than ever to see control samples in both light and dark theme!"
                              CloseButtonContent="Got it!">
        </controls:TeachingTip>
    </Button.Resources>
</Button>

<Button x:Name="TeachingTipButton"
        Click="TeachingTipButton_OnClick">
</Button>


private void TeachingTipButton_OnClick(object sender, RoutedEventArgs e)
{
    ToggleThemeTeachingTip.IsOpen = true;
}

When I call the function I get the following DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION error (probably UI error), which I do not understand:

What could be the problem? Why does not my code work?

Edit: I have now determined that the error is due to App.xaml. After I've installed the Nuget package Microsoft.UI.Xaml, it's expected to add the following code in App.xaml:

But I have already in App.xaml other settings and resources:

When I try to add only the line in App.xaml a key error occurs:

<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>

If I give the resource entry a key like this:

<XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" />

 It comes to a completely different error:

Windows.UI.Xaml.Markup.XamlParseException: "The text for this error is not found.

Can not find a Resource with the Name / Key TeachingTipBackgroundBrush

How can I properly add the resource <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> correctly in my App.xaml?

Answer 1

Your App.xaml file needs to look like this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>
        <!-- Other styles here -->
        <Style TargetType="Button">
          ...
        </Style>
    </ResourceDictionary>
</Application.Resources>