PowerToys/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/UnifiedMappingControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="KeyboardManagerEditorUI.Controls.UnifiedMappingControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:KeyboardManagerEditorUI.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    Loaded="UserControl_Loaded"
    mc:Ignorable="d">

    <Grid
        Width="720"
        MinHeight="480"
        ColumnSpacing="24">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--  Left Column: Original Input (Trigger)  -->
        <StackPanel
            Grid.Row="0"
            Grid.Column="0"
            Orientation="Vertical"
            Spacing="8">
            <TextBlock
                x:Uid="UnifiedMappingControlTriggerTextBlock"
                FontWeight="SemiBold"
                Text="Trigger" />

            <ComboBox
                x:Name="TriggerTypeComboBox"
                HorizontalAlignment="Stretch"
                SelectionChanged="TriggerTypeComboBox_SelectionChanged">
                <ComboBoxItem
                    AutomationProperties.Name="Key or shortcut"
                    IsSelected="True"
                    Tag="KeyOrShortcut">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xEDA7;" />
                        <TextBlock Text="Key or shortcut" />
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem AutomationProperties.Name="Mouse button" Tag="Mouse">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="16" Glyph="&#xE962;" />
                        <TextBlock Text="Mouse button" />
                    </StackPanel>
                </ComboBoxItem>
            </ComboBox>

            <Rectangle
                Height="1"
                Margin="0,12,0,12"
                HorizontalAlignment="Stretch"
                Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />

            <tkcontrols:SwitchPresenter
                x:Name="TriggerSwitchPresenter"
                TargetType="x:String"
                Value="{Binding SelectedItem.Tag, ElementName=TriggerTypeComboBox}">

                <!--  Key or Shortcut Trigger  -->
                <tkcontrols:Case Value="KeyOrShortcut">
                    <StackPanel Orientation="Vertical" Spacing="8">
                        <ToggleButton
                            x:Name="TriggerKeyToggleBtn"
                            MinHeight="86"
                            Padding="8,24,8,24"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center"
                            Checked="TriggerKeyToggleBtn_Checked"
                            Style="{StaticResource CustomShortcutToggleButtonStyle}"
                            Unchecked="TriggerKeyToggleBtn_Unchecked">
                            <ToggleButton.Content>
                                <ItemsControl x:Name="TriggerKeys">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <controls:WrapPanel
                                                HorizontalSpacing="4"
                                                Orientation="Horizontal"
                                                VerticalSpacing="4" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <local:KeyVisual
                                                Padding="8"
                                                Background="{ThemeResource ControlFillColorDefaultBrush}"
                                                BorderThickness="1"
                                                Content="{Binding}"
                                                CornerRadius="{StaticResource OverlayCornerRadius}"
                                                FontSize="16"
                                                Style="{StaticResource DefaultKeyVisualStyle}" />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </ToggleButton.Content>
                        </ToggleButton>
                        <CheckBox Content="Allow chords" IsChecked="True" />
                        <CheckBox Content="Exact match" IsChecked="True" />
                    </StackPanel>
                </tkcontrols:Case>

                <!--  Mouse Button Trigger  -->
                <tkcontrols:Case Value="Mouse">
                    <ComboBox
                        x:Name="MouseTriggerComboBox"
                        MinHeight="86"
                        HorizontalAlignment="Stretch"
                        VerticalContentAlignment="Center">
                        <ComboBoxItem Content="Left" Tag="LeftMouse" />
                        <ComboBoxItem Content="Center" Tag="RightMouse" />
                        <ComboBoxItem Content="Right" Tag="RightMouse" />
                        <ComboBoxItem Content="Button 1" Tag="ScrollUp" />
                        <ComboBoxItem Content="Button 2" Tag="ScrollDown" />
                    </ComboBox>
                </tkcontrols:Case>
            </tkcontrols:SwitchPresenter>

            <CheckBox
                x:Name="AppSpecificCheckBox"
                x:Uid="UnifiedMappingControlAppSpecificCheckBox"
                Content="Only apply to a specific app"
                IsEnabled="False" />
            <TextBox
                x:Name="AppNameTextBox"
                x:Uid="UnifiedMappingControlAppNameTextBox"
                Background="{ThemeResource TextControlBackgroundFocused}"
                BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
                GotFocus="AppNameTextBox_GotFocus"
                PlaceholderText="Enter app name (e.g., notepad.exe)"
                Visibility="Collapsed" />
        </StackPanel>

        <!--  Arrow Separator  -->
        <Grid
            Grid.Row="0"
            Grid.Column="1"
            RowSpacing="8">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Rectangle
                Width="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Stretch"
                Fill="{ThemeResource TextFillColorDisabledBrush}" />

            <Viewbox
                Grid.Row="1"
                Width="12"
                Height="12">
                <PathIcon Data="{StaticResource ArrowIconData}" Foreground="{ThemeResource TextFillColorDisabledBrush}" />
            </Viewbox>
            <Rectangle
                Grid.Row="2"
                Width="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Stretch"
                Fill="{ThemeResource TextFillColorDisabledBrush}" />
        </Grid>
        <!--  Right Column: Action Output  -->
        <StackPanel
            Grid.Row="0"
            Grid.Column="2"
            Orientation="Vertical"
            Spacing="8">
            <TextBlock
                x:Uid="UnifiedMappingControlActionTextBlock"
                FontWeight="SemiBold"
                Text="Action" />
            <ComboBox
                x:Name="ActionTypeComboBox"
                HorizontalAlignment="Stretch"
                SelectionChanged="ActionTypeComboBox_SelectionChanged">
                <ComboBoxItem
                    AutomationProperties.Name="Remap to key or shortcut"
                    IsSelected="True"
                    Tag="KeyOrShortcut">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xEDA7;" />
                        <TextBlock Text="Remap to key or shortcut" />
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem AutomationProperties.Name="Insert text" Tag="Text">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xE8D2;" />
                        <TextBlock Text="Insert text" />
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem AutomationProperties.Name="Open URL" Tag="OpenUrl">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xE774;" />
                        <TextBlock Text="Open URL" />
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem AutomationProperties.Name="Open app" Tag="OpenApp">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xECAA;" />
                        <TextBlock Text="Open app" />
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem AutomationProperties.Name="Remap to mouse click" Tag="MouseClick">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="14" Glyph="&#xE962;" />
                        <TextBlock Text="Remap to mouse click" />
                    </StackPanel>
                </ComboBoxItem>
            </ComboBox>

            <Rectangle
                Height="1"
                Margin="0,12,0,12"
                HorizontalAlignment="Stretch"
                Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />

            <tkcontrols:SwitchPresenter
                x:Name="ActionSwitchPresenter"
                TargetType="x:String"
                Value="{Binding SelectedItem.Tag, ElementName=ActionTypeComboBox}">

                <!--  Key or Shortcut Action  -->
                <tkcontrols:Case Value="KeyOrShortcut">
                    <ToggleButton
                        x:Name="ActionKeyToggleBtn"
                        MinHeight="86"
                        Padding="8,24,8,24"
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center"
                        Checked="ActionKeyToggleBtn_Checked"
                        Style="{StaticResource CustomShortcutToggleButtonStyle}"
                        Unchecked="ActionKeyToggleBtn_Unchecked">
                        <ToggleButton.Content>
                            <ItemsControl x:Name="ActionKeys">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <controls:WrapPanel
                                            HorizontalSpacing="4"
                                            Orientation="Horizontal"
                                            VerticalSpacing="4" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <local:KeyVisual
                                            Padding="8"
                                            Background="{ThemeResource CustomAccentBackgroundBrush}"
                                            BorderThickness="0"
                                            Content="{Binding}"
                                            CornerRadius="{StaticResource OverlayCornerRadius}"
                                            FontSize="16"
                                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                                            Style="{StaticResource DefaultKeyVisualStyle}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ToggleButton.Content>
                    </ToggleButton>
                </tkcontrols:Case>

                <!--  Text Action  -->
                <tkcontrols:Case Value="Text">
                    <TextBox
                        x:Name="TextContentBox"
                        x:Uid="UnifiedMappingControlTextContentTextBox"
                        Height="120"
                        AcceptsReturn="True"
                        Background="{ThemeResource TextControlBackgroundFocused}"
                        BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
                        FontSize="13"
                        GotFocus="TextContentBox_GotFocus"
                        Header="Text to type"
                        PlaceholderText="Enter the text to type when triggered"
                        TextWrapping="Wrap" />
                </tkcontrols:Case>

                <!--  Open URL Action  -->
                <tkcontrols:Case Value="OpenUrl">
                    <TextBox
                        x:Name="UrlPathInput"
                        x:Uid="UnifiedMappingControlUrlPathTextBox"
                        Background="{ThemeResource TextControlBackgroundFocused}"
                        BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
                        FontSize="13"
                        GotFocus="UrlPathInput_GotFocus"
                        Header="URL to open"
                        PlaceholderText="https://example.com" />
                </tkcontrols:Case>

                <!--  Open App Action  -->
                <tkcontrols:Case Value="OpenApp">
                    <StackPanel Orientation="Vertical" Spacing="16">
                        <StackPanel Orientation="Horizontal" Spacing="4">
                            <TextBox
                                x:Name="ProgramPathInput"
                                x:Uid="UnifiedMappingControlProgramPathTextBox"
                                Width="240"
                                GotFocus="ProgramPathInput_GotFocus"
                                Header="Program path"
                                PlaceholderText="C:\Program Files\..." />
                            <Button
                                x:Name="ProgramPathSelectButton"
                                x:Uid="UnifiedMappingControlPathSelectButton"
                                VerticalAlignment="Bottom"
                                Click="ProgramPathSelectButton_Click"
                                Content="Browse..." />
                        </StackPanel>

                        <TextBox
                            x:Name="ProgramArgsInput"
                            x:Uid="UnifiedMappingControlArgumentsTextBox"
                            GotFocus="ProgramArgsInput_GotFocus"
                            Header="Arguments (optional)"
                            PlaceholderText="--arg1 value1" />

                        <StackPanel Orientation="Horizontal" Spacing="4">
                            <TextBox
                                x:Name="StartInPathInput"
                                x:Uid="UnifiedMappingControlStartInTextBox"
                                Width="240"
                                GotFocus="StartInPathInput_GotFocus"
                                Header="Start in directory (optional)"
                                PlaceholderText="C:\Users\..." />
                            <Button
                                x:Name="StartInSelectButton"
                                x:Uid="UnifiedMappingControlStartInSelectButton"
                                VerticalAlignment="Bottom"
                                Click="StartInSelectButton_Click"
                                Content="Browse..." />
                        </StackPanel>

                        <ComboBox
                            x:Name="ElevationComboBox"
                            x:Uid="UnifiedMappingControlElevationComboBox"
                            HorizontalAlignment="Stretch"
                            Header="Run as"
                            SelectedIndex="0">
                            <x:String>Normal</x:String>
                            <x:String>Elevated</x:String>
                            <x:String>Different user</x:String>
                        </ComboBox>

                        <ComboBox
                            x:Name="IfRunningComboBox"
                            x:Uid="UnifiedMappingControlIfRunningComboBox"
                            HorizontalAlignment="Stretch"
                            Header="If already running"
                            SelectedIndex="0">
                            <x:String>Show window</x:String>
                            <x:String>Start another</x:String>
                            <x:String>Do nothing</x:String>
                            <x:String>Close</x:String>
                            <x:String>End task</x:String>
                        </ComboBox>

                        <ComboBox
                            x:Name="VisibilityComboBox"
                            x:Uid="UnifiedMappingControlVisibilityComboBox"
                            HorizontalAlignment="Stretch"
                            Header="Window visibility"
                            SelectedIndex="0">
                            <x:String>Normal</x:String>
                            <x:String>Hidden</x:String>
                            <x:String>Minimized</x:String>
                            <x:String>Maximized</x:String>
                        </ComboBox>
                    </StackPanel>
                </tkcontrols:Case>

                <!--  Mouse Click Action (Placeholder)  -->
                <tkcontrols:Case Value="MouseClick">
                    <TextBlock
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Text="Mouse click action - coming soon"
                        TextWrapping="Wrap" />
                </tkcontrols:Case>
            </tkcontrols:SwitchPresenter>
        </StackPanel>

        <!--  Validation InfoBar spanning all columns  -->
        <InfoBar
            x:Name="ValidationInfoBar"
            Grid.Row="1"
            Grid.ColumnSpan="3"
            Margin="0,16,0,0"
            IsClosable="True"
            IsOpen="False"
            Severity="Warning" />
    </Grid>
</UserControl>