refactor inlineColorPicker with AP.labeledBy

marcelwgn · Aug 8, 2023 · 3a25d14 · 3a25d14
1 parent f0a6a30
commit 3a25d14
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 44 deletions.
diff --git a/WinUIGallery/ControlPages/DesignGuidance/AccessibilityColorContrastPage.xaml b/WinUIGallery/ControlPages/DesignGuidance/AccessibilityColorContrastPage.xaml
@@ -78,46 +78,33 @@
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <TextBlock
-                Grid.Row="0"
-                Grid.Column="0"
-                Margin="12,0,0,0"
-                VerticalAlignment="Bottom"
-                Style="{ThemeResource BodyStrongTextBlockStyle}"
-                Text="Text color" />
-
             <controls1:InlineColorPicker
                 x:Name="TextColorPicker"
-                Grid.Row="1"
-                Grid.Column="0"
-                Margin="12,0,0,12"
+                AutomationProperties.Name="TextColorPicker"
+                Grid.RowSpan="2"
+                Header="Text Color"
                 ColorChanged="TextColorPicker_ColorChanged"
                 Color="Black" />
 
-            <TextBlock
-                Grid.Row="0"
-                Grid.Column="1"
-                Margin="12,10,0,0"
-                Style="{ThemeResource BodyStrongTextBlockStyle}"
-                Text="Background color" />
             <controls1:InlineColorPicker
                 x:Name="BackgroundColorPicker"
-                Grid.Row="1"
+                AutomationProperties.Name="BackgroundColorPicker"
                 Grid.Column="1"
-                Margin="12,0,0,12"
+                Grid.RowSpan="2"
+                Header="Background Color"
                 ColorChanged="BackgroundColorPicker_ColorChanged" />
 
             <TextBlock
                 Grid.Column="3"
                 Margin="12,0,0,0"
-                VerticalAlignment="Bottom"
+                VerticalAlignment="Center"
                 Style="{ThemeResource BodyStrongTextBlockStyle}"
                 Text="Contrast Ratio" />
             <TextBlock
                 x:Name="ContrastRatioPresenter"
                 Grid.Row="1"
                 Grid.Column="3"
-                Margin="12,0,0,0"
+                Margin="12,-4,0,0"
                 Style="{ThemeResource SubtitleTextBlockStyle}"
                 Text="21:1" />
 

diff --git a/WinUIGallery/Controls/InlineColorPicker.xaml b/WinUIGallery/Controls/InlineColorPicker.xaml
@@ -6,13 +6,36 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid ColumnSpacing="2">
+    <Grid ColumnSpacing="2" Margin="12,12,0,12">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
-        <SplitButton Padding="0" VerticalAlignment="Stretch">
-            <Rectangle x:Name="ColorPreview" Fill="{x:Bind ColorBrush, Mode=OneWay}" VerticalAlignment="Stretch" MinHeight="30" Width="40"/>
+
+        <TextBlock
+            x:Name="HeaderText"
+            Grid.Row="0"
+            Grid.Column="0"
+            Grid.ColumnSpan="2"
+            Margin="0,0,0,12"
+            VerticalAlignment="Bottom"
+            Style="{ThemeResource BodyStrongTextBlockStyle}"
+            Text="{x:Bind Header, Mode=OneWay}" />
+
+        <SplitButton
+            AutomationProperties.LabeledBy="{Binding ElementName=HeaderText}"
+            Padding="0" VerticalAlignment="Stretch"
+            Grid.Row="1">
+            <Rectangle
+                x:Name="ColorPreview"
+                Fill="{x:Bind ColorBrush, Mode=OneWay}"
+                VerticalAlignment="Stretch"
+                MinHeight="30"
+                Width="40"/>
             <SplitButton.Flyout>
                 <Flyout Opened="PickerFlyout_Opened">
                     <ColorPicker x:Name="Picker"
@@ -23,6 +46,14 @@
                 </Flyout>
             </SplitButton.Flyout>
         </SplitButton>
-        <TextBox x:Name="ColorHex" TextChanged="ColorHex_TextChanged" MinWidth="120" HorizontalAlignment="Stretch" Margin="4, 0, 0, 0" Grid.Column="1"/>
+        <TextBox
+            x:Name="ColorHex"
+            AutomationProperties.LabeledBy="{Binding ElementName=HeaderText}"
+            TextChanged="ColorHex_TextChanged"
+            MinWidth="120"
+            HorizontalAlignment="Stretch"
+            Margin="4,0,0,0"
+            Grid.Column="1"
+            Grid.Row="1" />
     </Grid>
 </UserControl>
diff --git a/WinUIGallery/Controls/InlineColorPicker.xaml.cs b/WinUIGallery/Controls/InlineColorPicker.xaml.cs
@@ -3,6 +3,7 @@
 using System.IO;
 using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
+using AppUIBasics.Controls;
 using Microsoft.UI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
@@ -22,6 +23,15 @@ namespace WinUIGallery.DesktopWap.Controls
 {
     public sealed partial class InlineColorPicker : UserControl
     {
+        public string Header
+        {
+            get { return (string)GetValue(HeaderProperty); }
+            set { SetValue(HeaderProperty, value); }
+        }
+
+        public static readonly DependencyProperty HeaderProperty =
+            DependencyProperty.Register("Header", typeof(string), typeof(InlineColorPicker), new PropertyMetadata(null));
+
         public Color Color
         {
             get { return (Color)GetValue(ColorProperty); }

diff --git a/WinUIGallery/WinUIGallery.csproj b/WinUIGallery/WinUIGallery.csproj
@@ -55,10 +55,10 @@
     <PackageReference Include="ColorCode.Core" />
     <PackageReference Include="Microsoft.Graphics.Win2D" />
     <PackageReference Include="Microsoft.Windows.CsWinRT" />
-    <PackageReference Include="CommunityToolkit.Labs.WinUI.SegmentedControl"/>
-    <PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls"/>
-    <PackageReference Include="CommunityToolkit.WinUI.UI"/>
-    <PackageReference Include="CommunityToolkit.WinUI.UI.Animations"/>
+    <PackageReference Include="CommunityToolkit.Labs.WinUI.SegmentedControl" />
+    <PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls" />
+    <PackageReference Include="CommunityToolkit.WinUI.UI" />
+    <PackageReference Include="CommunityToolkit.WinUI.UI.Animations" />
     <PackageReference Include="Microsoft.VCRTForwarders.140" />
     <Manifest Include="$(ApplicationManifest)" />
 
@@ -70,22 +70,15 @@
     <PackageReference Include="System.Private.Uri" />
   </ItemGroup>
   <ItemGroup Condition="'$(IsInWinUIRepo)' != 'true'">
-    <PackageReference Update="Microsoft.WindowsAppSDK" Version="$(WindowsAppSdkPackageVersion)" />
+    <PackageReference Update="Microsoft.WindowsAppSDK" Version="1.4.230628000-preview1" />
     <PackageReference Remove="ColorCode.Core" />
-    <PackageReference Include="ColorCode.WinUI"
-                      Version="$(ColorCodeVersion)" />
-    <PackageReference Update="CommunityToolkit.Labs.WinUI.SegmentedControl"
-                      Version="$(CommunityToolkitSegmentedControlVersion)" />                      
-    <PackageReference Update="CommunityToolkit.Labs.WinUI.SettingsControls"
-                      Version="$(CommunityToolkitSettingsControlsVersion)" />
-    <PackageReference Update="CommunityToolkit.WinUI.UI"
-                      Version="$(CommunityToolkitWinUIVersion)" />
-    <PackageReference Update="CommunityToolkit.WinUI.UI.Animations"
-                      Version="$(CommunityToolkitWinUIVersion)" />                                                
-    <PackageReference Update="Microsoft.Graphics.Win2D"
-                      Version="$(GraphicsWin2DVersion)" />
-    <PackageReference Update="Microsoft.VCRTForwarders.140"
-                      Version="1.0.6" />
+    <PackageReference Include="ColorCode.WinUI" Version="$(ColorCodeVersion)" />
+    <PackageReference Update="CommunityToolkit.Labs.WinUI.SegmentedControl" Version="$(CommunityToolkitSegmentedControlVersion)" />                      
+    <PackageReference Update="CommunityToolkit.Labs.WinUI.SettingsControls" Version="$(CommunityToolkitSettingsControlsVersion)" />
+    <PackageReference Update="CommunityToolkit.WinUI.UI" Version="$(CommunityToolkitWinUIVersion)" />
+    <PackageReference Update="CommunityToolkit.WinUI.UI.Animations" Version="$(CommunityToolkitWinUIVersion)" />                                                
+    <PackageReference Update="Microsoft.Graphics.Win2D" Version="$(GraphicsWin2DVersion)" />
+    <PackageReference Update="Microsoft.VCRTForwarders.140" Version="1.0.6" />
     <!-- Get latest WinRT.Runtime.dll from C#/WinRT -->
     <PackageReference Update="Microsoft.Windows.CsWinRT" Version="2.0.3" />
     <PackageReference Update="System.Private.Uri" Version="4.3.2" />