PowerToys/src/settings-ui/Microsoft.PowerToys.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:local="using:Microsoft.PowerToys.Settings.UI.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    AutomationProperties.LandmarkType="Main">

    <Page.Resources>
        <local:VisibleIfNotEmpty x:Key="visibleIfNotEmptyConverter" />
        <Style TargetType="ListViewItem" x:Name="KeysListViewContainerStyle">
            <Setter Property="IsTabStop" Value="False"/>
        </Style>
        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
            <StackPanel 
                Name="KeyboardManager_RemappedKeysListItem" 
                x:Uid="KeyboardManager_RemappedKeysListItem"
                Orientation="Horizontal"
                Height="56">
                <ItemsControl
                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
                    IsTabStop="False">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Background="{ThemeResource SystemBaseLowColor}"
                                CornerRadius="4"
                                Padding="14,0,14,0"
                                Margin="5,0,5,0"
                                Height="36"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left">
                                <TextBlock
                                    FontWeight="SemiBold"
                                    VerticalAlignment="Center"
                                    TextAlignment="Center"
                                    FontSize="12"
                                    Text="{Binding}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <FontIcon Glyph="&#xE72A;"
                          Grid.Column="1"
                          FontSize="14"
                          VerticalAlignment="Center" 
                          Margin="5,0,5,0"/>
                <ItemsControl
                    Name="KeyboardManager_RemappedTo"
                    x:Uid="KeyboardManager_RemappedTo"
                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
                    Grid.Column="2"
                    IsTabStop="False">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Background="{ThemeResource SystemAccentColor}"
                                CornerRadius="4"
                                Padding="14,0,14,0"
                                Margin="5,0,5,0"
                                Height="36"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left">
                                <TextBlock
                                    FontWeight="SemiBold"
                                    VerticalAlignment="Center"
                                    TextAlignment="Center"
                                    Foreground="White"
                                    FontSize="12"
                                    Text="{Binding}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
            <StackPanel 
                Name="KeyboardManager_RemappedShortcutsListItem" 
                x:Uid="KeyboardManager_RemappedShortcutsListItem"
                Orientation="Horizontal"
                Height="56">
                <ItemsControl
                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
                    IsTabStop="False">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Background="{ThemeResource SystemBaseLowColor}"
                                CornerRadius="4"
                                Padding="14,0,14,0"
                                Margin="5,0,5,0"
                                Height="36"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left">
                                <TextBlock
                                    FontWeight="SemiBold"
                                    VerticalAlignment="Center"
                                    TextAlignment="Center"
                                    FontSize="12"
                                    Text="{Binding}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <FontIcon Glyph="&#xE72A;"
                          Grid.Column="1"
                          FontSize="14"
                          VerticalAlignment="Center" 
                          Margin="5,0,5,0"/>
                <ItemsControl Name="KeyboardManager_ShortcutRemappedTo"
                    x:Uid="KeyboardManager_ShortcutRemappedTo"
                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
                    Grid.Column="2"
                    IsTabStop="False">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Background="{ThemeResource SystemAccentColor}"
                                CornerRadius="4"
                                Padding="14,0,14,0"
                                Margin="5,0,5,0"
                                Height="36"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left">
                                <TextBlock
                                    FontWeight="SemiBold"
                                    VerticalAlignment="Center"
                                    TextAlignment="Center"
                                    Foreground="White"
                                    FontSize="12"
                                    Text="{Binding}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <FontIcon Glyph="&#xE72A;"
                          Grid.Column="3"
                          FontSize="14"
                          VerticalAlignment="Center" 
                          Margin="5,0,5,0"/>
                <Border
                    Name="KeyboardManager_TargetApp"
                    x:Uid="KeyboardManager_TargetApp"
                    Background="{ThemeResource SystemAccentColor}"
                    Grid.Column="4"
                    CornerRadius="4"
                    Padding="14,0,14,0"
                    Margin="5,0,5,0"
                    Height="36"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left">
                    <TextBlock
                        FontWeight="SemiBold"
                        VerticalAlignment="Center"
                        TextAlignment="Center"
                        Foreground="White"
                        FontSize="12"
                        Text="{x:Bind TargetApp}" />
                </Border>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
                                  ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
                                  ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel Orientation="Vertical">
                <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                          IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>

                <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys" Margin="{StaticResource XSmallTopMargin}">
                    <TextBlock x:Uid="KBM_KeysCannotBeRemapped" />
                </HyperlinkButton>

                <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
                       Margin="{StaticResource SmallTopMargin}"/>

            <ComboBox SelectedIndex="1" MinWidth="160"
                      Margin="{StaticResource SmallTopMargin}">
                <ComboBoxItem Content="Config-1"/>
                <ComboBoxItem Content="Config-2"/>
                <ComboBoxItem Content="Config-3"/>
            </ComboBox>-->

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

                <TextBlock x:Uid="KeyboardManager_RemapKeyboardSubtitle"
                       Margin="{StaticResource SmallTopMargin}"
                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>

                <Button x:Uid="KeyboardManager_RemapKeyboardButton"
                    Margin="{StaticResource SmallTopMargin}"
                    Command="{Binding Path=RemapKeyboardCommand}"
                    Style="{StaticResource AccentButtonStyle}"
                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>

                <ListView x:Name="RemapKeysList"
                      x:Uid="RemapKeysList"
                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                      ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
                      ItemTemplate="{StaticResource KeysListViewTemplate}"
                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                      BorderThickness="1" 
                      CornerRadius="4"
                      MinWidth="350"
                      MaxHeight="200"
                      Margin="{StaticResource SmallTopBottomMargin}"
                      HorizontalAlignment="Left"
                      SelectionMode="None"
                      IsSwipeEnabled="False"
                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
                      />

                <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
                    Icon="Add"
                    Width="370"
                    Style="{StaticResource AddItemAppBarButtonStyle}"
                    Command="{Binding Path=RemapKeyboardCommand}"
                    Margin="{StaticResource AddItemButtonMargin}"
                    HorizontalAlignment="Left"
                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->

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

                <TextBlock x:Uid="KeyboardManager_RemapShortcutsSubtitle"
                       Margin="{StaticResource SmallTopMargin}"
                       TextWrapping="WrapWholeWords"
                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>

                <Button x:Uid="KeyboardManager_RemapShortcutsButton"
                    Margin="{StaticResource SmallTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command="{Binding Path=EditShortcutCommand}"
                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                    />

                <ListView x:Name="RemapShortcutsList"
                      x:Uid="RemapShortcutsList"
                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                      ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
                      ItemTemplate="{StaticResource ShortcutKeysListViewTemplate}"
                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                      BorderThickness="1" 
                      CornerRadius="4"
                      MinWidth="350"
                      MaxHeight="200"
                      Margin="{StaticResource SmallTopBottomMargin}"
                      HorizontalAlignment="Left"
                      SelectionMode="None"
                      IsSwipeEnabled="False"
                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                      ScrollViewer.HorizontalScrollMode="Enabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Visible"
                      ScrollViewer.IsHorizontalRailEnabled="True"
                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
                      />

                <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
                    Icon="Add"
                    Width="370"
                    Style="{StaticResource AddItemAppBarButtonStyle}"
                    Command="{Binding Path=EditShortcutCommand}"
                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                    Margin="{StaticResource AddItemButtonMargin}"
                    HorizontalAlignment="Left"
                    />-->
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>
        <controls:SettingsPageControl.ModuleLinks>
            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
        </controls:SettingsPageControl.ModuleLinks>
    </controls:SettingsPageControl>
</Page>