ControlExample.xaml

<UserControl
    x:Class="AppUIBasics.ControlExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:contract7Present="using:Microsoft.UI.Xaml.Controls?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:controls="using:AppUIBasics.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
    x:Name="RootPanel"
    Margin="0,16,0,0"
    d:DesignHeight="250"
    d:DesignWidth="1000"
    mc:Ignorable="d">

    <Grid x:Name="rootGrid" Loaded="rootGrid_Loaded">
        <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
                        <Thickness x:Key="ControlExampleDisplayBorderThickness">0</Thickness>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
                        <Thickness x:Key="ControlExampleDisplayBorderThickness">0</Thickness>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="HighContrast">
                        <SolidColorBrush x:Key="ControlExampleDisplayBrush" Color="{ThemeResource SystemColorWindowColor}" />
                        <Thickness x:Key="ControlExampleDisplayBorderThickness">1</Thickness>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>

                <Thickness x:Key="ControlElementScreenshotModePadding">67</Thickness>
            </ResourceDictionary>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="IntermediateLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="740" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="PhoneLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="OptionsPresenter.HorizontalContentAlignment" Value="Left" />
                        <Setter Target="OptionsPresenter.Margin" Value="0,24,0,0" />
                        <Setter Target="OptionsPresenter.BorderThickness" Value="0,1,0,0" />
                        <Setter Target="OptionsPresenter.(Grid.Row)" Value="1" />
                        <Setter Target="OptionsPresenter.(Grid.Column)" Value="0" />
                        <Setter Target="OptionsPresenter.(Grid.ColumnSpan)" Value="2" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup>
                <VisualState x:Name="NormalMode" />
                <VisualState x:Name="ScreenshotMode">
                    <VisualState.Setters>
                        <Setter Target="CodeScrollViewer.Visibility" Value="Collapsed" />
                        <Setter Target="ControlPresenter.Padding" Value="{ThemeResource ControlElementScreenshotModePadding}" />
                        <Setter Target="ControlPresenter.HorizontalAlignment" Value="Center" />
                        <Setter Target="ScreenshotControls.Visibility" Value="Visible" />
                        <Setter Target="ExampleContainer.Background" Value="{ThemeResource SystemControlPageBackgroundBaseLowBrush}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="SampleCodeSeparatorStates">
                <VisualState x:Name="SeparatorCollapsed" />
                <VisualState x:Name="SeparatorVisible">
                    <VisualState.Setters>
                        <Setter Target="SampleCodeSeparator.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <TextBlock
            x:Name="HeaderTextPresenter"
            Margin="0,12"
            Style="{ThemeResource BodyStrongTextBlockStyle}"
            AutomationProperties.HeadingLevel="Level3"
            Text="{x:Bind HeaderText}" />

        <RichTextBlock
            x:Name="ErrorTextBlock"
            Grid.Row="1"
            Margin="0,0,0,12"
            Foreground="{ThemeResource SystemFillColorCriticalBrush}"
            IsTextSelectionEnabled="True"
            Visibility="Collapsed">
            <Paragraph>
                This sample requires a later version of Windows to be fully functional.
            </Paragraph>
        </RichTextBlock>

        <Grid Grid.Row="2" CornerRadius="8">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <controls1:SampleThemeListener>
                <Grid
                    x:Name="ExampleContainer"
                    Style="{ThemeResource GalleryTileGridStyle}"
                    x:FieldModifier="Public"
                    CornerRadius="8,8,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" MaxWidth="320" />
                        <ColumnDefinition Width="Auto" MaxWidth="320" />
                    </Grid.ColumnDefinitions>

                    <!--  Example Display  -->
                    <ContentPresenter
                        x:Name="ControlPresenter"
                        Padding="12"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        HorizontalContentAlignment="{x:Bind HorizontalContentAlignment}"
                        Background="{ThemeResource ControlExampleDisplayBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        BorderThickness="{ThemeResource ControlExampleDisplayBorderThickness}"
                        Content="{x:Bind Example}"
                        CornerRadius="8,8,0,0" />

                    <!--  Output Display  -->
                    <StackPanel
                        Grid.Column="1"
                        Margin="0,12,12,12"
                        Padding="16"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Stretch"
                        Background="{ThemeResource ControlExampleDisplayBrush}"
                        CornerRadius="8"
                        Orientation="Vertical"
                        Visibility="{x:Bind Output, Converter={StaticResource nullToVisibilityConverter}}">
                        <TextBlock Text="Output:" />
                        <ContentPresenter x:Name="OutputPresenter" Content="{x:Bind Output}" />
                    </StackPanel>

                    <!--  Options Display  -->
                    <ContentPresenter
                        x:Name="OptionsPresenter"
                        Grid.Column="2"
                        Padding="16"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                        BorderThickness="1,0,0,0"
                        Content="{x:Bind Options}"
                        Visibility="{x:Bind Options, Converter={StaticResource nullToVisibilityConverter}}" />
                </Grid>
            </controls1:SampleThemeListener>

            <!--  Sample code display  -->
            <muxc:Expander
                Grid.Row="1"
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Stretch"
                contract7Present:CornerRadius="0,0,8,8"
                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}">

                <muxc:Expander.Header>
                    <TextBlock Text="Source code" />
                </muxc:Expander.Header>

                <StackPanel x:DefaultBindMode="OneWay">
                    <controls:SampleCodePresenter
                        x:Name="XamlPresenter"
                        Code="{x:Bind Xaml}"
                        CodeSourceFile="{x:Bind XamlSource}"
                        Substitutions="{x:Bind Substitutions}" />
                    <Border
                        x:Name="SampleCodeSeparator"
                        Margin="0,20"
                        BorderBrush="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                        BorderThickness="1"
                        Visibility="Collapsed" />
                    <controls:SampleCodePresenter
                        x:Name="CSharpPresenter"
                        Code="{x:Bind CSharp}"
                        CodeSourceFile="{x:Bind CSharpSource}"
                        SampleType="CSharp"
                        Substitutions="{x:Bind Substitutions}" />
                </StackPanel>
            </muxc:Expander>

            <StackPanel
                x:Name="ScreenshotControls"
                Grid.Row="2"
                Margin="0,6,0,0"
                Orientation="Horizontal"
                Spacing="6"
                Visibility="Collapsed">
                <Button
                    x:Name="ScreenshotButton"
                    HorizontalAlignment="Left"
                    Click="ScreenshotButton_Click"
                    Content="Take Screenshot" />

                <Button
                    x:Name="ScreenshotDelayButton"
                    HorizontalAlignment="Left"
                    Click="ScreenshotDelayButton_Click"
                    Content="Take Screenshot With Delay" />

                <TextBlock
                    x:Name="ScreenshotStatusTextBlock"
                    Margin="0,0,0,1"
                    VerticalAlignment="Center" />

                <TextBlock
                    x:Name="PaddingLabel"
                    Margin="5,0,5,1"
                    VerticalAlignment="Center"
                    Text="Padding:" />
                <TextBox
                    x:Name="ControlPaddingBox"
                    Width="150"
                    AutomationProperties.LabeledBy="{x:Bind PaddingLabel}"
                    KeyUp="ControlPaddingBox_KeyUp"
                    LostFocus="ControlPaddingBox_LostFocus" />
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>