PowerToys/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
Niels Laute 65b6513207
[Settings] Multiple UX refinements (e.g. OOBE) (#5113)
* Updated FZ page with new resizing logic

* Multiple UX fixes. Added updated resizing logic to other pages

* Added ImageResizer file format example snippets to tooltip

* Added warning icon in hotkeysettingscontrol

* Fixed formatting

* Keys label can now be set

* Replaced custom titleblocks with converter

* Updated strings

* Added correct links to the images. Added PT description on General page as well.

* Colorpicker image updates

* Rounded corners

* Fix

* Added back in correct subtitles
2020-07-24 12:02:56 -07:00

321 lines
17 KiB
XML

<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.Width" Value="{StaticResource SidePanelWidth}"/>
<Setter Target="FZSettingsView.(Grid.Row)" Value="0" />
<Setter Target="LinksPanel.(RelativePanel.Below)" Value="AboutImage"/>
<Setter Target="AboutTitle.Visibility" Value="Visible" />
</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.Width" Value="500"/>
<Setter Target="FZSettingsView.(Grid.Row)" Value="1" />
<Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
<Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
<Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
<Setter Target="AboutTitle.Visibility" Value="Collapsed" />
</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 x:Name="FZSettingsView" Orientation="Vertical">
<ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
x:Uid="FancyZones_EnableToggleControl_HeaderText"
IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
<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>
<TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
Style="{StaticResource SettingsGroupTitleStyle}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<CustomControls:HotkeySettingsControl
Width="240"
x:Uid="FancyZones_HotkeyEditorControl"
HorizontalAlignment="Left"
Margin="{StaticResource SmallTopMargin}"
HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
Keys="Win, Ctrl, Alt, Shift"
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}"/>
<TextBlock x:Uid="Appearance_GroupSettings"
Style="{StaticResource SettingsGroupTitleStyle}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<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}"/>
<TextBlock
Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
VerticalAlignment="Center"
FontWeight="SemiBold"
FontSize="16"
Margin="0,16,0,0"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
</StackPanel>
<TextBlock x:Uid="FancyZones_ZoneHighlightColor"
Margin="{StaticResource SmallTopMargin}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<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>
<TextBlock x:Uid="FancyZones_InActiveColor"
Margin="{StaticResource SmallTopMargin}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<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>
<TextBlock x:Uid="FancyZones_BorderColor"
Margin="{StaticResource SmallTopMargin}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<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>
<TextBlock x:Uid="FancyZones_ExcludeApps"
Style="{StaticResource SettingsGroupTitleStyle}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<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>
<RelativePanel x:Name="SidePanel"
HorizontalAlignment="Left"
Width="{StaticResource SidePanelWidth}"
Grid.Column="1">
<StackPanel x:Name="DescriptionPanel">
<TextBlock x:Uid="About_FancyZones"
x:Name="AboutTitle" Grid.ColumnSpan="2"
Style="{StaticResource SettingsGroupTitleStyle}"
Margin="{StaticResource XSmallBottomMargin}"/>
<TextBlock x:Uid="FancyZones_Description"
TextWrapping="Wrap"/>
</StackPanel>
<Border x:Name="AboutImage"
CornerRadius="4"
Grid.Row="2"
MaxWidth="240"
HorizontalAlignment="Left"
Margin="{StaticResource SmallTopBottomMargin}"
RelativePanel.Below="DescriptionPanel">
<Image Source="https://aka.ms/powerToysFancyZoneSettingImage" />
</Border>
<StackPanel x:Name="LinksPanel"
RelativePanel.Below="AboutImage"
Orientation="Vertical" >
<HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones" Margin="0,-3,0,0">
<TextBlock x:Uid="Module_overview" />
</HyperlinkButton>
<HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
<TextBlock x:Uid="Give_Feedback" />
</HyperlinkButton>
</StackPanel>
</RelativePanel>
</Grid>
</Page>