PowerToys/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml

<Page
    x:Class="Microsoft.PowerToys.Settings.UI.Views.ShortcutGuidePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    AutomationProperties.LandmarkType="Main">

    <Page.Resources>
        <converters:StringFormatConverter x:Key="StringFormatConverter"/>
    </Page.Resources>

    <controls:SettingsPageControl x:Uid="About_ShortcutGuide"
                                  ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
                                  ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
        <controls:SettingsPageControl.ModuleContent>


            <StackPanel Orientation="Vertical"
                    x:Name="ShortcutGuideView"
                    HorizontalAlignment="Left"
                    Margin="0,0,48,0"
                    MaxWidth="{StaticResource MaxContentWidth}">
                <ToggleSwitch x:Uid="ShortcutGuide_Enable"
                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>

                <TextBlock x:Uid="Shortcuts"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>

                <controls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
                                                  HorizontalAlignment="Left"
                                                  MinWidth="240"
                                                  Margin="{StaticResource SmallTopMargin}"
                                                  HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}"
                                                  Keys="Win, Ctrl, Alt, Shift"
                                                  Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>

                <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
                    <Slider x:Uid="ShortcutGuide_OverlayOpacity"
                    Minimum="0"
                    Maximum="100"
                    Width="240"
                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
                    IsThumbToolTipEnabled="False"
                    HorizontalAlignment="Left"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

                    <TextBlock
                        Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
                        VerticalAlignment="Center"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Margin="0,16,0,0"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
                </StackPanel>

                <!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
            The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
            Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
                <TextBlock Name="ShortcutGuide_Theme"
                x:Uid="ColorModeHeader"
                Margin="{StaticResource SmallTopMargin}"
                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
                <muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                               SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
                               AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
                    <RadioButton x:Uid="Radio_Theme_Dark" />
                    <RadioButton x:Uid="Radio_Theme_Light" />
                    <RadioButton x:Uid="Radio_Theme_Default"/>
                </muxc:RadioButtons>
                <HyperlinkButton Click="OpenColorsSettings_Click"
                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <TextBlock x:Uid="Windows_Color_Settings" />
                </HyperlinkButton>

                <TextBlock x:Uid="ShortcutGuide_DisabledApps"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>

                <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
                     Margin="{StaticResource SmallTopMargin}"
                     Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps}"
                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                     ScrollViewer.VerticalScrollBarVisibility ="Visible"
                     ScrollViewer.VerticalScrollMode="Enabled"
                     ScrollViewer.IsVerticalRailEnabled="True"
                     TextWrapping="Wrap"
                     AcceptsReturn="True"
                     HorizontalAlignment="Left"
                     MinWidth="240"
                     MinHeight="160" />
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>
        <controls:SettingsPageControl.ModuleLinks>
            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
        </controls:SettingsPageControl.ModuleLinks>
    </controls:SettingsPageControl>
</Page>