[Settings] Fixing ColorPickerButton a11y bugs (#13961)
* Added ColorPickerButton control * Updated styles * Narrator support * Update IsEnabledTextBlock.xaml Co-authored-by: Laute <Niels.Laute@philips.com>
This commit is contained in:
Niels Laute
GitHub
parent
8d383cba9d
commit
399df8ab68
|
|
@ -0,0 +1,40 @@
|
|||
<UserControl
|
||||
x:Class="Microsoft.PowerToys.Settings.UI.Controls.ColorPickerButton"
|
||||
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.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
|
||||
xmlns:clr="using:Windows.UI"
|
||||
mc:Ignorable="d"
|
||||
|
||||
d:DesignHeight="300"
|
||||
d:DesignWidth="400">
|
||||
|
||||
<Grid>
|
||||
<muxc:DropDownButton Padding="4,4,8,4" AutomationProperties.FullDescription="{x:Bind clr:ColorHelper.ToDisplayName(SelectedColor), Mode=OneWay }">
|
||||
<Border x:Name="ColorPreviewBorder"
|
||||
Width="48"
|
||||
CornerRadius="2"
|
||||
Height="24"
|
||||
BorderBrush="{ThemeResource CardBorderBrush}"
|
||||
BorderThickness="{ThemeResource CardBorderThickness}">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{x:Bind SelectedColor, Mode=OneWay}"/>
|
||||
</Border.Background>
|
||||
</Border>
|
||||
<muxc:DropDownButton.Flyout>
|
||||
<Flyout>
|
||||
<muxc:ColorPicker IsColorSliderVisible="True"
|
||||
IsColorChannelTextInputVisible="True"
|
||||
IsHexInputVisible="True"
|
||||
IsAlphaEnabled="False"
|
||||
IsAlphaSliderVisible="False"
|
||||
IsAlphaTextInputVisible="False"
|
||||
Color="{x:Bind SelectedColor, Mode=TwoWay}" />
|
||||
</Flyout>
|
||||
</muxc:DropDownButton.Flyout>
|
||||
</muxc:DropDownButton>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
// Copyright (c) Microsoft Corporation
|
||||
// The Microsoft Corporation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.IO;
|
||||
using System.Linq;
|
||||
using System.Runtime.InteropServices.WindowsRuntime;
|
||||
using Windows.Foundation;
|
||||
using Windows.Foundation.Collections;
|
||||
using Windows.UI;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Controls.Primitives;
|
||||
using Windows.UI.Xaml.Data;
|
||||
using Windows.UI.Xaml.Input;
|
||||
using Windows.UI.Xaml.Media;
|
||||
using Windows.UI.Xaml.Navigation;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public sealed partial class ColorPickerButton : UserControl
|
||||
{
|
||||
private Color _selectedColor;
|
||||
|
||||
public Color SelectedColor
|
||||
{
|
||||
get
|
||||
{
|
||||
return _selectedColor;
|
||||
}
|
||||
|
||||
set
|
||||
{
|
||||
if (_selectedColor != value)
|
||||
{
|
||||
_selectedColor = value;
|
||||
SetValue(SelectedColorProperty, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(ColorPickerButton), new PropertyMetadata(null));
|
||||
|
||||
public ColorPickerButton()
|
||||
{
|
||||
this.InitializeComponent();
|
||||
IsEnabledChanged -= ColorPickerButton_IsEnabledChanged;
|
||||
SetEnabledState();
|
||||
IsEnabledChanged += ColorPickerButton_IsEnabledChanged;
|
||||
}
|
||||
|
||||
private void ColorPickerButton_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
|
||||
{
|
||||
SetEnabledState();
|
||||
}
|
||||
|
||||
private void SetEnabledState()
|
||||
{
|
||||
if (this.IsEnabled)
|
||||
{
|
||||
ColorPreviewBorder.Opacity = 1;
|
||||
}
|
||||
else
|
||||
{
|
||||
ColorPreviewBorder.Opacity = 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
<Style TargetType="local:IsEnabledTextBlock">
|
||||
<Setter Property="Foreground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
|
||||
<Setter Property="IsTabStop" Value="False" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="local:IsEnabledTextBlock">
|
||||
|
|
|
|||
|
|
@ -96,6 +96,9 @@
|
|||
<Compile Include="Behaviors\NavigationViewHeaderBehavior.cs" />
|
||||
<Compile Include="Behaviors\NavigationViewHeaderMode.cs" />
|
||||
<Compile Include="Controls\CheckBoxWithDescriptionControl.cs" />
|
||||
<Compile Include="Controls\ColorPickerButton.xaml.cs">
|
||||
<DependentUpon>ColorPickerButton.xaml</DependentUpon>
|
||||
</Compile>
|
||||
<Compile Include="Controls\IsEnabledTextBlock\IsEnabledTextBlock.cs" />
|
||||
<Compile Include="Controls\SettingsGroup\SettingsGroupAutomationPeer.cs" />
|
||||
<Compile Include="Controls\ShortcutControl\ShortcutControl.xaml.cs">
|
||||
|
|
@ -314,6 +317,10 @@
|
|||
<PRIResource Include="Strings\en-us\Resources.resw" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Page Include="Controls\ColorPickerButton.xaml">
|
||||
<SubType>Designer</SubType>
|
||||
<Generator>MSBuild:Compile</Generator>
|
||||
</Page>
|
||||
<Page Include="Controls\IsEnabledTextBlock\IsEnabledTextBlock.xaml">
|
||||
<SubType>Designer</SubType>
|
||||
<Generator>MSBuild:Compile</Generator>
|
||||
|
|
|
|||
|
|
@ -101,71 +101,20 @@
|
|||
|
||||
<controls:Setting x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
|
||||
<controls:Setting.ActionContent>
|
||||
<muxc:DropDownButton 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 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>
|
||||
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}" />
|
||||
</controls:Setting.ActionContent>
|
||||
</controls:Setting>
|
||||
|
||||
|
||||
<controls:Setting x:Uid="FancyZones_InActiveColor" Style="{StaticResource ExpanderContentSettingStyle}">
|
||||
<controls:Setting.ActionContent>
|
||||
<muxc:DropDownButton 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 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>
|
||||
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}" />
|
||||
</controls:Setting.ActionContent>
|
||||
</controls:Setting>
|
||||
|
||||
<controls:Setting x:Uid="FancyZones_BorderColor" Style="{StaticResource ExpanderContentSettingStyle}">
|
||||
<controls:Setting.ActionContent>
|
||||
<muxc:DropDownButton 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 IsColorSliderVisible="True"
|
||||
IsColorChannelTextInputVisible="True"
|
||||
IsHexInputVisible="True"
|
||||
IsAlphaEnabled="False"
|
||||
IsAlphaSliderVisible="False"
|
||||
IsAlphaTextInputVisible="False"
|
||||
Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
|
||||
</Flyout>
|
||||
</muxc:DropDownButton.Flyout>
|
||||
</muxc:DropDownButton>
|
||||
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
|
||||
</controls:Setting.ActionContent>
|
||||
</controls:Setting>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue