From 7ac7e48e666f50a97bd31c2d0bf9e4b427b64468 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 27 Dec 2021 14:29:31 +0100
Subject: [PATCH] [Settings] Added disabled state to FZ preview control
 (#15166)

* Added Disabled state

* Added wallpaper image to installer file
---
 installer/PowerToysSetup/Product.wxs          |   2 +-
 .../Wallpaper.png}                            | Bin
 .../Controls/FancyZonesPreviewControl.xaml    |  17 ++++++++++++----
 .../Controls/FancyZonesPreviewControl.xaml.cs |  19 +++++++++++++++++-
 .../Settings.UI/Settings.UI.csproj            |   2 +-
 .../Settings.UI/Views/FancyZonesPage.xaml     |   2 +-
 6 files changed, 34 insertions(+), 8 deletions(-)
 rename src/settings-ui/Settings.UI/Assets/{wallpaper_placeholder.png => Modules/Wallpaper.png} (100%)

diff --git a/installer/PowerToysSetup/Product.wxs b/installer/PowerToysSetup/Product.wxs
index 8df7b554a8..2bdbb9619a 100644
--- a/installer/PowerToysSetup/Product.wxs
+++ b/installer/PowerToysSetup/Product.wxs
@@ -877,7 +877,7 @@
     </DirectoryRef>
     <DirectoryRef Id="SettingsV2AssetsModulesInstallFolder" FileSource="$(var.BinX64Dir)Settings\Assets\Modules">
       <Component Id="SettingsV2AssetsModules" Guid="A0B961A9-77D0-4223-88A9-E3B41BD9C329" Win64="yes">
-        <?foreach File in ColorPicker.png;FancyZones.png;Awake.png;ImageResizer.png;KBM.png;MouseUtils.png;PowerLauncher.png;PowerPreview.png;PowerRename.png;PT.png;ShortcutGuide.png;VideoConference.png?>
+        <?foreach File in ColorPicker.png;FancyZones.png;Awake.png;ImageResizer.png;KBM.png;MouseUtils.png;PowerLauncher.png;PowerPreview.png;PowerRename.png;PT.png;ShortcutGuide.png;VideoConference.png;Wallpaper.png?>
           <File Id="SettingsV2AssetsModules_$(var.File)" Source="$(var.BinX64Dir)Settings\Assets\Modules\$(var.File)" />
         <?endforeach?>
       </Component>
diff --git a/src/settings-ui/Settings.UI/Assets/wallpaper_placeholder.png b/src/settings-ui/Settings.UI/Assets/Modules/Wallpaper.png
similarity index 100%
rename from src/settings-ui/Settings.UI/Assets/wallpaper_placeholder.png
rename to src/settings-ui/Settings.UI/Assets/Modules/Wallpaper.png
diff --git a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml
index a6f7b5f9f9..3195fa46b0 100644
--- a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml
+++ b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml
@@ -6,10 +6,9 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
+    Loaded="FancyZonesPreviewControl_Loaded"
     RequestedTheme="Dark"
-    mc:Ignorable="d"
-    d:DesignHeight="300"
-    d:DesignWidth="400">
+    mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
@@ -32,7 +31,7 @@
         </ResourceDictionary>
       
     </UserControl.Resources>
-        <Grid CornerRadius="4" BorderBrush="Black" Background="Black" BorderThickness="6" HorizontalAlignment="Center">
+    <Grid x:Name="RootGrid" CornerRadius="4" BorderBrush="Black" Background="Black" BorderThickness="6" HorizontalAlignment="Center" MinWidth="170" MinHeight="86">
         <Grid.RowDefinitions>
             <RowDefinition Height="*"/>
             <RowDefinition Height="*"/>
@@ -42,6 +41,16 @@
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal"/>
+                <VisualState x:Name="Disabled">
+                    <VisualState.Setters>
+                        <Setter Target="RootGrid.Opacity" Value="0.4" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
         <Border Opacity="0.8" Grid.ColumnSpan="2" Grid.RowSpan="3" CornerRadius="2" >
             <Image Source="{x:Bind WallpaperPath, Mode=OneWay}" Stretch="UniformToFill" AutomationProperties.AccessibilityView="Raw"/>
         </Border>
diff --git a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs
index 25e200669f..b608706952 100644
--- a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs
+++ b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs
@@ -34,6 +34,11 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             }
         }
 
+        private void FancyZonesPreviewControl_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            SetEnabledState();
+        }
+
         public bool IsSystemTheme
         {
             get { return (bool)GetValue(IsSystemThemeProperty); }
@@ -48,7 +53,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             set { SetValue(WallpaperPathProperty, value); }
         }
 
-        public static readonly DependencyProperty WallpaperPathProperty = DependencyProperty.Register("WallpaperPath", typeof(string), typeof(FancyZonesPreviewControl), new PropertyMetadata("ms-appx:///Assets/wallpaper_placeholder.png"));
+        public static readonly DependencyProperty WallpaperPathProperty = DependencyProperty.Register("WallpaperPath", typeof(string), typeof(FancyZonesPreviewControl), new PropertyMetadata("ms-appx:///Assets/Modules/Wallpaper.png"));
 
         public Color CustomBorderColor
         {
@@ -139,5 +144,17 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             Zone2Number.Foreground = numberBrush;
             Zone3Number.Foreground = numberBrush;
         }
+
+        private void SetEnabledState()
+        {
+            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
+        }
+
+        private void FancyZonesPreviewControl_Loaded(object sender, RoutedEventArgs e)
+        {
+            IsEnabledChanged -= FancyZonesPreviewControl_IsEnabledChanged;
+            SetEnabledState();
+            IsEnabledChanged += FancyZonesPreviewControl_IsEnabledChanged;
+        }
     }
 }
diff --git a/src/settings-ui/Settings.UI/Settings.UI.csproj b/src/settings-ui/Settings.UI/Settings.UI.csproj
index d959387b7b..938dfef33d 100644
--- a/src/settings-ui/Settings.UI/Settings.UI.csproj
+++ b/src/settings-ui/Settings.UI/Settings.UI.csproj
@@ -280,7 +280,7 @@
     <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
     <Content Include="Assets\StoreLogo.png" />
     <Content Include="Assets\StoreLogo.scale-100.png" />
-    <Content Include="Assets\wallpaper_placeholder.png" />
+    <Content Include="Assets\Modules\Wallpaper.png" />
     <Content Include="Assets\Wide310x150Logo.scale-200.png" />
     <Content Include="Properties\Default.rd.xml" />
   </ItemGroup>
diff --git a/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml b/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
index c0ff3c84ce..3394dafc6e 100644
--- a/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
@@ -116,7 +116,7 @@
                                                                    CustomNumberColor="{x:Bind Path=ViewModel.ZoneNumberColor, Mode=OneWay}"
                                                                    ShowZoneNumber="{x:Bind Path=ViewModel.ShowZoneNumber, Mode=OneWay}"
                                                                    Margin="{StaticResource ExpanderSettingMargin}" 
-                                                                   HorizontalAlignment="Left"
+                                                                   HorizontalAlignment="Center"
                                                                    Width="170"
                                                                    Grid.Column="1"
                                                                    Height="86"/>