PowerToys/src/settings-ui/Settings.UI/Views/KeyboardManagerPage.xaml

<Page
    x:Class="Microsoft.PowerToys.Settings.UI.Views.KeyboardManagerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI.UI"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">

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

        <Style
            x:Name="KeysListViewContainerStyle"
            TargetType="ListViewItem">
            <Setter Property="IsTabStop" Value="False" />
        </Style>

        <DataTemplate
            x:Key="OriginalKeyTemplate"
            x:DataType="x:String">
            <controls:KeyVisual
                Content="{Binding}"
                VisualType="SmallOutline" />
        </DataTemplate>

        <DataTemplate
            x:Key="RemappedKeyTemplate"
            x:DataType="x:String">
            <controls:KeyVisual
                Content="{Binding}"
                VisualType="Small" />
        </DataTemplate>

        <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
            <StackPanel
                Name="KeyboardManager_RemappedKeysListItem"
                x:Uid="KeyboardManager_RemappedKeysListItem"
                Orientation="Horizontal"
                Height="56">

            </StackPanel>
        </DataTemplate>-->
        <!--<DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
            <StackPanel
                Name="KeyboardManager_RemappedShortcutsListItem"
                x:Uid="KeyboardManager_RemappedShortcutsListItem"
                Orientation="Horizontal"
                Height="56">

        </DataTemplate>-->
    </Page.Resources>

    <controls:SettingsPageControl
        x:Uid="KeyboardManager"
        ModuleImageSource="ms-appx:///Assets/Modules/KBM.png">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="KeyboardManager_EnableToggle"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsKeyboardManager.png}"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured, Converter={StaticResource BoolNegationConverter}}">
                    <ToggleSwitch
                        x:Uid="ToggleSwitch"
                        IsOn="{x:Bind ViewModel.Enabled, Mode=TwoWay}" />
                    <labs:SettingsCard.Description>
                        <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys">
                            <TextBlock
                                x:Uid="KBM_KeysCannotBeRemapped"
                                FontWeight="SemiBold" />
                        </HyperlinkButton>
                    </labs:SettingsCard.Description>
                </labs:SettingsCard>
                <InfoBar
                    x:Uid="GPO_IsSettingForced"
                    IsClosable="False"
                    IsOpen="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
                    IsTabStop="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
                    Severity="Informational" />

                <controls:SettingsGroup
                    x:Uid="KeyboardManager_Keys"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
                    <labs:SettingsCard
                        x:Uid="KeyboardManager_RemapKeyboardButton"
                        ActionIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
                                                 FontSize=14,
                                                 Glyph=&#xE8A7;}"
                        Command="{Binding Path=RemapKeyboardCommand}"
                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
                                                 Glyph=&#xE92E;}"
                        IsClickEnabled="True" />

                    <ListView
                        x:Name="RemapKeysList"
                        x:Uid="RemapKeysList"
                        IsSwipeEnabled="False"
                        ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
                        SelectionMode="None"
                        Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="Lib:KeysDataModel">
                                <labs:SettingsCard ContentAlignment="Left">
                                    <StackPanel Orientation="Horizontal">
                                        <ItemsControl
                                            IsTabStop="False"
                                            ItemTemplate="{StaticResource OriginalKeyTemplate}"
                                            ItemsSource="{x:Bind GetMappedOriginalKeys()}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel
                                                        Orientation="Horizontal"
                                                        Spacing="4" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                        <controls:IsEnabledTextBlock
                                            x:Uid="To"
                                            Margin="8,0,8,0"
                                            VerticalAlignment="Center"
                                            Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />
                                        <ItemsControl
                                            Name="KeyboardManager_RemappedTo"
                                            x:Uid="KeyboardManager_RemappedTo"
                                            IsTabStop="False"
                                            ItemTemplate="{StaticResource RemappedKeyTemplate}"
                                            ItemsSource="{x:Bind GetMappedNewRemapKeys()}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel
                                                        Orientation="Horizontal"
                                                        Spacing="4" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                    </StackPanel>
                                </labs:SettingsCard>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </controls:SettingsGroup>

                <controls:SettingsGroup
                    x:Uid="KeyboardManager_Shortcuts"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
                    <labs:SettingsCard
                        x:Uid="KeyboardManager_RemapShortcutsButton"
                        ActionIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
                                                 FontSize=14,
                                                 Glyph=&#xE8A7;}"
                        Command="{Binding Path=EditShortcutCommand}"
                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
                                                 Glyph=&#xE92E;}"
                        IsClickEnabled="True" />

                    <ListView
                        x:Name="RemapShortcutsList"
                        x:Uid="RemapShortcutsList"
                        IsSwipeEnabled="False"
                        ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
                        SelectionMode="None"
                        Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
                                <labs:SettingsCard ContentAlignment="Left">
                                    <StackPanel Orientation="Horizontal">
                                        <ItemsControl
                                            IsTabStop="False"
                                            ItemTemplate="{StaticResource OriginalKeyTemplate}"
                                            ItemsSource="{x:Bind GetMappedOriginalKeys()}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel
                                                        Orientation="Horizontal"
                                                        Spacing="4" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                        <controls:IsEnabledTextBlock
                                            x:Uid="To"
                                            Margin="8,0,8,0"
                                            VerticalAlignment="Center"
                                            Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />

                                        <ItemsControl
                                            Name="KeyboardManager_RemappedTo"
                                            x:Uid="KeyboardManager_RemappedTo"
                                            IsTabStop="False"
                                            ItemTemplate="{StaticResource RemappedKeyTemplate}"
                                            ItemsSource="{x:Bind GetMappedNewRemapKeys()}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel
                                                        Orientation="Horizontal"
                                                        Spacing="4" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                        <Border
                                            Margin="16,0,0,0"
                                            Padding="12,4,12,6"
                                            VerticalAlignment="Center"
                                            CornerRadius="12">
                                            <Border.Background>
                                                <SolidColorBrush
                                                    Opacity="0.3"
                                                    Color="{ThemeResource SystemAccentColor}" />
                                            </Border.Background>
                                            <TextBlock Text="{x:Bind TargetApp}" />
                                        </Border>
                                    </StackPanel>
                                </labs:SettingsCard>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </controls:SettingsGroup>
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>
        <controls:SettingsPageControl.PrimaryLinks>
            <controls:PageLink
                x:Uid="LearnMore_KBM"
                Link="https://aka.ms/PowerToysOverview_KeyboardManager" />
        </controls:SettingsPageControl.PrimaryLinks>
    </controls:SettingsPageControl>
</Page>