PowerToys/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml

 <Page
    x:Class="Microsoft.PowerToys.Settings.UI.Views.FancyZonesPage"
    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:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"        
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}" x:Name="MainView">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutVisualStates">
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SmallLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
                        <Setter Target="SidePanel.Width" Value="Auto" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Vertical" x:Name="FZSettingsView">
            <TextBlock x:Uid="FancyZones_Description"
                       TextWrapping="Wrap"/>

            <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
                          x:Uid="FancyZones_EnableToggleControl_HeaderText"
                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
                          Margin="{StaticResource MediumTopMargin}" />

            <Button Margin="{StaticResource MediumTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command = "{x:Bind ViewModel.LaunchEditorEventHandler}"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                <StackPanel Orientation="Horizontal">
                    <Viewbox Height="12" Width="12">
                        <PathIcon Data="M896 0v896H0V0h896zM768 768V128H128v640h640zM0 1920v-896h1920v896H0zm128-768v640h1664v-640H128zM1024 0h896v896h-896V0zm768 768V128h-640v640h640z"/>
                    </Viewbox>
                    <TextBlock Margin="12,0,0,0" x:Uid="FancyZones_LaunchEditorButtonControl"/>
                </StackPanel>
            </Button>

            <CustomControls:GroupTitleTextBlock 
                x:Uid="FancyZones_ZoneBehavior_GroupSettings"
                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                />

            <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}">
                <CustomControls:BodyTextBlock 
                    x:Uid="FancyZones_HotkeyEditorControl"
                    IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                    Margin="5,-12,0,0"
                    />
                <Viewbox Height="14" Width="14" Margin="5,2,0,0" >
                    <PathIcon
                        x:Name="FancyZones_HotkeyEditorControl_Icon"
                        x:Uid="FancyZones_HotkeyEditorControl_Icon"
                        VerticalAlignment="Center"
                        Data="M960 1920q-133 0-255-34t-230-96-194-150-150-195-97-229T0 960q0-133 34-255t96-230 150-194 195-150 229-97T960 0q133 0 255 34t230 96 194 150 150 195 97 229 34 256q0 133-34 255t-96 230-150 194-195 150-229 97-256 34zm0-1792q-115 0-221 30t-198 84-169 130-130 168-84 199-30 221q0 114 30 220t84 199 130 169 168 130 199 84 221 30q114 0 220-30t199-84 169-130 130-168 84-199 30-221q0-114-30-220t-84-199-130-169-168-130-199-84-221-30zm-64 640h128v640H896V768zm0-256h128v128H896V512z">
                        <Interactivity:Interaction.Behaviors>
                            <Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="False">
                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemChromeDisabledLowColor}" />
                            </Core:DataTriggerBehavior>
                            <Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="True">
                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemBaseHighColor}" />
                            </Core:DataTriggerBehavior>
                        </Interactivity:Interaction.Behaviors>
                    </PathIcon>
                </Viewbox>
            </StackPanel>

            <CustomControls:HotkeySettingsControl 
                x:Uid="FancyZones_HotkeyEditorControl_TextBox"
                Width="240"
                HorizontalAlignment="Left"
                Margin="0,5,0,0"
                HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
                Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                />

            <CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      />

            <CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      />

            <CheckBox x:Uid="FancyZones_OverrideSnapHotkeysCheckBoxControl"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideSnapHotkeys}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_MoveWindowsAcrossAllMonitorsCheckBoxControl"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsAcrossMonitors}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_DisplayChangeMoveWindowsCheckBoxControl"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.DisplayChangeMoveWindows}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      />

            <CheckBox x:Uid="FancyZones_ZoneSetChangeMoveWindows"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ZoneSetChangeMoveWindows}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_AppLastZoneMoveWindows"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.AppLastZoneMoveWindows}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_OpenWindowOnActiveMonitor"
                      IsChecked="{ Binding Mode=TwoWay, Path=OpenWindowOnActiveMonitor}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_RestoreSize"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreSize}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_UseCursorPosEditorStartupScreen"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.UseCursorPosEditorStartupScreen}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowOnAllMonitors}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CheckBox x:Uid="FancyZones_MakeDraggedWindowTransparentCheckBoxControl"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MakeDraggedWindowsTransparent}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <CustomControls:GroupTitleTextBlock x:Uid="Appearance_GroupSettings"
                       IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       />

            <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}" Spacing="12">
                <Slider x:Uid="FancyZones_HighlightOpacity"
                    Minimum="0"
                    Maximum="100"
                    Width="240"
                    IsThumbToolTipEnabled="False"
                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.HighlightOpacity}"
                    HorizontalAlignment="Left"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
                <CustomControls:BodyTextBlock
                    Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
                    IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                    VerticalAlignment="Center"
                    FontSize="16"
                    Margin="0,21,0,0"/>
            </StackPanel>

            <CustomControls:BodyTextBlock
                x:Uid="FancyZones_ZoneHighlightColor"
                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                <Border Width="48" CornerRadius="2" Height="24">
                    <Border.Background>
                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"/>
                    </Border.Background>
                </Border>
                <muxc:DropDownButton.Flyout>
                    <Flyout>
                        <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColor"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="False"
                              IsAlphaSliderVisible="False"
                              IsAlphaTextInputVisible="False"
                              Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"
                              />
                    </Flyout>
                </muxc:DropDownButton.Flyout>

            </muxc:DropDownButton>

            <CustomControls:BodyTextBlock
                x:Uid="FancyZones_InActiveColor"
                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>

            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                <Border Width="48" CornerRadius="2" Height="24">
                    <Border.Background>
                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
                    </Border.Background>
                </Border>
                <muxc:DropDownButton.Flyout>
                    <Flyout>
                        <muxc:ColorPicker x:Name="FancyZones_InActiveColorPicker"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="False"
                              IsAlphaSliderVisible="False"
                              IsAlphaTextInputVisible="False"
                              Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
                    </Flyout>
                </muxc:DropDownButton.Flyout>
            </muxc:DropDownButton>

            <CustomControls:BodyTextBlock
                x:Uid="FancyZones_BorderColor"
                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" />

            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                <Border Width="48" CornerRadius="2" Height="24">
                    <Border.Background>
                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"/>
                    </Border.Background>
                </Border>
                <muxc:DropDownButton.Flyout>
                    <Flyout>
                        <muxc:ColorPicker x:Name="FancyZones_BorderColor"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsColorSliderVisible="True"                             
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="False"
                              IsAlphaSliderVisible="False"
                              IsAlphaTextInputVisible="False"
                              Color="{x:Bind  Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"
                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
                    </Flyout>
                </muxc:DropDownButton.Flyout>
            </muxc:DropDownButton>

            <CustomControls:GroupTitleTextBlock 
                x:Uid="FancyZones_ExcludeApps"
                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                />
            
            <TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
                     Margin="{StaticResource SmallTopMargin}"
                     Text="{x:Bind Mode=TwoWay, Path=ViewModel.ExcludedApps}"
                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                     Width="380"
                     Height="160"
                     HorizontalAlignment="Left"
                     TextWrapping="Wrap"
                     AcceptsReturn="True"/>

        </StackPanel>

        <StackPanel x:Name="SidePanel"
                    Orientation="Vertical"
                    HorizontalAlignment="Left"
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">

            <TextBlock x:Uid="About_FancyZones"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>

            <Image MaxWidth="240" Source="https://aka.ms/powerToysFancyZoneSettingImage" />

            <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones">
                <TextBlock x:Uid="Module_overview" />
            </HyperlinkButton>

            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
                <TextBlock x:Uid="Give_Feedback" />
            </HyperlinkButton>

            <!--
            <TextBlock Text="Contributors"
                           Style="{StaticResource SettingsGroupTitleStyle}"/>

            <HyperlinkButton Content="Contributor name"/>
            <HyperlinkButton Content="Contributor name"/>
            <HyperlinkButton Content="Contributor name"/>
            -->
        </StackPanel>
    </Grid>
</Page>