Implementing TeachingTip control for a UWP App

Question

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

installed Microsoft.UI.Xaml package via Nuget in my project
Added <XamlControlsResources xmlns = "using:Microsoft.UI.Xaml.Controls" /> into App.xaml.
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?

Can you provide a repo or code with an example of your problem? — visc, Jun 19 '19 at 14:31
What's project's target and min version? And OS build version? — Xie Steven, Jun 20 '19 at 07:29
@XavierXie-MSFT, Windows 10, version 1809 (10.0; Build 17763) — Ramosta, Jun 21 '19 at 07:21

score 1 · Accepted Answer · answered Jun 27 '19 at 22:17

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>

score 0 · Answer 2 · answered Jun 20 '19 at 13:27

0

I pasted your code into my project and it worked. However, the code you provided above doesn't have Content for the triggering button, so the only button which appears is the top button. Are you sure you're not failing because of code in BackButton_Click rather than TeachingTipButton_OnClick?

You can remove the duplicate reference to Microsoft.UI.Xaml.Controls from Application.Resources

answered Jun 20 '19 at 13:27

Josh

4,009
2
31
46

It is not due to the function failure. The button events work well and I have no duplicates in app.xaml. I think I have a syntax error in my app.xaml. – Ramosta Jun 21 '19 at 07:18

score 0 · Answer 3 · answered Jun 21 '19 at 07:49

I solved my problem by removing ContentDialog Size style and Default Button style so that <Application.Resources> has only <XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" /> as a single entry. In my case, multiple entries in <Application.Resources> </Application.Resources> are unfortunately not accepted.

Implementing TeachingTip control for a UWP App

3 Answers3

Linked