Teaching Tip

Learn to use the Teaching Tip in Windows App SDK with this Tutorial

Teaching Tip shows how you can use TeachingTip with the Windows App SDK which is a Control that can be used to provide contextual information combined with other elements such as the CommandBar to help users understand an application.

Step 1

Follow Setup and Start on how to get Setup and Install what you need for Visual Studio 2022 and Windows App SDK.

In Windows 11 choose Start and then find or search for Visual Studio 2022 and then select it.

Once Visual Studio 2022 has started select Create a new project.

Then choose the Blank App, Packages (WinUI in Desktop) and then select Next.

After that in Configure your new project type in the Project name as TeachingTip, then select a Location and then select Create to start a new Solution.

Step 2

Within Solution Explorer for the Solution double-click on MainWindow.xaml to see the XAML for the Main Window.

Step 3

In the XAML for MainWindow.xaml there will be some XAML for a StackPanel, this should be Removed:


<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Step 4

While still in the XAML for MainWindow.xaml above </Window>, type in the following XAML:


<Grid>
    <TeachingTip Name="Display"
    Title="Teaching Tip"
    Subtitle="Show Teaching Tips in your Application">
        <TeachingTip.IconSource>
            <SymbolIconSource Symbol="Comment"/>
        </TeachingTip.IconSource>
    </TeachingTip>
    <CommandBar IsOpen="True" IsSticky="True" VerticalAlignment="Bottom">
        <AppBarButton Name="Tip" Icon="Comment" Label="Tip" Click="Tip_Click"/>
    </CommandBar>
</Grid>

This XAML features a Grid containing the TeachingTip with the Title and Subtitle set to some content, along with the use of an IconSource to be displayed in the TeachingTip, which will be used with the CommandBar which has a single AppBarButton with the Label of Tip, that will be used to show the TeachingTip in the Method of Tip_Click when it is Clicked.

Step 5

Within Solution Explorer for the Solution select the arrow next to MainWindow.xaml then double-click on MainWindow.xaml.cs to see the Code for the Main Window.

Step 6

In the Code for MainWindow.xaml.cs there be a Method of myButton_Click(...) this should be Removed by removing the following:


private void myButton_Click(object sender, RoutedEventArgs e)
{
    myButton.Content = "Clicked";
}

Step 7

Once myButton_Click(...) has been removed, below the end of public MainWindow() { ... } type in the following Code:


private void Tip_Click(object sender, RoutedEventArgs e)
{
    Display.Target = Tip;
    Display.IsOpen = true;
}

The Method of Tip_Click will be triggered by the Event of Click from the AppBarButton then all it does is set the Target of the TeachingTip to be the AppBarButton and to then show it by setting the Property of IsOpen to true.

Step 8

That completes the Windows App SDK application. In Visual Studio 2022 from the Toolbar select TeachingTip (Package) to Start the application.

Step 9

Once running you should see the CommandBar with the AppBarButton with the Label of Tip.

Teaching Tip Running

Step 10

If you Click on the AppBarButton with the Label of Tip you will see the TeachingTip displayed which can be closed with the Close button in the top-right of the TeachingTip.

Teaching Tip Output

Step 11

To Exit the Windows App SDK application, select the Close button from the top right of the application as that concludes this Tutorial for Windows App SDK from tutorialr.com!

Teaching Tip PDF