[Keyboard Manager] Updated WinUI3 KBM and toggles (#45649)

## Running the Project
**Option 1: Test via runner**
1. Check out branch `niels9001/kbm-ux-consolidation`
2. Build PowerToys project
3. Manually build `Modules/KeyboardManagerEditorUI` project separately
4. Run `runner` project
5. Ensure experimental features are enabled in general settings (should
be on by default)
6. Launch keyboard manager via settings app

**Option 2: Test via installer**
1. Install PowerToys via installer on azure pipeline
1. Launch keyboard manager

## Validation
For each page (Text, Remappings, Programs, URLs):
* Create shortcuts with variable options and ensure they run as expected
* Delete shortcuts and ensure they no longer execute
* Try to create invalid shortcuts to check for proper validation
* Ensure created shortcuts appear in Power Toys Settings Keyboard
manager page
* Try toggling shortcuts
* Try deleting shortcuts while toggled off

### UI
* Any feedback on UI design appreciated as well
<img width="1071" height="671" alt="image"
src="https://github.com/user-attachments/assets/d2e81de0-6d92-4189-9a33-32e94cce74f7"
/>
<img width="2142" height="1341" alt="image"
src="https://github.com/user-attachments/assets/0e4e5685-fdf1-4dfd-ba52-a2e5bc9a66db"
/>



Closes: #15870
Closes: #31902
Closes: #45302
Closes: #36227
Closes: #16093
Closes: #13409
Closes: #9919
Closes:  #9482
Closes: #8798
Closes:  #7054
Closes: #2733
Closes: #2027
Closes: #30167

---------

Co-authored-by: Hao Liu <liuhao3418@gmail.com>
Co-authored-by: chenmy77 <162882040+chenmy77@users.noreply.github.com>
Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Jay <65828559+Jay-o-Way@users.noreply.github.com>
Co-authored-by: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>
Co-authored-by: Dustin L. Howett <duhowett@microsoft.com>
This commit is contained in:
Zach Teutsch
2026-03-04 15:46:42 -05:00
committed by GitHub
parent d20ae940d5
commit f651d1a611
85 changed files with 8080 additions and 399 deletions

View File

@@ -15,219 +15,276 @@
mc:Ignorable="d">
<local:NavigablePage.Resources>
<tkconverters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
<Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False" />
</Style>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="0.5, 1">
<GradientStop Offset="0" Color="#38C8AEC4" />
<GradientStop Offset="1" Color="#383286EE" />
</LinearGradientBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="1, 1">
<GradientStop Offset="0.0" Color="#FFF6F9FF" />
<GradientStop Offset="0.4" Color="#FFEFF5FF" />
<GradientStop Offset="0.7" Color="#FFF7FAFD" />
<GradientStop Offset="1.0" Color="#FFF5F8FA" />
</LinearGradientBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="CardGradient2Brush" Color="Transparent" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
<ptcontrols:KeyVisual
Padding="8"
Content="{Binding}"
CornerRadius="{StaticResource ControlCornerRadius}" />
</DataTemplate>
<tkconverters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
<Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False" />
</Style>
<DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
<ptcontrols:KeyVisual
Padding="8"
Content="{Binding}"
CornerRadius="{StaticResource ControlCornerRadius}"
Style="{StaticResource AccentKeyVisualStyle}" />
</DataTemplate>
<DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
<ptcontrols:KeyVisual
Padding="8"
Content="{Binding}"
CornerRadius="{StaticResource ControlCornerRadius}" />
</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>-->
<DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
<ptcontrols:KeyVisual
Padding="8"
Content="{Binding}"
CornerRadius="{StaticResource ControlCornerRadius}"
Style="{StaticResource AccentKeyVisualStyle}" />
</DataTemplate>
</ResourceDictionary>
</local:NavigablePage.Resources>
<controls:SettingsPageControl x:Uid="KeyboardManager" ModuleImageSource="ms-appx:///Assets/Settings/Modules/KBM.png">
<controls:SettingsPageControl.ModuleContent>
<StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}" Orientation="Vertical">
<controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
<tkcontrols:SettingsCard
<tkcontrols:SettingsExpander
Name="KeyboardManagerEnableToggle"
x:Uid="KeyboardManager_EnableToggle"
HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/KeyboardManager.png}">
<ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.Enabled, Mode=TwoWay}" />
<tkcontrols:SettingsCard.Description>
<tkcontrols:SettingsExpander.Description>
<HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys">
<TextBlock x:Uid="KBM_KeysCannotBeRemapped" FontWeight="SemiBold" />
</HyperlinkButton>
</tkcontrols:SettingsCard.Description>
</tkcontrols:SettingsCard>
</tkcontrols:SettingsExpander.Description>
<tkcontrols:SettingsExpander.Items>
<tkcontrols:SettingsCard
Name="ToggleShortcut"
x:Uid="KeyboardManager_Toggle_Shortcut"
IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<controls:ShortcutControl
MinWidth="{StaticResource SettingActionControlMinWidth}"
AllowDisable="True"
HotkeySettings="{x:Bind Path=ViewModel.ToggleShortcut, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
</tkcontrols:SettingsExpander.Items>
</tkcontrols:SettingsExpander>
</controls:GPOInfoControl>
<tkcontrols:SettingsCard
Name="ToggleShortcut"
x:Uid="KeyboardManager_Toggle_Shortcut"
HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
<controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.ToggleShortcut, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind ViewModel.UseNewEditor, Mode=OneWay}">
<tkcontrols:Case Value="False">
<StackPanel Orientation="Vertical">
<tkcontrols:SettingsCard
x:Uid="KeyboardManager_TryNewExperience"
MinHeight="64"
Margin="0,0,0,24"
Background="{ThemeResource CardGradient2Brush}"
HeaderIcon="{ui:FontIcon Glyph=&#xF133;}"
IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<ToggleSwitch IsOn="{x:Bind ViewModel.UseNewEditor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<controls:SettingsGroup x:Uid="KeyboardManager_Keys" IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<tkcontrols:SettingsCard
Name="KeyboardManagerRemapKeyboardButton"
x:Uid="KeyboardManager_RemapKeyboardButton"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
Command="{Binding Path=RemapKeyboardCommand}"
HeaderIcon="{ui:FontIcon Glyph=&#xE92E;}"
IsClickEnabled="True" />
<controls:SettingsGroup x:Uid="KeyboardManager_Keys" IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<tkcontrols:SettingsCard
Name="KeyboardManagerRemapKeyboardButton"
x:Uid="KeyboardManager_RemapKeyboardButton"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
Command="{Binding Path=RemapKeyboardCommand}"
HeaderIcon="{ui:FontIcon 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 CollectionVisibilityConverter}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="Lib:KeysDataModel">
<tkcontrols: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>
<ptcontrols: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(50)}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</tkcontrols:SettingsCard>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</controls:SettingsGroup>
<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 CollectionVisibilityConverter}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="Lib:KeysDataModel">
<tkcontrols: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>
<ptcontrols: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(50)}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</tkcontrols:SettingsCard>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</controls:SettingsGroup>
<controls:SettingsGroup x:Uid="KeyboardManager_Shortcuts" IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<tkcontrols:SettingsCard
Name="KeyboardManagerRemapShortcutsButton"
x:Uid="KeyboardManager_RemapShortcutsButton"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
Command="{Binding Path=EditShortcutCommand}"
HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
IsClickEnabled="True" />
<controls:SettingsGroup x:Uid="KeyboardManager_Shortcuts" IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<tkcontrols:SettingsCard
Name="KeyboardManagerRemapShortcutsButton"
x:Uid="KeyboardManager_RemapShortcutsButton"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
Command="{Binding Path=EditShortcutCommand}"
HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
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 CollectionVisibilityConverter}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
<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 CollectionVisibilityConverter}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
<tkcontrols:SettingsCard>
<tkcontrols:SettingsCard.Description>
<StackPanel Orientation="Horizontal">
<ItemsControl
IsTabStop="False"
ItemTemplate="{StaticResource OriginalKeyTemplate}"
ItemsSource="{x:Bind GetMappedOriginalKeysWithoutChord()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<tkcontrols:SettingsCard>
<tkcontrols:SettingsCard.Description>
<StackPanel Orientation="Horizontal">
<ItemsControl
IsTabStop="False"
ItemTemplate="{StaticResource OriginalKeyTemplate}"
ItemsSource="{x:Bind GetMappedOriginalKeysWithoutChord()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<TextBlock
Padding="6,0,6,6"
VerticalAlignment="Bottom"
Text=","
Visibility="{x:Bind Path=HasChord, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
<TextBlock
Padding="6,0,6,6"
VerticalAlignment="Bottom"
Text=","
Visibility="{x:Bind Path=HasChord, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
<ItemsControl
IsTabStop="False"
ItemTemplate="{StaticResource OriginalKeyTemplate}"
ItemsSource="{x:Bind GetMappedOriginalKeysOnlyChord()}"
Visibility="{x:Bind Path=HasChord, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ItemsControl
IsTabStop="False"
ItemTemplate="{StaticResource OriginalKeyTemplate}"
ItemsSource="{x:Bind GetMappedOriginalKeysOnlyChord()}"
Visibility="{x:Bind Path=HasChord, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ptcontrols:IsEnabledTextBlock
x:Uid="To"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}" />
<ptcontrols:IsEnabledTextBlock
x:Uid="To"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}" />
<ptcontrols:IsEnabledTextBlock
x:Uid="Starts"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay}" />
<ptcontrols:IsEnabledTextBlock
x:Uid="Starts"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay}" />
<ItemsControl
Name="KeyboardManager_RemappedTo"
x:Uid="KeyboardManager_RemappedTo"
IsTabStop="False"
ItemTemplate="{StaticResource RemappedKeyTemplate}"
ItemsSource="{x:Bind GetMappedNewRemapKeys(50)}">
<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>
<ItemsControl
Name="KeyboardManager_RemappedTo"
x:Uid="KeyboardManager_RemappedTo"
IsTabStop="False"
ItemTemplate="{StaticResource RemappedKeyTemplate}"
ItemsSource="{x:Bind GetMappedNewRemapKeys(50)}">
<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>
</tkcontrols:SettingsCard.Description>
</tkcontrols:SettingsCard>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</controls:SettingsGroup>
</StackPanel>
</tkcontrols:SettingsCard.Description>
</tkcontrols:SettingsCard>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</controls:SettingsGroup>
</StackPanel>
</tkcontrols:Case>
<tkcontrols:Case Value="True">
<controls:SettingsGroup x:Uid="KeyboardManager_Editor" IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}">
<StackPanel Orientation="Vertical" Spacing="16">
<tkcontrols:SettingsExpander
x:Uid="KeyboardManager_OpenNewEditor"
HeaderIcon="{ui:FontIcon Glyph=&#xEB3C;}"
IsEnabled="{x:Bind ViewModel.Enabled, Mode=OneWay}"
IsExpanded="True">
<Button
x:Uid="KeyboardManager_LaunchEditor_Button"
Command="{Binding Path=OpenNewEditorCommand}"
Style="{StaticResource AccentButtonStyle}" />
<tkcontrols:SettingsExpander.Items>
<!-- HACK: ShortcutControl does not work correctly if it's the first or last item in the expander, so we add invisible cards. -->
<tkcontrols:SettingsCard Visibility="Collapsed" />
<tkcontrols:SettingsCard Name="KBMEditorOpenShortcut" x:Uid="KeyboardManager_Editor_Open_Shortcut">
<controls:ShortcutControl
MinWidth="{StaticResource SettingActionControlMinWidth}"
AllowDisable="True"
HotkeySettings="{x:Bind Path=ViewModel.EditorShortcut, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard Visibility="Collapsed" />
</tkcontrols:SettingsExpander.Items>
</tkcontrols:SettingsExpander>
<HyperlinkButton
x:Uid="KeyboardManager_GoBackClassic"
Padding="0"
Click="GoBackClassic_Click"
FontSize="12"
FontWeight="SemiBold" />
</StackPanel>
</controls:SettingsGroup>
</tkcontrols:Case>
</tkcontrols:SwitchPresenter>
</StackPanel>
</controls:SettingsPageControl.ModuleContent>
<controls:SettingsPageControl.PrimaryLinks>

View File

@@ -91,5 +91,10 @@ namespace Microsoft.PowerToys.Settings.UI.Views
{
ViewModel.RefreshEnabledState();
}
private void GoBackClassic_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
ViewModel.UseNewEditor = false;
}
}
}