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"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

    <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" x:Name="FZSettingsView">
            <TextBlock x:Uid="FancyZones_Description"
                       TextWrapping="Wrap"/>

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

            <TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       />

            <Button x:Uid="FancyZones_LaunchEditorButtonControl_Header"
                    Margin="{StaticResource SmallTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command = "{Binding LaunchEditorEventHandler, Source={StaticResource eventViewModel}}"
                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                    />

            <CustomControls:HotkeySettingsControl 
                                          x:Uid="FancyZones_HokeyEditorControl_Header"
                                          Width="320"
                                          HorizontalAlignment="Left"
                                          Margin="{StaticResource SmallTopMargin}"
                                          HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"        
                                        />

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

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

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

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

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

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

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

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


            <TextBlock x:Uid="Appearancce_GroupSettings"
                       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 x:Uid="FancyZones_HighlightOpacity"
                            Value="{ Binding Mode=TwoWay, Path=HighlightOpacity}"
                            Minimum="0"
                            Maximum="100"
                            SpinButtonPlacementMode="Inline"
                            HorizontalAlignment="Left"
                            Margin="{StaticResource SmallTopMargin}" 
                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
             
            <TextBlock x:Uid="FancyZones_ZoneHighlightColor" 
                       Style="{StaticResource BodyTextBlockStyle}"
                       Margin="{StaticResource SmallTopMargin}" />

            <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColor"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsMoreButtonVisible="True"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="True"
                              IsAlphaSliderVisible="True"
                              IsAlphaTextInputVisible="True"
                              Color="{Binding Path=ZoneHighlightColor, Mode=TwoWay, Source={StaticResource eventViewModel}}"
                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                              DataContext="{Binding ZoneHighlightColor, Source={StaticResource eventViewModel}}"/>

            <Button x:Uid="FancyZones_SaveZoneHighlightColor"
                    Margin="{StaticResource SmallTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command = "{Binding SaveZoneHighlightColorEventHandler, Source={StaticResource eventViewModel}}"
                    CommandParameter="{Binding Color, ElementName=FancyZones_ZoneHighlightColor}"
                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>            
            
            <TextBlock x:Uid="FancyZones_InActiveColor" 
                       Style="{StaticResource BodyTextBlockStyle}"
                       Margin="{StaticResource SmallTopMargin}" />
            
            <muxc:ColorPicker x:Name="FancyZones_InActiveColor"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsMoreButtonVisible="True"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="True"
                              IsAlphaSliderVisible="True"
                              IsAlphaTextInputVisible="True"
                              Color="{Binding Path=ZoneInActiveColor, Mode=TwoWay, Source={StaticResource eventViewModel}}"
                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" 
                              DataContext="{Binding ZoneInActiveColor, Source={StaticResource eventViewModel}}"/>

            <Button x:Uid="FancyZones_SaveZoneInActiveColor"
                    Margin="{StaticResource SmallTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command = "{Binding SaveInActiveColorEventHandler, Source={StaticResource eventViewModel}}"
                    CommandParameter="{Binding Color, ElementName=FancyZones_InActiveColor}"
                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>

            <TextBlock x:Uid="FancyZones_BorderColor" 
                       Style="{StaticResource BodyTextBlockStyle}"
                       Margin="{StaticResource SmallTopMargin}" />
            
            <muxc:ColorPicker x:Name="FancyZones_BorderColor"
                              Margin="0,6,0,0"
                              HorizontalAlignment="Left"
                              IsMoreButtonVisible="True"
                              IsColorSliderVisible="True"
                              IsColorChannelTextInputVisible="True"
                              IsHexInputVisible="True"
                              IsAlphaEnabled="True"
                              IsAlphaSliderVisible="True"
                              IsAlphaTextInputVisible="True"
                              Color="{Binding Path=ZoneBorderColor, Mode=TwoWay, Source={StaticResource eventViewModel}}"
                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                              DataContext="{Binding ZoneBorderColor, Source={StaticResource eventViewModel}}"/>

            <Button x:Uid="FancyZones_SaveBorderColor"
                    Margin="{StaticResource SmallTopMargin}"
                    Style="{StaticResource AccentButtonStyle}"
                    Command = "{Binding SaveBorderColorEventHandler, Source={StaticResource eventViewModel}}"
                    CommandParameter="{Binding Color, ElementName=FancyZones_BorderColor}"
                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
            
            <TextBlock x:Uid="FancyZones_ExcludeApps"
                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
                     Margin="{StaticResource SmallTopMargin}"
                     Text="{ Binding Mode=TwoWay, Path=ExcludedApps}"
                     IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>

        </StackPanel>

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

            <TextBlock x:Uid="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 NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/fancyzones/README.md">
                <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>