PowerToys/src/settings-ui/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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"     
    mc:Ignorable="d"
    AutomationProperties.LandmarkType="Main">

    <Page.Resources>
        <converters:BoolToObjectConverter x:Key="BoolToComboBoxIndexConverter" TrueValue="1" FalseValue="0"/>
        <converters:StringFormatConverter x:Key="StringFormatConverter"/>
    </Page.Resources>

    <controls:SettingsPageControl x:Uid="FancyZones"
                                  ModuleImageSource="ms-appx:///Assets/Modules/FancyZones.png">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel Orientation="Vertical">

                <controls:Setting x:Uid="FancyZones_EnableToggleControl_HeaderText">
                    <controls:Setting.Icon>
                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png" ShowAsMonochrome="False" />
                    </controls:Setting.Icon>
                    <controls:Setting.ActionContent>
                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}"/>
                    </controls:Setting.ActionContent>
                </controls:Setting>


                <controls:SettingsGroup x:Uid="FancyZones_Editor_GroupSettings" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <Button Style="{StaticResource SettingButtonStyle}" x:Uid="FancyZones_LaunchEditorButton_Accessible" Command="{x:Bind ViewModel.LaunchEditorEventHandler}">
                        <controls:Setting x:Uid="FancyZones_LaunchEditorButtonControl" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xEB3C;">
                            <!--<controls:Setting.Icon>
                                <PathIcon Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z"/>
                            </controls:Setting.Icon>-->
                            <controls:Setting.ActionContent>
                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
                            </controls:Setting.ActionContent>
                        </controls:Setting>
                    </Button>



                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;" Style="{StaticResource ExpanderHeaderSettingStyle}">
                                <controls:Setting.ActionContent>
                                    <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}"
                                                                    HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"/>
                                </controls:Setting.ActionContent>
                            </controls:Setting>
                        </controls:SettingExpander.Header>

                        <controls:SettingExpander.Content>
                            <StackPanel>
                                <controls:Setting x:Uid="FancyZones_UseCursorPosEditorStartupScreen" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.UseCursorPosEditorStartupScreen}"/>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>
                            </StackPanel>
                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>
                </controls:SettingsGroup>


                <controls:SettingsGroup x:Uid="FancyZones_Zones" x:Name="ZonesSettingsGroup" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="FancyZones_ZoneBehavior_GroupSettings" Icon="&#xE620;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
                        </controls:SettingExpander.Header>
                        <controls:SettingExpander.Content>
                            <StackPanel>

                                <CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}" Margin="{StaticResource ExpanderSettingMargin}"  />
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}" Margin="{StaticResource ExpanderSettingMargin}"  />
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowOnAllMonitors}" Margin="{StaticResource ExpanderSettingMargin}"  />
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.SpanZonesAcrossMonitors}" 
                                          Margin="56, 0, 40, 16"
                                          AutomationProperties.Name="{Binding ElementName=SpanZonesAcrossMonitorsPrerequisitesTitle, Path=Text}">
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock x:Name="SpanZonesAcrossMonitorsPrerequisitesTitle"
                                                   Margin="0,10,0,0"
                                                   x:Uid="FancyZones_SpanZonesAcrossMonitorsCheckBoxControl" />
                                        <controls:TextBlockControl x:Uid="FancyZones_SpanZonesAcrossMonitorsPrerequisites"
                                            FontSize="{StaticResource SecondaryTextFontSize}"
                                            EnabledForeground="{ThemeResource TextFillColorSecondaryBrush}"
                                            DisabledForeground="{ThemeResource TextFillColorDisabledBrush}"/>
                                    </StackPanel>
                                </CheckBox>
                            
                                <controls:Setting x:Uid="FancyZones_OverlappingZones" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <ComboBox SelectedIndex="{x:Bind Path=ViewModel.OverlappingZonesAlgorithmIndex, Mode=TwoWay}" MinWidth="{StaticResource SettingActionControlMinWidth}">
                                            <ComboBoxItem x:Uid="FancyZones_OverlappingZonesSmallest" />
                                            <ComboBoxItem x:Uid="FancyZones_OverlappingZonesLargest" />
                                            <ComboBoxItem x:Uid="FancyZones_OverlappingZonesPositional" />
                                            <ComboBoxItem x:Uid="FancyZones_OverlappingZonesClosestCenter" />
                                        </ComboBox>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>

                                <controls:Setting x:Uid="FancyZones_HighlightOpacity" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <Slider Minimum="0"
                                            Maximum="100"
                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.HighlightOpacity}"
                                            HorizontalAlignment="Right"/>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>

                                <controls:Setting  x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <muxc:DropDownButton 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 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>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>


                                <controls:Setting  x:Uid="FancyZones_InActiveColor" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <muxc:DropDownButton 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 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>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>

                                <controls:Setting  x:Uid="FancyZones_BorderColor" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <muxc:DropDownButton 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 IsColorSliderVisible="True"
                                                                      IsColorChannelTextInputVisible="True"
                                                                      IsHexInputVisible="True"
                                                                      IsAlphaEnabled="False"
                                                                      IsAlphaSliderVisible="False"
                                                                      IsAlphaTextInputVisible="False"
                                                                      Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
                                                </Flyout>
                                            </muxc:DropDownButton.Flyout>
                                        </muxc:DropDownButton>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>

                            </StackPanel>
                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>
                </controls:SettingsGroup>

                
                <controls:SettingsGroup x:Uid="FancyZones_Windows" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">

                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="FancyZones_WindowBehavior_GroupSettings" Icon="&#xE737;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
                        </controls:SettingExpander.Header>
                        <controls:SettingExpander.Content>
                            <StackPanel>
                                <CheckBox x:Uid="FancyZones_DisplayChangeMoveWindowsCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.DisplayChangeMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_ZoneSetChangeMoveWindows" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ZoneSetChangeMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_AppLastZoneMoveWindows" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.AppLastZoneMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_OpenWindowOnActiveMonitor" IsChecked="{ Binding Mode=TwoWay, Path=OpenWindowOnActiveMonitor}" Margin="{StaticResource ExpanderSettingMargin}"/>
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_RestoreSize" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreSize}" Margin="{StaticResource ExpanderSettingMargin}"/>
                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_MakeDraggedWindowTransparentCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MakeDraggedWindowsTransparent}" Margin="{StaticResource ExpanderSettingMargin}"/>
                            </StackPanel>

                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>

                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="FancyZones_OverrideSnapHotkeys" Icon="&#xE145;" Style="{StaticResource ExpanderHeaderSettingStyle}">
                                <controls:Setting.ActionContent>
                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideSnapHotkeys}"/>
                                </controls:Setting.ActionContent>
                            </controls:Setting>
                        </controls:SettingExpander.Header>

                        <controls:SettingExpander.Content>
                            <StackPanel>
                                <controls:Setting x:Uid="FancyZones_MoveWindow" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsBasedOnPosition, Converter={StaticResource BoolToComboBoxIndexConverter}}" MinHeight="56" MinWidth="{StaticResource SettingActionControlMinWidth}">
                                            <ComboBoxItem x:Uid="FancyZones_MoveWindowLeftRightBasedOnZoneIndex_Accessible">
                                                <StackPanel Orientation="Vertical" Spacing="4">
                                                    <TextBlock x:Uid="FancyZones_MoveWindowLeftRightBasedOnZoneIndex"/>
                                                    <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}" Style="{StaticResource SecondaryTextStyle}">
                                                        <Run x:Uid="FancyZones_MoveWindowLeftRightBasedOnZoneIndex_Description" />
                                                    </TextBlock>
                                                </StackPanel>
                                            </ComboBoxItem>
                                            <ComboBoxItem x:Uid="FancyZones_MoveWindowBasedOnRelativePosition_Accessible">
                                                <StackPanel Orientation="Vertical" Spacing="4">
                                                    <TextBlock x:Uid="FancyZones_MoveWindowBasedOnRelativePosition"/>
                                                    <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"  Style="{StaticResource SecondaryTextStyle}">
                                                        <Run x:Uid="FancyZones_MoveWindowBasedOnRelativePosition_Description" />
                                                    </TextBlock>
                                                </StackPanel>
                                            </ComboBoxItem>
                                        </ComboBox>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>

                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                <CheckBox x:Uid="FancyZones_MoveWindowsAcrossAllMonitorsCheckBoxControl"
                                          Margin="56,8,16,8"
                                          IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsAcrossMonitors}"
                                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"/>
                            </StackPanel>
                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>
                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="FancyZones_Layouts" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="FancyZones_QuickLayoutSwitch" Icon="&#xE737;" Style="{StaticResource ExpanderHeaderSettingStyle}" >
                                <controls:Setting.ActionContent>
                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.QuickLayoutSwitch}"/>
                                </controls:Setting.ActionContent>
                            </controls:Setting>
                        </controls:SettingExpander.Header>

                        <controls:SettingExpander.Content>
                            <StackPanel>
                                <CheckBox x:Uid="FancyZones_FlashZonesOnQuickSwitch" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.FlashZonesOnQuickSwitch}" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.QuickSwitchEnabled}" Margin="{StaticResource ExpanderSettingMargin}"/>
                            </StackPanel>
                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>
                </controls:SettingsGroup>






                <controls:SettingsGroup x:Uid="ExcludedApps" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingExpander IsExpanded="True">
                        <controls:SettingExpander.Header>
                            <controls:Setting x:Uid="FancyZones_ExcludeApps" Icon="&#xECE4;" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
                        </controls:SettingExpander.Header>
                        <controls:SettingExpander.Content>
                            <TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
                                 Margin="{StaticResource ExpanderSettingMargin}"
                                         Text="{x:Bind Mode=TwoWay, Path=ViewModel.ExcludedApps, UpdateSourceTrigger=PropertyChanged}"
                                         ScrollViewer.VerticalScrollBarVisibility ="Visible"
                                         ScrollViewer.VerticalScrollMode="Enabled"
                                         ScrollViewer.IsVerticalRailEnabled="True"
                                         TextWrapping="Wrap"
                                         AcceptsReturn="True"
                                         MinWidth="240"
                                         MinHeight="160" />
                        </controls:SettingExpander.Content>
                    </controls:SettingExpander>
                </controls:SettingsGroup>
            </StackPanel>

        
</controls:SettingsPageControl.ModuleContent>

<controls:SettingsPageControl.PrimaryLinks>
            <controls:PageLink x:Uid="LearnMore_FancyZones" Link="https://aka.ms/PowerToysOverview_FancyZones"/>
        </controls:SettingsPageControl.PrimaryLinks>
</controls:SettingsPageControl>
</Page>