[Settings] Added disabled state to FZ preview control (#15166)

* Added Disabled state

* Added wallpaper image to installer file

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>

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>

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;
+        }
     }
 }

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>

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"/>