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:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
        <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" />
                    </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" />
                    </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">
            <TextBlock Text="Create window layouts to help make multi-tasking easy."
                       TextWrapping="Wrap"/>

            <ToggleSwitch Header="Enable FancyZones"
                          IsOn="True"
                          Margin="{StaticResource SmallTopMargin}" />

            <TextBlock Text="Zone behaviour"
                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <CheckBox Content="Hold Shift key or any non-primary mouse button to enable zones while dragging"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Override Windows Snap hotkeys (Win + arrow) to move windows between zones"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Flash zones when the active FancyZones layout changes"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Keep windows in their zones when the screen resolution changes"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="During zone layout changes, windows assigned to a zone will match new size/positions"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Keep windows pinned to multiple desktops in the same zone when the active desktop changes"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Move newly created windows to their last known zone"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>

            <CheckBox Content="Follow mouse cursor instead of focus when launching editor in a multi screen environment"
                          IsChecked="True"
                          Margin="{StaticResource SmallTopMargin}"/>




            <TextBlock Text="Appearance" 
                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <!-- TO DO: Do we still need this numberbox? The colorpicker has an Alpha/Opacity option as well so we could use that -->
            <muxc:NumberBox Header="Zone highlight opacity (%)"
                            Value="90"
                            Minimum="0"
                            Maximum="100"
                            SpinButtonPlacementMode="Inline"
                            HorizontalAlignment="Left"
                            Margin="{StaticResource SmallTopMargin}" />

            <TextBlock Text="Zone highlight color (default: #0078D7)" 
                       Style="{StaticResource BodyTextBlockStyle}"
                       Margin="{StaticResource SmallTopMargin}" />
            
            <muxc:ColorPicker Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsMoreButtonVisible="True"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="True"
                              IsAlphaSliderVisible="True"
                              IsAlphaTextInputVisible="True" />

            <TextBlock Text="Excluded apps" 
                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <TextBox Header="To exclude an application from snapping to zones add its name here (one per line). Excluded apps will react to the Windows Snap regardless of all other settings."
                     Margin="{StaticResource SmallTopMargin}"/>
            
        </StackPanel>
        
        <StackPanel x:Name="SidePanel"
                                Orientation="Vertical"
                                HorizontalAlignment="Left"
                                Width="{StaticResource SidePanelWidth}"
                                Grid.Column="1">

            <TextBlock Text="About this feature"
                                   Style="{StaticResource SettingsGroupTitleStyle}"
                                   Margin="{StaticResource XSmallBottomMargin}"/>
            <Image Source="https://user-images.githubusercontent.com/9866362/77859136-f04ae880-7207-11ea-8a7f-4295342fe319.gif" />
            <HyperlinkButton Content="Module overview" NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/fancyzones/README.md"/>
            <HyperlinkButton Content="Give feedback"/>

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

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