Mirrors/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2026-04-08 12:18:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

[ColorPicker]Fluent UX (#28560)

Browse Source 
* Init

* UI tweaks

* Remaining UI tweaks

* Update ColorEditorView.xaml.cs

* Getting things up and running

* Tweaks

* Bump WPF version number

* UI tweaks

* Updated sliders styles

* Finalize colorslider styling

* Fix color

* Revert back to a default window

* Adding icon

* Address label feedback

* Correct wrong file change

* Update ColorEditorWindow.xaml.cs

* Tweaks

* Update MainView.xaml

* XAML styler

* Update MainWindow.xaml.cs

* Fix NOTICE.md

* UI tweaks

* Remove IsHitTestVisible

* Bump to WPFUI 3.0

* Fix scrollbars

* Replacing textblock with symbolicon

* Change size

* Update ColorEditorView.xaml
This commit is contained in:
Niels Laute
2024-02-15 15:24:27 +01:00
committed by GitHub
parent c75ac456d7
commit 319a0dd6c2
29 changed files with 1466 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Directory.Packages.props
View File

@@ -90,7 +90,7 @@
<PackageVersion Include="Vanara.PInvoke.User32" Version="3.4.11" /> <PackageVersion Include="Vanara.PInvoke.User32" Version="3.4.11" />
<PackageVersion Include="Vanara.PInvoke.Shell32" Version="3.4.11" /> <PackageVersion Include="Vanara.PInvoke.Shell32" Version="3.4.11" />
<PackageVersion Include="WinUIEx" Version="2.2.0" /> <PackageVersion Include="WinUIEx" Version="2.2.0" />
<PackageVersion Include="WPF-UI" Version="3.0.0-preview.13" /> <PackageVersion Include="WPF-UI" Version="3.0.0" />
</ItemGroup> </ItemGroup>
<ItemGroup Condition="'$(IsExperimentationLive)'!=''"> <ItemGroup Condition="'$(IsExperimentationLive)'!=''">
<!-- Additional dependencies used by experimentation --> <!-- Additional dependencies used by experimentation -->

2
NOTICE.md
View File

@@ -1369,4 +1369,4 @@ EXHIBIT A -Mozilla Public License.
- Vanara.PInvoke.Shell32 3.4.11 - Vanara.PInvoke.Shell32 3.4.11
- Vanara.PInvoke.User32 3.4.11 - Vanara.PInvoke.User32 3.4.11
- WinUIEx 2.2.0 - WinUIEx 2.2.0
- WPF-UI 3.0.0-preview.13 - WPF-UI 3.0.0

20
src/modules/colorPicker/ColorPickerUI/App.xaml
View File

@@ -1,16 +1,16 @@
<Application x:Class="ColorPickerUI.App" <Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPickerUI.App"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:local="clr-namespace:ColorPickerUI" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
StartupUri="MainWindow.xaml"> StartupUri="MainWindow.xaml">
<Application.Resources> <Application.Resources>
<ResourceDictionary> <ResourceDictionary>
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ui:ThemeResources /> <ui:ThemesDictionary Theme="Dark" />
<ui:XamlControlsResources /> <ui:ControlsDictionary />
<ResourceDictionary Source="Resources/Styles.xaml"/> <ResourceDictionary Source="Resources/Styles.xaml" />
<ResourceDictionary Source="Resources/ViewModelViewMappings.xaml"/> <ResourceDictionary Source="Resources/ViewModelViewMappings.xaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>
</Application.Resources> </Application.Resources>

5
src/modules/colorPicker/ColorPickerUI/App.xaml.cs
View File

@@ -7,7 +7,6 @@ using System.ComponentModel.Composition;
using System.Threading; using System.Threading;
using System.Windows; using System.Windows;
using ColorPicker.Mouse; using ColorPicker.Mouse;
using Common.UI;
using ManagedCommon; using ManagedCommon;
namespace ColorPickerUI namespace ColorPickerUI
@@ -21,7 +20,6 @@ namespace ColorPickerUI
private static string[] _args; private static string[] _args;
private int _powerToysRunnerPid; private int _powerToysRunnerPid;
private bool disposedValue; private bool disposedValue;
private ThemeManager _themeManager;
private CancellationTokenSource NativeThreadCTS { get; set; } private CancellationTokenSource NativeThreadCTS { get; set; }
@@ -62,7 +60,6 @@ namespace ColorPickerUI
_powerToysRunnerPid = -1; _powerToysRunnerPid = -1;
} }
_themeManager = new ThemeManager(this);
base.OnStartup(e); base.OnStartup(e);
} }
@@ -86,8 +83,6 @@ namespace ColorPickerUI
_instanceMutex?.Dispose(); _instanceMutex?.Dispose();
} }
_themeManager?.Dispose();
disposedValue = true; disposedValue = true;
} }
} }

70
src/modules/colorPicker/ColorPickerUI/ColorEditorWindow.xaml
View File

@@ -1,27 +1,47 @@
<Window x:Class="ColorPicker.ColorEditorWindow" <ui:FluentWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.ColorEditorWindow"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:p="clr-namespace:ColorPicker.Properties" xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
mc:Ignorable="d" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
AutomationProperties.Name="{x:Static p:Resources.cp_editor}" xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors" Width="440"
ui:TitleBar.ExtendViewIntoTitleBar="True" Height="380"
ui:TitleBar.ButtonStyle="{DynamicResource AppTitleBarButtonStyle}" ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
ui:WindowHelper.UseModernWindowStyle="True" ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
BorderBrush="{DynamicResource WindowBorderBrush}" AutomationProperties.Name="{x:Static p:Resources.cp_editor}"
Background="{DynamicResource PrimaryBackgroundBrush}" ExtendsContentIntoTitleBar="True"
BorderThickness="1" ResizeMode="NoResize"
Title="Color Picker" Topmost="True"
Height="380" WindowCornerPreference="Default"
Width="440" WindowStartupLocation="CenterScreen"
ResizeMode="NoResize" mc:Ignorable="d">
Topmost="True"
WindowStartupLocation="CenterScreen">
<e:Interaction.Behaviors> <e:Interaction.Behaviors>
<behaviors:CloseZoomWindowBehavior/> <behaviors:CloseZoomWindowBehavior />
</e:Interaction.Behaviors> </e:Interaction.Behaviors>
</Window> <Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ui:TitleBar
x:Name="TitleBar"
Title="{x:Static p:Resources.CP_Title}"
Grid.Row="0"
Height="32"
Padding="16,0,16,0"
ShowMaximize="False"
ShowMinimize="False">
<ui:TitleBar.Icon>
<ui:ImageIcon Source="pack://application:,,,/Assets/ColorPicker/icon.ico" />
</ui:TitleBar.Icon>
</ui:TitleBar>
<ContentPresenter
x:Name="contentPresenter"
Grid.Row="1"
Content="{Binding Content}" />
</Grid>
</ui:FluentWindow>

8
src/modules/colorPicker/ColorPickerUI/ColorEditorWindow.xaml.cs
View File

@@ -5,19 +5,24 @@
using System; using System;
using System.Windows; using System.Windows;
using ColorPicker.Helpers; using ColorPicker.Helpers;
using Common.UI;
using Wpf.Ui.Controls;
namespace ColorPicker namespace ColorPicker
{ {
/// <summary> /// <summary>
/// Interaction logic for ColorEditorWindow.xaml /// Interaction logic for ColorEditorWindow.xaml
/// </summary> /// </summary>
public partial class ColorEditorWindow : Window public partial class ColorEditorWindow : FluentWindow
{ {
private readonly AppStateHandler _appStateHandler; private readonly AppStateHandler _appStateHandler;
public ColorEditorWindow(AppStateHandler appStateHandler) public ColorEditorWindow(AppStateHandler appStateHandler)
{ {
InitializeComponent(); InitializeComponent();
Wpf.Ui.Appearance.SystemThemeWatcher.Watch(this);
WindowBackdropType = OSVersionHelper.IsWindows11() ? WindowBackdropType.Mica : WindowBackdropType = WindowBackdropType.None;
_appStateHandler = appStateHandler; _appStateHandler = appStateHandler;
Closing += ColorEditorWindow_Closing; Closing += ColorEditorWindow_Closing;
} }
@@ -31,7 +36,6 @@ namespace ColorPicker
protected override void OnSourceInitialized(EventArgs e) protected override void OnSourceInitialized(EventArgs e)
{ {
base.OnSourceInitialized(e); base.OnSourceInitialized(e);
NativeMethods.SetToolWindowStyle(this);
} }
} }
} }

11
src/modules/colorPicker/ColorPickerUI/ColorPickerUI.csproj
View File

@@ -48,15 +48,21 @@
<ApplicationManifest>App.manifest</ApplicationManifest> <ApplicationManifest>App.manifest</ApplicationManifest>
</PropertyGroup> </PropertyGroup>
<ItemGroup> <ItemGroup>
<None Remove="Assets\ColorPicker\icon.ico" />
</ItemGroup>
<ItemGroup>
<Resource Include="Assets\ColorPicker\icon.ico">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Resource>
<Resource Include="Shaders\GridShader.cso" /> <Resource Include="Shaders\GridShader.cso" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="Microsoft.Windows.CsWinRT" /> <PackageReference Include="Microsoft.Windows.CsWinRT" />
<PackageReference Include="ModernWpfUI" />
<PackageReference Include="System.ComponentModel.Composition" /> <PackageReference Include="System.ComponentModel.Composition" />
<PackageReference Include="System.IO.Abstractions" /> <PackageReference Include="System.IO.Abstractions" />
<PackageReference Include="Microsoft.Xaml.Behaviors.Wpf" /> <PackageReference Include="Microsoft.Xaml.Behaviors.Wpf" />
<PackageReference Include="System.Drawing.Common" /> <PackageReference Include="System.Drawing.Common" />
<PackageReference Include="WPF-UI" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<None Update="Properties\Settings.settings"> <None Update="Properties\Settings.settings">
@@ -66,9 +72,6 @@
<None Update="Assets\ColorPicker\colorPicker.cur"> <None Update="Assets\ColorPicker\colorPicker.cur">
<CopyToOutputDirectory>Always</CopyToOutputDirectory> <CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None> </None>
<None Update="Assets\ColorPicker\icon.ico">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<ProjectReference Include="..\..\..\common\GPOWrapperProjection\GPOWrapperProjection.csproj" /> <ProjectReference Include="..\..\..\common\GPOWrapperProjection\GPOWrapperProjection.csproj" />

227
src/modules/colorPicker/ColorPickerUI/Controls/ColorFormatControl.xaml
View File

@@ -1,66 +1,181 @@
<UserControl x:Class="ColorPicker.Controls.ColorFormatControl" <UserControl
xmlns:local="clr-namespace:ColorPicker" x:Class="ColorPicker.Controls.ColorFormatControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:ColorPicker"
xmlns:p="clr-namespace:ColorPicker.Properties" xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
<Border x:Name="MainBorder" mc:Ignorable="d">
Margin="12,16,12,0" <UserControl.Resources>
Width="348" <Style x:Key="ReadonlyTextBoxStyle" TargetType="{x:Type TextBox}">
Height="36" <!-- Universal WPF UI focus -->
CornerRadius="4" <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
HorizontalAlignment="Stretch" <!-- Universal WPF UI focus -->
Background="{DynamicResource ColorControlBackgroundBrush}"> <!-- Universal WPF UI ContextMenu -->
<Grid> <Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
<!-- Universal WPF UI ContextMenu -->
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="CaretBrush" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="{StaticResource TextBoxBorderThemeThickness}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
<Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Border
x:Name="ContentBorder"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Grid
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ScrollViewer
x:Name="PART_ContentHost"
VerticalAlignment="Center"
CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsTabStop="{TemplateBinding ScrollViewer.IsTabStop}"
Style="{StaticResource DefaultTextBoxScrollViewerStyle}"
TextElement.Foreground="{TemplateBinding Foreground}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
</Grid>
</Border>
<!-- The Accent Border is a separate element so that changes to the border thickness do not affect the position of the element -->
<Border
x:Name="AccentBorder"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="{StaticResource TextBoxAccentBorderThemeThickness}"
CornerRadius="{TemplateBinding Border.CornerRadius}">
<Border.BorderBrush>
<SolidColorBrush Color="Transparent" />
</Border.BorderBrush>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,0" />
<Setter TargetName="AccentBorder" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
<Setter TargetName="ContentBorder" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsFocused" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentBorder" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Cursor" Value="IBeam" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ContentBorder" Property="Background" Value="Transparent" />
<Setter TargetName="ContentBorder" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Border
x:Name="MainBorder"
Height="48"
Margin="0,0,0,8"
HorizontalAlignment="Stretch"
Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid Margin="12,0,0,0">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/> <ColumnDefinition Width="48" />
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*" />
<ColumnDefinition Width="36"/> <ColumnDefinition Width="40" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock x:Name="FormatNameTextBlock" <TextBlock
Opacity="0.6" x:Name="FormatNameTextBlock"
Style="{DynamicResource BodyStrongTextBlockStyle}" VerticalAlignment="Center"
Foreground="{DynamicResource PrimaryForegroundBrush}" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Margin="8" Style="{StaticResource CaptionTextBlockStyle}"
VerticalAlignment="Center"/> TextTrimming="CharacterEllipsis" />
<TextBox x:Name="ColorTextRepresentationTextBlock" <TextBox
FontFamily="Consolas" x:Name="ColorTextRepresentationTextBlock"
FontSize="14" Grid.Column="1"
Foreground="{DynamicResource PrimaryForegroundBrush}" Margin="0,-2,0,0"
Grid.Column="1" VerticalAlignment="Center"
IsTabStop="False" AutomationProperties.Name="{x:Static p:Resources.Color_Code}"
Background="Transparent" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent"
IsReadOnly="True" BorderThickness="0"
VerticalAlignment="Center" IsReadOnly="True"
Padding="8" IsTabStop="False"
AutomationProperties.Name="{x:Static p:Resources.Color_Code}" Style="{StaticResource ReadonlyTextBoxStyle}" />
/>
<Button x:Name="CopyToClipboardButton" <Button
ToolTipService.ToolTip="{x:Static p:Resources.Copy_to_clipboard}" x:Name="CopyToClipboardButton"
Background="{DynamicResource ColorControlBackgroundBrush}" Grid.Column="2"
FontSize="16" Width="36"
FontFamily="{StaticResource SymbolThemeFontFamily}" Height="36"
Foreground="{DynamicResource PrimaryForegroundBrush}" Margin="0,0,4,0"
Opacity="0.6" Padding="0"
Height="36" AutomationProperties.HelpText="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:Controls.ColorFormatControl}}, Path=SelectedColorCopyHelperText}"
Width="36" AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}"
Grid.Column="2" Background="Transparent"
Style="{StaticResource DefaultButtonStyle}" BorderBrush="Transparent"
AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}" Style="{StaticResource SubtleButtonStyle}"
AutomationProperties.HelpText="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:Controls.ColorFormatControl}}, Path=SelectedColorCopyHelperText}"> ToolTipService.ToolTip="{x:Static p:Resources.Copy_to_clipboard}">
<Button.Content> <Button.Content>
<TextBlock Text="&#xE8C8;" AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}" /> <ui:SymbolIcon FontSize="20" Symbol="Copy20" />
</Button.Content> </Button.Content>
</Button> </Button>
</Grid> </Grid>
<Border.Effect>
<DropShadowEffect BlurRadius="6" Opacity="0.24" ShadowDepth="1" />
</Border.Effect>
</Border> </Border>
</UserControl> </UserControl>

6
src/modules/colorPicker/ColorPickerUI/Controls/ColorFormatControl.xaml.cs
View File

@@ -4,6 +4,7 @@
using System; using System;
using System.Globalization; using System.Globalization;
using System.Linq;
using System.Windows; using System.Windows;
using System.Windows.Automation.Peers; using System.Windows.Automation.Peers;
using System.Windows.Controls; using System.Windows.Controls;
@@ -111,10 +112,11 @@ namespace ColorPicker.Controls
return; return;
} }
var peer = UIElementAutomationPeer.FromElement(clipboardNotification); var innerTextBlock = ((StackPanel)clipboardNotification).Children.OfType<TextBlock>().FirstOrDefault();
var peer = UIElementAutomationPeer.FromElement(innerTextBlock);
if (peer == null) if (peer == null)
{ {
peer = UIElementAutomationPeer.CreatePeerForElement(clipboardNotification); peer = UIElementAutomationPeer.CreatePeerForElement(innerTextBlock);
} }
peer.RaiseAutomationEvent(AutomationEvents.MenuOpened); peer.RaiseAutomationEvent(AutomationEvents.MenuOpened);

799
src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml
View File

@@ -1,457 +1,392 @@
<UserControl x:Class="ColorPicker.Controls.ColorPickerControl" <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.Controls.ColorPickerControl"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ColorPicker.Controls" xmlns:helpers="clr-namespace:ColorPicker.Helpers"
xmlns:p="clr-namespace:ColorPicker.Properties" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:p="clr-namespace:ColorPicker.Properties"
mc:Ignorable="d" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
TabIndex="3" AutomationProperties.Name="{x:Static p:Resources.Color_Palette}"
AutomationProperties.Name="{x:Static p:Resources.Color_Palette}" FocusManager.IsFocusScope="True"
FocusManager.IsFocusScope="True" KeyboardNavigation.TabNavigation="Once"
KeyboardNavigation.TabNavigation="Once"> TabIndex="3"
mc:Ignorable="d">
<UserControl.Resources> <UserControl.Resources>
<Style TargetType="{x:Type Slider}">
<Style TargetType="Thumb" <Setter Property="MinWidth" Value="104" />
x:Key="SliderThumbStyle"> <Setter Property="MinHeight" Value="21" />
<Setter Property="BorderThickness" <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
Value="4" /> <Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" <Setter Property="OverridesDefaultStyle" Value="True" />
Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="Thumb"> <ControlTemplate TargetType="{x:Type Slider}">
<Border Background="Transparent" <Grid>
BorderBrush="{DynamicResource PrimaryForegroundBrush}" <Grid.RowDefinitions>
BorderThickness="{TemplateBinding BorderThickness}" <RowDefinition Height="Auto" />
CornerRadius="{DynamicResource SliderThumbCornerRadius}" /> <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TickBar
x:Name="TopTick"
Grid.Row="0"
Height="6"
Fill="Transparent"
Placement="Top"
SnapsToDevicePixels="True"
Visibility="Collapsed" />
<Border
x:Name="TrackBackground"
Grid.Row="1"
Height="8"
Margin="0"
Background="{TemplateBinding Background}"
BorderThickness="0"
CornerRadius="4" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Focusable" Value="False" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Height" Value="20" />
<Setter Property="Width" Value="20" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{DynamicResource SliderOuterThumbBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="16">
<Ellipse
x:Name="Ellipse"
Width="12"
Height="12"
Fill="{TemplateBinding Foreground}"
Stroke="Transparent"
StrokeThickness="0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Focusable" Value="False" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<TickBar
x:Name="BottomTick"
Grid.Row="2"
Height="6"
Fill="Transparent"
Placement="Bottom"
SnapsToDevicePixels="True"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True" />
</ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
</Style> </Style>
<ControlTemplate x:Key="SliderHorizontal"
TargetType="Slider">
<Grid Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="SliderContainer"
Grid.Row="1"
Background="Transparent"
ui:FocusVisualHelper.IsTemplateFocusTarget="True">
<Border Background="{TemplateBinding Background}"
Margin="1,0,1,0"
CornerRadius="6"
VerticalAlignment="Center"
Height="12">
<Border.Effect>
<DropShadowEffect BlurRadius="6"
Opacity="0.32"
ShadowDepth="2" />
</Border.Effect>
</Border>
<Grid x:Name="HorizontalTemplate"
MinHeight="{DynamicResource SliderHorizontalHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalTrackRect"
Fill="Transparent"
Height="{DynamicResource SliderTrackThemeHeight}"
Grid.Row="1"
Grid.ColumnSpan="3" />
<Rectangle x:Name="HorizontalDecreaseRect"
Width="{Binding ActualWidth, ElementName=HorizontalDecrease}"
Fill="Transparent"
Grid.Row="1" />
<TickBar x:Name="TopTickBar"
Placement="Top"
Visibility="Collapsed"
Fill="{DynamicResource SliderTickBarFill}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Bottom"
Margin="0,0,0,4"
Grid.ColumnSpan="3" />
<TickBar x:Name="BottomTickBar"
Placement="Bottom"
Visibility="Collapsed"
Fill="{DynamicResource SliderTickBarFill}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Top"
Margin="0,4,0,0"
Grid.Row="2"
Grid.ColumnSpan="3" />
<Track x:Name="PART_Track"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="0"
Grid.ColumnSpan="3">
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="HorizontalDecrease"
Command="{x:Static Slider.DecreaseLarge}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="HorizontalThumb"
Style="{StaticResource SliderThumbStyle}"
DataContext="{TemplateBinding Value}"
Height="20"
VerticalAlignment="Center"
Margin="0,0,0,0"
Width="20"
ui:FocusVisualHelper.FocusVisualMargin="-14,-6,-14,-6">
<Thumb.Resources>
<Style TargetType="ToolTip"
BasedOn="{StaticResource SliderAutoToolTipStyle}" />
</Thumb.Resources>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement"
Value="TopLeft">
<Setter TargetName="TopTickBar"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="BottomRight">
<Setter TargetName="BottomTickBar"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="Both">
<Setter TargetName="TopTickBar"
Property="Visibility"
Value="Visible" />
<Setter TargetName="BottomTickBar"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="HorizontalThumb"
Property="Opacity"
Value="0.8" />
</Trigger>
<Trigger SourceName="HorizontalThumb"
Property="IsDragging"
Value="True">
<Setter TargetName="HorizontalThumb"
Property="Opacity"
Value="0.6" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="HorizontalDecreaseRect"
Property="Fill"
Value="{DynamicResource SliderTrackValueFillDisabled}" />
<Setter TargetName="HorizontalTrackRect"
Property="Fill"
Value="{DynamicResource SliderTrackFillDisabled}" />
<Setter TargetName="HorizontalThumb"
Property="Background"
Value="{DynamicResource SliderThumbBackgroundDisabled}" />
<Setter TargetName="TopTickBar"
Property="Fill"
Value="{DynamicResource SliderTickBarFillDisabled}" />
<Setter TargetName="BottomTickBar"
Property="Fill"
Value="{DynamicResource SliderTickBarFillDisabled}" />
<Setter TargetName="SliderContainer"
Property="Background"
Value="{DynamicResource SliderContainerBackgroundDisabled}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CustomSLiderStyle"
TargetType="Slider">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="false" />
<Setter Property="Background"
Value="{DynamicResource SliderTrackFill}" />
<Setter Property="BorderThickness"
Value="{DynamicResource SliderBorderThemeThickness}" />
<Setter Property="Foreground"
Value="{DynamicResource SliderTrackValueFill}" />
<Setter Property="FontFamily"
Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{DynamicResource ControlContentThemeFontSize}" />
<!--<Setter Property="ManipulationMode" Value="None" />-->
<Setter Property="FocusVisualStyle"
Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals"
Value="{DynamicResource UseSystemFocusVisuals}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin"
Value="-7,0,-7,0" />
<Setter Property="ui:ControlHelper.CornerRadius"
Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template"
Value="{StaticResource SliderHorizontal}" />
<Style.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter Property="Template"
Value="{StaticResource SliderVertical}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources> </UserControl.Resources>
<Grid x:Name="PickerPanel" <Border
HorizontalAlignment="Stretch" BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
Margin="12,2,12,2"> BorderThickness="1"
<Grid.Effect> CornerRadius="{DynamicResource ControlCornerRadius}">
<DropShadowEffect BlurRadius="6" <Grid
Opacity="0.32" x:Name="PickerPanel"
ShadowDepth="2" /> Height="248"
</Grid.Effect> HorizontalAlignment="Stretch"
<Grid.ColumnDefinitions> ClipToBounds="True"
<ColumnDefinition Width="46" /> Opacity="1">
<ColumnDefinition Width="46" /> <Grid.RowDefinitions>
<ColumnDefinition Width="165" /> <RowDefinition Height="36" />
<ColumnDefinition Width="46" /> <RowDefinition Height="36" />
<ColumnDefinition Width="46" /> <RowDefinition Height="*" />
</Grid.ColumnDefinitions> <RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Button x:Name="colorVariation1Button" <Button
Grid.Column="0" x:Name="colorVariation1Button"
TabIndex="3" Grid.Column="0"
ui:ControlHelper.CornerRadius="2,0,0,2" helpers:ControlHelper.CornerRadius="4,4,0,0"
Background="LightPink" AutomationProperties.Name="{x:Static p:Resources.Lightest_color}"
Click="ColorVariationButton_Click" Background="LightPink"
AutomationProperties.Name="{x:Static p:Resources.Lightest_color}" Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}" Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" /> TabIndex="3"
<Button x:Name="colorVariation2Button" ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
Grid.Column="1" <Button
ui:ControlHelper.CornerRadius="0" x:Name="colorVariation2Button"
Background="LightPink" Grid.Row="1"
Click="ColorVariationButton_Click" AutomationProperties.Name="{x:Static p:Resources.Lighter_color}"
AutomationProperties.Name="{x:Static p:Resources.Lighter_color}" Background="LightPink"
Style="{DynamicResource ColorShadeButtonStyle}" Click="ColorVariationButton_Click"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" /> Style="{DynamicResource ColorShadeButtonStyle}"
<Button x:Name="colorVariation3Button" ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
Grid.Column="3" <Button
ui:ControlHelper.CornerRadius="0" x:Name="colorVariation3Button"
Background="LightPink" Grid.Row="3"
Click="ColorVariationButton_Click" AutomationProperties.Name="{x:Static p:Resources.Darker_color}"
AutomationProperties.Name="{x:Static p:Resources.Darker_color}" Background="LightPink"
Style="{DynamicResource ColorShadeButtonStyle}" Click="ColorVariationButton_Click"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" /> Style="{DynamicResource ColorShadeButtonStyle}"
<Button x:Name="colorVariation4Button" ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
Grid.Column="4" <Button
ui:ControlHelper.CornerRadius="0,2,2,0" x:Name="colorVariation4Button"
Background="LightPink" Grid.Row="4"
Click="ColorVariationButton_Click" helpers:ControlHelper.CornerRadius="0,0,4,4"
AutomationProperties.Name="{x:Static p:Resources.Darkest_color}" AutomationProperties.Name="{x:Static p:Resources.Darkest_color}"
Style="{DynamicResource ColorShadeButtonStyle}" Background="LightPink"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" /> Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button x:Name="CurrentColorButton" <Button
HorizontalAlignment="Left" x:Name="CurrentColorButton"
Grid.Column="0" Grid.RowSpan="5"
Grid.ColumnSpan="5" Height="104"
ui:ControlHelper.CornerRadius="0" Margin="0,72,0,72"
Background="Red" VerticalAlignment="Top"
Width="165" AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}"
Height="48" AutomationProperties.Name="{x:Static p:Resources.Selected_color}"
Margin="92,0,0,0" Click="CurrentColorButton_Click"
AutomationProperties.Name="{x:Static p:Resources.Selected_color}" Style="{DynamicResource ColorShadeButtonStyle}"
AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}" ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}">
ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}"
Click="CurrentColorButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}">
<ui:FlyoutService.Flyout>
<ui:Flyout x:Name="DetailsFlyout"
Placement="Bottom"
Opened="DetailsFlyout_Opened"
Closed="DetailsFlyout_Closed">
<Grid Margin="0,4,0,12"
KeyboardNavigation.TabNavigation="Contained"
x:Name="detailsGrid">
<StackPanel x:Name="detailsStackPanel">
<StackPanel Orientation="Horizontal"> <ui:Flyout
<TextBlock Text="H" x:Name="DetailsFlyout"
Width="38" Closed="DetailsFlyout_Closed"
FontWeight="SemiBold" Opened="DetailsFlyout_Opened"
TextAlignment="Center" Placement="Top">
VerticalAlignment="Center" /> <Grid x:Name="detailsGrid" KeyboardNavigation.TabNavigation="Contained">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44" />
<ColumnDefinition Width="86" />
<ColumnDefinition Width="86" />
<ColumnDefinition Width="86" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
<RowDefinition Height="Auto" />
<RowDefinition Height="12" />
<RowDefinition Height="Auto" />
<RowDefinition Height="12" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Slider x:Name="HueGradientSlider" <TextBlock
Width="214" VerticalAlignment="Center"
IsMoveToPointEnabled="True" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
AutomationProperties.Name="{x:Static p:Resources.Hue_slider}" Style="{StaticResource CaptionTextBlockStyle}"
Style="{StaticResource CustomSLiderStyle}" Text="H"
ValueChanged="HueGradientSlider_ValueChanged" TextAlignment="Center" />
VerticalAlignment="Center"
Grid.Column="1"
Minimum="0"
Maximum="289" />
</StackPanel>
<StackPanel Orientation="Horizontal"> <Slider
<TextBlock Text="S" x:Name="HueGradientSlider"
Grid.Row="1" Grid.Column="1"
Width="38" Grid.ColumnSpan="3"
TextAlignment="Center" VerticalAlignment="Center"
FontWeight="SemiBold" AutomationProperties.Name="{x:Static p:Resources.Hue_slider}"
VerticalAlignment="Center" /> IsMoveToPointEnabled="True"
Maximum="289"
Minimum="0"
ValueChanged="HueGradientSlider_ValueChanged" />
<Slider x:Name="SaturationGradientSlider" <TextBlock
AutomationProperties.Name="{x:Static p:Resources.Saturation_slider}" Grid.Row="2"
Style="{StaticResource CustomSLiderStyle}" VerticalAlignment="Center"
ValueChanged="SaturationGradientSlider_ValueChanged" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Grid.Column="1" Style="{StaticResource CaptionTextBlockStyle}"
Width="214" Text="S"
IsMoveToPointEnabled="True" TextAlignment="Center" />
Grid.Row="1"
Minimum="0"
Maximum="289">
<Slider.Background>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0, 0.5">
<GradientStop x:Name="SaturationStartColor"
Color="Black" />
<GradientStop x:Name="SaturationStopColor"
Color="Red"
Offset="1" />
</LinearGradientBrush>
</Slider.Background>
</Slider>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="V"
Grid.Row="2"
Width="38"
TextAlignment="Center"
FontWeight="SemiBold"
VerticalAlignment="Center" />
<Slider x:Name="ValueGradientSlider" <Slider
AutomationProperties.Name="{x:Static p:Resources.Value_slider}" x:Name="SaturationGradientSlider"
Style="{StaticResource CustomSLiderStyle}" Grid.Row="2"
ValueChanged="ValueGradientSlider_ValueChanged" Grid.Column="1"
Grid.Column="1" Grid.ColumnSpan="3"
IsMoveToPointEnabled="True" AutomationProperties.Name="{x:Static p:Resources.Saturation_slider}"
Grid.Row="2" IsMoveToPointEnabled="True"
Width="214" Maximum="289"
Minimum="0" Minimum="0"
Maximum="289"> ValueChanged="SaturationGradientSlider_ValueChanged">
<Slider.Background> <Slider.Background>
<LinearGradientBrush EndPoint="1,0.5" <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
StartPoint="0, 0.5"> <GradientStop x:Name="SaturationStartColor" Color="Black" />
<GradientStop x:Name="ValueStartColor" <GradientStop x:Name="SaturationStopColor" Offset="1" Color="Red" />
Color="Black" /> </LinearGradientBrush>
<GradientStop x:Name="ValueStopColor" </Slider.Background>
Color="Red" </Slider>
Offset="1" />
</LinearGradientBrush>
</Slider.Background>
</Slider>
</StackPanel>
<TextBlock
Grid.Row="4"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="V"
TextAlignment="Center" />
<StackPanel Orientation="Horizontal" <Slider
Margin="0,16,0,0"> x:Name="ValueGradientSlider"
<TextBlock Text="RGB" Grid.Row="4"
Width="38" Grid.Column="1"
FontWeight="SemiBold" Grid.ColumnSpan="3"
TextAlignment="Center" AutomationProperties.Name="{x:Static p:Resources.Value_slider}"
VerticalAlignment="Center" /> IsMoveToPointEnabled="True"
Maximum="289"
Minimum="0"
ValueChanged="ValueGradientSlider_ValueChanged">
<Slider.Background>
<LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
<GradientStop x:Name="ValueStartColor" Color="Black" />
<GradientStop x:Name="ValueStopColor" Offset="1" Color="Red" />
</LinearGradientBrush>
</Slider.Background>
</Slider>
<ui:NumberBox x:Name="RNumberBox" <TextBlock
Height="32" Grid.Row="6"
Width="72" VerticalAlignment="Center"
ui:ControlHelper.CornerRadius="2,0,0,2" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
AutomationProperties.Name="{x:Static p:Resources.Red_value}" Style="{StaticResource CaptionTextBlockStyle}"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" Text="RGB"
Minimum="0" TextAlignment="Center" />
Maximum="255" />
<ui:NumberBox x:Name="GNumberBox" <ui:NumberBox
Height="32" x:Name="RNumberBox"
Margin="-1,0,0,0" Grid.Row="6"
Width="72" Grid.Column="1"
ui:ControlHelper.CornerRadius="0" AutomationProperties.Name="{x:Static p:Resources.Red_value}"
AutomationProperties.Name="{x:Static p:Resources.Green_value}" Maximum="255"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" Minimum="0"
Minimum="0" SpinButtonPlacementMode="Compact"
Maximum="255" /> TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
<ui:NumberBox x:Name="BNumberBox" <ui:NumberBox
Height="32" x:Name="GNumberBox"
Width="72" Grid.Row="6"
Margin="-1,0,0,0" Grid.Column="2"
ui:ControlHelper.CornerRadius="0,2,2,0" Margin="4,0,0,0"
AutomationProperties.Name="{x:Static p:Resources.Blue_value}" AutomationProperties.Name="{x:Static p:Resources.Green_value}"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" Maximum="255"
Minimum="0" Minimum="0"
Maximum="255" /> SpinButtonPlacementMode="Compact"
</StackPanel> TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
<StackPanel Orientation="Horizontal" <ui:NumberBox
Margin="0,16,0,0"> x:Name="BNumberBox"
<TextBlock Text="HEX" Grid.Row="6"
Width="38" Grid.Column="3"
TextAlignment="Center" Margin="4,0,0,0"
FontWeight="SemiBold" AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
VerticalAlignment="Center" /> Maximum="255"
<TextBox x:Name="HexCode" Minimum="0"
Height="32" SpinButtonPlacementMode="Compact"
Width="214" TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
GotKeyboardFocus="HexCode_GotKeyboardFocus"
TextChanged="HexCode_TextChanged"
TextWrapping="Wrap"
MaxLength="7"
CharacterCasing="Lower" />
</StackPanel>
<Button Margin="0,32,0,0" <TextBlock
x:Name="OKButton" Grid.Row="8"
Click="OKButton_Click" Width="38"
Style="{StaticResource AccentButtonStyle}" VerticalAlignment="Center"
AutomationProperties.Name="{x:Static p:Resources.Select}" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Content="{x:Static p:Resources.Select}" Style="{StaticResource CaptionTextBlockStyle}"
HorizontalAlignment="Stretch" /> Text="HEX"
</StackPanel> TextAlignment="Center" />
</Grid> <TextBox
</ui:Flyout> x:Name="HexCode"
</ui:FlyoutService.Flyout> Grid.Row="8"
Grid.Column="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
CharacterCasing="Lower"
GotKeyboardFocus="HexCode_GotKeyboardFocus"
MaxLength="7"
TextChanged="HexCode_TextChanged"
TextWrapping="Wrap" />
<ui:Button
x:Name="OKButton"
Grid.Row="9"
Grid.ColumnSpan="4"
Margin="0,32,0,0"
HorizontalAlignment="Stretch"
Appearance="Primary"
AutomationProperties.Name="{x:Static p:Resources.Select}"
Click="OKButton_Click"
Content="{x:Static p:Resources.Select}" />
</Grid>
</ui:Flyout>
</Button> </Button>
</Grid> </Grid>
</Border>
</UserControl> </UserControl>

59
src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs
View File

@@ -13,8 +13,8 @@ using System.Windows.Media;
using System.Windows.Media.Animation; using System.Windows.Media.Animation;
using ColorPicker.Helpers; using ColorPicker.Helpers;
using ManagedCommon; using ManagedCommon;
using ModernWpf.Controls; using Wpf.Ui.Controls;
using ModernWpf.Controls.Primitives; using static System.Net.Mime.MediaTypeNames;
namespace ColorPicker.Controls namespace ColorPicker.Controls
{ {
@@ -74,9 +74,9 @@ namespace ColorPicker.Controls
control._ignoreRGBChanges = true; control._ignoreRGBChanges = true;
control.HexCode.Text = ColorToHex(newColor); control.HexCode.Text = ColorToHex(newColor);
control.RNumberBox.Text = newColor.R.ToString(CultureInfo.InvariantCulture); control.RNumberBox.Value = newColor.R;
control.GNumberBox.Text = newColor.G.ToString(CultureInfo.InvariantCulture); control.GNumberBox.Value = newColor.G;
control.BNumberBox.Text = newColor.B.ToString(CultureInfo.InvariantCulture); control.BNumberBox.Value = newColor.B;
control.SetColorFromTextBoxes(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B)); control.SetColorFromTextBoxes(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
control._ignoreRGBChanges = false; control._ignoreRGBChanges = false;
@@ -173,9 +173,9 @@ namespace ColorPicker.Controls
if (!_ignoreRGBChanges) if (!_ignoreRGBChanges)
{ {
RNumberBox.Text = currentColor.R.ToString(CultureInfo.InvariantCulture); RNumberBox.Value = currentColor.R;
GNumberBox.Text = currentColor.G.ToString(CultureInfo.InvariantCulture); GNumberBox.Value = currentColor.G;
BNumberBox.Text = currentColor.B.ToString(CultureInfo.InvariantCulture); BNumberBox.Value = currentColor.B;
} }
_currentColor = currentColor; _currentColor = currentColor;
@@ -193,17 +193,17 @@ namespace ColorPicker.Controls
{ {
_isCollapsed = false; _isCollapsed = false;
var resizeColor = new DoubleAnimation(349, new Duration(TimeSpan.FromMilliseconds(250))); var resizeColor = new DoubleAnimation(256, new Duration(TimeSpan.FromMilliseconds(250)));
resizeColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut }; resizeColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
var moveColor = new ThicknessAnimation(new Thickness(0), new Duration(TimeSpan.FromMilliseconds(250))); var moveColor = new ThicknessAnimation(new Thickness(0), new Duration(TimeSpan.FromMilliseconds(250)));
moveColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut }; moveColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
ControlHelper.SetCornerRadius(CurrentColorButton, new CornerRadius(2)); CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.HeightProperty, resizeColor);
CurrentColorButton.BeginAnimation(Button.WidthProperty, resizeColor); CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.MarginProperty, moveColor);
CurrentColorButton.BeginAnimation(Button.MarginProperty, moveColor);
CurrentColorButton.IsEnabled = false; CurrentColorButton.IsEnabled = false;
SessionEventHelper.Event.EditorAdjustColorOpened = true; SessionEventHelper.Event.EditorAdjustColorOpened = true;
DetailsFlyout.IsOpen = true;
} }
} }
@@ -216,19 +216,17 @@ namespace ColorPicker.Controls
var resizeColor = new DoubleAnimation(165, new Duration(TimeSpan.FromMilliseconds(150))); var resizeColor = new DoubleAnimation(165, new Duration(TimeSpan.FromMilliseconds(150)));
resizeColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut }; resizeColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
var moveColor = new ThicknessAnimation(new Thickness(92, 0, 0, 0), new Duration(TimeSpan.FromMilliseconds(150))); var moveColor = new ThicknessAnimation(new Thickness(0, 72, 0, 72), new Duration(TimeSpan.FromMilliseconds(150)));
moveColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut }; moveColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
ControlHelper.SetCornerRadius(CurrentColorButton, new CornerRadius(0)); CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.HeightProperty, resizeColor);
CurrentColorButton.BeginAnimation(Button.WidthProperty, resizeColor); CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.MarginProperty, moveColor);
CurrentColorButton.BeginAnimation(Button.MarginProperty, moveColor);
CurrentColorButton.IsEnabled = true; CurrentColorButton.IsEnabled = true;
} }
} }
private void OKButton_Click(object sender, RoutedEventArgs e) private void OKButton_Click(object sender, RoutedEventArgs e)
{ {
HideDetails();
SelectedColorChangedCommand.Execute(_currentColor); SelectedColorChangedCommand.Execute(_currentColor);
SessionEventHelper.Event.EditorColorAdjusted = true; SessionEventHelper.Event.EditorColorAdjusted = true;
DetailsFlyout.Hide(); DetailsFlyout.Hide();
@@ -253,7 +251,7 @@ namespace ColorPicker.Controls
private void ColorVariationButton_Click(object sender, RoutedEventArgs e) private void ColorVariationButton_Click(object sender, RoutedEventArgs e)
{ {
var selectedColor = ((SolidColorBrush)((Button)sender).Background).Color; var selectedColor = ((SolidColorBrush)((System.Windows.Controls.Button)sender).Background).Color;
SelectedColorChangedCommand.Execute(selectedColor); SelectedColorChangedCommand.Execute(selectedColor);
SessionEventHelper.Event.EditorSimilarColorPicked = true; SessionEventHelper.Event.EditorSimilarColorPicked = true;
} }
@@ -284,7 +282,7 @@ namespace ColorPicker.Controls
private void HexCode_TextChanged(object sender, TextChangedEventArgs e) private void HexCode_TextChanged(object sender, TextChangedEventArgs e)
{ {
var newValue = (sender as TextBox).Text; var newValue = (sender as System.Windows.Controls.TextBox).Text;
// support hex with 3 and 6 characters and optional with hashtag // support hex with 3 and 6 characters and optional with hashtag
var reg = new Regex("^#?([0-9A-Fa-f]{3}){1,2}$"); var reg = new Regex("^#?([0-9A-Fa-f]{3}){1,2}$");
@@ -362,9 +360,11 @@ namespace ColorPicker.Controls
if (!_ignoreRGBChanges) if (!_ignoreRGBChanges)
{ {
var numberBox = sender as NumberBox; var numberBox = sender as NumberBox;
var r = numberBox.Name == "RNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)RNumberBox.Value;
var g = numberBox.Name == "GNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)GNumberBox.Value; byte r = numberBox.Name == "RNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)RNumberBox.Value;
var b = numberBox.Name == "BNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)BNumberBox.Value; byte g = numberBox.Name == "GNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)GNumberBox.Value;
byte b = numberBox.Name == "BNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)BNumberBox.Value;
_ignoreRGBChanges = true; _ignoreRGBChanges = true;
SetColorFromTextBoxes(System.Drawing.Color.FromArgb(r, g, b)); SetColorFromTextBoxes(System.Drawing.Color.FromArgb(r, g, b));
_ignoreRGBChanges = false; _ignoreRGBChanges = false;
@@ -379,11 +379,12 @@ namespace ColorPicker.Controls
/// <returns>Validated value as per numberbox conditions, if content is invalid it returns previous value</returns> /// <returns>Validated value as per numberbox conditions, if content is invalid it returns previous value</returns>
private static byte GetValueFromNumberBox(NumberBox numberBox) private static byte GetValueFromNumberBox(NumberBox numberBox)
{ {
var internalTextBox = GetChildOfType<TextBox>(numberBox); double? parsedValue = ParseDouble(numberBox.Text);
var parsedValue = numberBox.NumberFormatter.ParseDouble(internalTextBox.Text);
if (parsedValue != null) if (parsedValue != null)
{ {
var parsedValueByte = (byte)parsedValue; var parsedValueByte = (byte)parsedValue;
if (parsedValueByte >= numberBox.Minimum && parsedValueByte <= numberBox.Maximum) if (parsedValueByte >= numberBox.Minimum && parsedValueByte <= numberBox.Maximum)
{ {
return parsedValueByte; return parsedValueByte;
@@ -394,6 +395,16 @@ namespace ColorPicker.Controls
return (byte)numberBox.Value; return (byte)numberBox.Value;
} }
public static double? ParseDouble(string text)
{
if (double.TryParse(text, out double result))
{
return result;
}
return null;
}
public static T GetChildOfType<T>(DependencyObject depObj) public static T GetChildOfType<T>(DependencyObject depObj)
where T : DependencyObject where T : DependencyObject
{ {

2
src/modules/colorPicker/ColorPickerUI/Helpers/AppStateHandler.cs
View File

@@ -150,7 +150,7 @@ namespace ColorPicker.Helpers
if (_colorEditorWindow == null) if (_colorEditorWindow == null)
{ {
_colorEditorWindow = new ColorEditorWindow(this); _colorEditorWindow = new ColorEditorWindow(this);
_colorEditorWindow.Content = _colorEditorViewModel; _colorEditorWindow.contentPresenter.Content = _colorEditorViewModel;
_colorEditorViewModel.OpenColorPickerRequested += ColorEditorViewModel_OpenColorPickerRequested; _colorEditorViewModel.OpenColorPickerRequested += ColorEditorViewModel_OpenColorPickerRequested;
_colorEditorViewModel.OpenSettingsRequested += ColorEditorViewModel_OpenSettingsRequested; _colorEditorViewModel.OpenSettingsRequested += ColorEditorViewModel_OpenSettingsRequested;
_colorEditorViewModel.OpenColorPickerRequested += (object sender, EventArgs e) => _colorEditorViewModel.OpenColorPickerRequested += (object sender, EventArgs e) =>

317
src/modules/colorPicker/ColorPickerUI/Helpers/ControlHelper.cs Normal file
View File

@@ -0,0 +1,317 @@
// 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.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace ColorPicker.Helpers
{
public static class ControlHelper
{
/// <summary>
/// Gets the radius for the corners of the control's border.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>
/// The degree to which the corners are rounded, expressed as values of the CornerRadius
/// structure.
/// </returns>
public static CornerRadius GetCornerRadius(Control control)
{
return (CornerRadius)control.GetValue(CornerRadiusProperty);
}
/// <summary>
/// Sets the radius for the corners of the control's border.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetCornerRadius(Control control, CornerRadius value)
{
control.SetValue(CornerRadiusProperty, value);
}
/// <summary>
/// Identifies the CornerRadius dependency property.
/// </summary>
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.RegisterAttached(
"CornerRadius",
typeof(CornerRadius),
typeof(ControlHelper),
null);
/// <summary>
/// Identifies the Header dependency property.
/// </summary>
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.RegisterAttached(
"Header",
typeof(object),
typeof(ControlHelper),
new FrameworkPropertyMetadata(OnHeaderChanged));
/// <summary>
/// Gets the content for the control's header.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>The content of the control's header. The default is **null**.</returns>
public static object GetHeader(Control control)
{
return control.GetValue(HeaderProperty);
}
/// <summary>
/// Sets the content for the control's header.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetHeader(Control control, object value)
{
control.SetValue(HeaderProperty, value);
}
private static void OnHeaderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UpdateHeaderVisibility((Control)d);
}
/// <summary>
/// Identifies the HeaderTemplate dependency property.
/// </summary>
public static readonly DependencyProperty HeaderTemplateProperty =
DependencyProperty.RegisterAttached(
"HeaderTemplate",
typeof(DataTemplate),
typeof(ControlHelper),
new FrameworkPropertyMetadata(OnHeaderTemplateChanged));
/// <summary>
/// Gets the DataTemplate used to display the content of the control's header.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>
/// The template that specifies the visualization of the header object. The default
/// is **null**.
/// </returns>
public static DataTemplate GetHeaderTemplate(Control control)
{
return (DataTemplate)control.GetValue(HeaderTemplateProperty);
}
/// <summary>
/// Sets the DataTemplate used to display the content of the control's header.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetHeaderTemplate(Control control, DataTemplate value)
{
control.SetValue(HeaderTemplateProperty, value);
}
private static void OnHeaderTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UpdateHeaderVisibility((Control)d);
}
private static readonly DependencyPropertyKey HeaderVisibilityPropertyKey =
DependencyProperty.RegisterAttachedReadOnly(
"HeaderVisibility",
typeof(Visibility),
typeof(ControlHelper),
new FrameworkPropertyMetadata(Visibility.Collapsed));
public static readonly DependencyProperty HeaderVisibilityProperty =
HeaderVisibilityPropertyKey.DependencyProperty;
public static Visibility GetHeaderVisibility(Control control)
{
return (Visibility)control.GetValue(HeaderVisibilityProperty);
}
private static void SetHeaderVisibility(Control control, Visibility value)
{
control.SetValue(HeaderVisibilityPropertyKey, value);
}
private static void UpdateHeaderVisibility(Control control)
{
Visibility visibility;
if (GetHeaderTemplate(control) != null)
{
visibility = Visibility.Visible;
}
else
{
visibility = IsNullOrEmptyString(GetHeader(control)) ? Visibility.Collapsed : Visibility.Visible;
}
SetHeaderVisibility(control, visibility);
}
/// <summary>
/// Gets the text that is displayed in the control until the value is changed
/// by a user action or some other operation.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>
/// The text that is displayed in the control when no value is entered. The default
/// is an empty string ("").
/// </returns>
public static string GetPlaceholderText(Control control)
{
return (string)control.GetValue(PlaceholderTextProperty);
}
/// <summary>
/// Sets the text that is displayed in the control until the value is changed
/// by a user action or some other operation.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetPlaceholderText(Control control, string value)
{
control.SetValue(PlaceholderTextProperty, value);
}
/// <summary>
/// Identifies the PlaceholderText dependency property.
/// </summary>
public static readonly DependencyProperty PlaceholderTextProperty =
DependencyProperty.RegisterAttached(
"PlaceholderText",
typeof(string),
typeof(ControlHelper),
new FrameworkPropertyMetadata(string.Empty, OnPlaceholderTextChanged));
private static void OnPlaceholderTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UpdatePlaceholderTextVisibility((Control)d);
}
public static Visibility GetPlaceholderTextVisibility(Control control)
{
return (Visibility)control.GetValue(PlaceholderTextVisibilityProperty);
}
private static void SetPlaceholderTextVisibility(Control control, Visibility value)
{
control.SetValue(PlaceholderTextVisibilityPropertyKey, value);
}
private static readonly DependencyPropertyKey PlaceholderTextVisibilityPropertyKey =
DependencyProperty.RegisterAttachedReadOnly(
"PlaceholderTextVisibility",
typeof(Visibility),
typeof(ControlHelper),
new FrameworkPropertyMetadata(Visibility.Collapsed));
public static readonly DependencyProperty PlaceholderTextVisibilityProperty =
PlaceholderTextVisibilityPropertyKey.DependencyProperty;
private static void UpdatePlaceholderTextVisibility(Control control)
{
SetPlaceholderTextVisibility(control, string.IsNullOrEmpty(GetPlaceholderText(control)) ? Visibility.Collapsed : Visibility.Visible);
}
/// <summary>
/// Gets a brush that describes the color of placeholder text.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>The brush that describes the color of placeholder text.</returns>
public static Brush GetPlaceholderForeground(Control control)
{
return (Brush)control.GetValue(PlaceholderForegroundProperty);
}
/// <summary>
/// Sets a brush that describes the color of placeholder text.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetPlaceholderForeground(Control control, Brush value)
{
control.SetValue(PlaceholderForegroundProperty, value);
}
/// <summary>
/// Identifies the PlaceholderForeground dependency property.
/// </summary>
public static readonly DependencyProperty PlaceholderForegroundProperty =
DependencyProperty.RegisterAttached(
"PlaceholderForeground",
typeof(Brush),
typeof(ControlHelper),
null);
/// <summary>
/// Gets content that is shown below the control. The content should provide
/// guidance about the input expected by the control.
/// </summary>
/// <param name="control">The element from which to read the property value.</param>
/// <returns>The content to be displayed below the control. The default is **null**.</returns>
public static object GetDescription(Control control)
{
return control.GetValue(DescriptionProperty);
}
/// <summary>
/// Sets content that is shown below the control. The content should provide
/// guidance about the input expected by the control.
/// </summary>
/// <param name="control">The element on which to set the attached property.</param>
/// <param name="value">The property value to set.</param>
public static void SetDescription(Control control, object value)
{
control.SetValue(DescriptionProperty, value);
}
/// <summary>
/// Identifies the Description dependency property.
/// </summary>
public static readonly DependencyProperty DescriptionProperty =
DependencyProperty.RegisterAttached(
"Description",
typeof(object),
typeof(ControlHelper),
new FrameworkPropertyMetadata(OnDescriptionChanged));
private static void OnDescriptionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UpdateDescriptionVisibility((Control)d);
}
private static readonly DependencyPropertyKey DescriptionVisibilityPropertyKey =
DependencyProperty.RegisterAttachedReadOnly(
"DescriptionVisibility",
typeof(Visibility),
typeof(ControlHelper),
new FrameworkPropertyMetadata(Visibility.Collapsed));
public static readonly DependencyProperty DescriptionVisibilityProperty =
DescriptionVisibilityPropertyKey.DependencyProperty;
public static Visibility GetDescriptionVisibility(Control control)
{
return (Visibility)control.GetValue(DescriptionVisibilityProperty);
}
private static void SetDescriptionVisibility(Control control, Visibility value)
{
control.SetValue(DescriptionVisibilityPropertyKey, value);
}
private static void UpdateDescriptionVisibility(Control control)
{
SetDescriptionVisibility(control, IsNullOrEmptyString(GetDescription(control)) ? Visibility.Collapsed : Visibility.Visible);
}
internal static bool IsNullOrEmptyString(object obj)
{
return obj == null || (obj is string s && string.IsNullOrEmpty(s));
}
}
}

47
src/modules/colorPicker/ColorPickerUI/MainWindow.xaml
View File

@@ -1,24 +1,29 @@
<Window x:Class="ColorPicker.MainWindow" <Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.MainWindow"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors" xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
WindowStyle="None" Width="120"
Opacity="0.01" Height="64"
ShowInTaskbar="False" MinWidth="0"
ResizeMode="NoResize" MinHeight="0"
Topmost="True" AllowsTransparency="True"
Background="Transparent" AutomationProperties.Name="Color Picker"
SizeToContent="WidthAndHeight" Background="Transparent"
AllowsTransparency="True" Opacity="0.1"
SourceInitialized="MainWindowSourceInitialized" ResizeMode="NoResize"
AutomationProperties.Name="Color Picker"> ShowInTaskbar="False"
SizeToContent="WidthAndHeight"
SourceInitialized="MainWindowSourceInitialized"
Topmost="True"
WindowStyle="None"
mc:Ignorable="d">
<e:Interaction.Behaviors> <e:Interaction.Behaviors>
<behaviors:ChangeWindowPositionBehavior/> <behaviors:ChangeWindowPositionBehavior />
<behaviors:AppearAnimationBehavior/> <behaviors:AppearAnimationBehavior />
</e:Interaction.Behaviors> </e:Interaction.Behaviors>
<ContentControl x:Name="MainView" Content="{Binding MainViewModel}"/> <ContentControl x:Name="MainView" Content="{Binding MainViewModel}" />
</Window> </Window>

2
src/modules/colorPicker/ColorPickerUI/MainWindow.xaml.cs
View File

@@ -6,6 +6,7 @@ using System.ComponentModel.Composition;
using System.Windows; using System.Windows;
using System.Windows.Interop; using System.Windows.Interop;
using ColorPicker.ViewModelContracts; using ColorPicker.ViewModelContracts;
using Wpf.Ui.Controls;
namespace ColorPicker namespace ColorPicker
{ {
@@ -18,6 +19,7 @@ namespace ColorPicker
{ {
Closing += MainWindow_Closing; Closing += MainWindow_Closing;
Bootstrapper.InitializeContainer(this); Bootstrapper.InitializeContainer(this);
Wpf.Ui.Appearance.SystemThemeWatcher.Watch(this, WindowBackdropType.None);
InitializeComponent(); InitializeComponent();
DataContext = this; DataContext = this;
Show(); // Call show just to make sure source is initialized at startup. Show(); // Call show just to make sure source is initialized at startup.

18
src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs generated
View File

@@ -141,6 +141,15 @@ namespace ColorPicker.Properties {
} }
} }
/// <summary>
/// Looks up a localized string similar to Color Picker.
/// </summary>
public static string CP_Title {
get {
return ResourceManager.GetString("CP_Title", resourceCulture);
}
}
/// <summary> /// <summary>
/// Looks up a localized string similar to Color dark 1. /// Looks up a localized string similar to Color dark 1.
/// </summary> /// </summary>
@@ -231,6 +240,15 @@ namespace ColorPicker.Properties {
} }
} }
/// <summary>
/// Looks up a localized string similar to Pick.
/// </summary>
public static string New_Label {
get {
return ResourceManager.GetString("New_Label", resourceCulture);
}
}
/// <summary> /// <summary>
/// Looks up a localized string similar to Press the Color Picker icon to capture a color from your screen.. /// Looks up a localized string similar to Press the Color Picker icon to capture a color from your screen..
/// </summary> /// </summary>

8
src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx
View File

@@ -400,4 +400,12 @@
<value>Plum</value> <value>Plum</value>
<comment>Plum color</comment> <comment>Plum color</comment>
</data> </data>
<data name="New_Label" xml:space="preserve">
<value>Pick</value>
<comment>Button label to pick a new color</comment>
</data>
<data name="CP_Title" xml:space="preserve">
<value>Color Picker</value>
<comment>Do not translate product name</comment>
</data>
</root> </root>

120
src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml
View File

@@ -1,55 +1,59 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <ResourceDictionary
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:ColorPicker.Converters"> xmlns:converters="clr-namespace:ColorPicker.Converters"
<!--CONVERTERS--> xmlns:helpers="clr-namespace:ColorPicker.Helpers">
<!-- CONVERTERS -->
<BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" /> <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />
<converters:BoolToInvertedVisibilityConverter x:Key="bool2InvertedVisibilityConverter"/> <converters:BoolToInvertedVisibilityConverter x:Key="bool2InvertedVisibilityConverter" />
<converters:ColorToBrushConverter x:Key="colorToBrushConverter"/> <converters:ColorToBrushConverter x:Key="colorToBrushConverter" />
<converters:ColorToStringConverter x:Key="colorToStringConverter"/> <converters:ColorToStringConverter x:Key="colorToStringConverter" />
<converters:NumberToVisibilityConverter x:Key="numberToVisibilityConverter"/> <converters:NumberToVisibilityConverter x:Key="numberToVisibilityConverter" />
<converters:NumberToInvertedVisibilityConverter x:Key="numberToInvertedVisibilityConverter" /> <converters:NumberToInvertedVisibilityConverter x:Key="numberToInvertedVisibilityConverter" />
<Style x:Key="ColorHistoryListViewStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/> <Style x:Key="SubtleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="0" /> <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/> <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
<Setter Property="MinWidth" <Setter Property="Focusable" Value="False" />
Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" <Setter Property="VerticalContentAlignment" Value="Center" />
Value="0" /> <Setter Property="Padding" Value="1" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}"> <ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" Width="64" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="True"> <Border
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> x:Name="border"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4"
SnapsToDevicePixels="true">
<ContentPresenter
x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.Foreground="{TemplateBinding Foreground}" />
</Border> </Border>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<MultiTrigger> <Trigger Property="IsDefaulted" Value="true">
<MultiTrigger.Conditions> <Setter TargetName="border" Property="Background" Value="Transparent" />
<Condition Property="IsMouseOver" Value="True"/> </Trigger>
</MultiTrigger.Conditions> <Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource ListViewPointerOverBrush}"/> <Setter TargetName="border" Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
</MultiTrigger> <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
<MultiTrigger> </Trigger>
<MultiTrigger.Conditions> <Trigger Property="IsPressed" Value="true">
<Condition Property="Selector.IsSelectionActive" Value="False"/> <Setter TargetName="border" Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
<Condition Property="IsSelected" Value="True"/> <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
</MultiTrigger.Conditions> </Trigger>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource ListViewPressedBrush}"/> <Trigger Property="IsEnabled" Value="false">
</MultiTrigger> <!-- <Setter TargetName="border" Property="Background" Value="{DynamicResource ControlFillColorDisabledBrush}" />
<MultiTrigger> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource TextFillColorDisabledBrush}"/>-->
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource ListViewPressedBrush}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>
@@ -63,18 +67,19 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,5,8,6" /> <Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" /> <Setter Property="FontWeight" Value="Normal" />
<Setter Property="Width" Value="12" />
<Setter Property="MinWidth" Value="20" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" /> <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" /> <!--<Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="-2" /> <Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="-2" />-->
<Setter Property="ui:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" /> <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
@@ -82,35 +87,30 @@
<Border <Border
x:Name="Background" x:Name="Background"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}" CornerRadius="{TemplateBinding helpers:ControlHelper.CornerRadius}"
SnapsToDevicePixels="True"> SnapsToDevicePixels="True">
<Border <Border
x:Name="Border" x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}"> BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter <ContentPresenter
x:Name="ContentPresenter" x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False" Focusable="False"
Visibility="Collapsed"
RecognizesAccessKey="True" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="Collapsed" />
</Border> </Border>
</Border> </Border>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Background" Property="Opacity" Value="0.8" /> <Setter TargetName="Background" Property="Opacity" Value="0.8" />
<Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" /> <Setter TargetName="ContentPresenter" Property="Visibility" Value="Visible" />
<Setter TargetName="ContentPresenter"
Property="Visibility" Value="Visible" />
</Trigger> </Trigger>
<Trigger Property="IsPressed" Value="True"> <Trigger Property="IsPressed" Value="True">
<Setter TargetName="Background" Property="Opacity" Value="0.9" /> <Setter TargetName="Background" Property="Opacity" Value="0.9" />
<Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>

15
src/modules/colorPicker/ColorPickerUI/Resources/ViewModelViewMappings.xaml
View File

@@ -1,16 +1,17 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <ResourceDictionary
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:viewModels="clr-namespace:ColorPicker.ViewModels" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:ColorPicker.Views"> xmlns:viewModels="clr-namespace:ColorPicker.ViewModels"
xmlns:views="clr-namespace:ColorPicker.Views">
<DataTemplate DataType="{x:Type viewModels:MainViewModel}"> <DataTemplate DataType="{x:Type viewModels:MainViewModel}">
<views:MainView/> <views:MainView />
</DataTemplate> </DataTemplate>
<DataTemplate DataType="{x:Type viewModels:ZoomViewModel}"> <DataTemplate DataType="{x:Type viewModels:ZoomViewModel}">
<views:ZoomView/> <views:ZoomView />
</DataTemplate> </DataTemplate>
<DataTemplate DataType="{x:Type viewModels:ColorEditorViewModel}"> <DataTemplate DataType="{x:Type viewModels:ColorEditorViewModel}">
<views:ColorEditorView/> <views:ColorEditorView />
</DataTemplate> </DataTemplate>
</ResourceDictionary> </ResourceDictionary>

24
src/modules/colorPicker/ColorPickerUI/Themes/Dark.xaml
View File

@@ -1,24 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">Dark.Accent1</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent1 (Dark)</system:String>
<system:String x:Key="Theme.BaseColorScheme">Dark</system:String>
<system:String x:Key="Theme.ColorScheme">Accent1</system:String>
<Color x:Key="Theme.PrimaryAccentColor">Black</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FF535353"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#FF242424"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FF454545"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF6b6b6b" />
</ResourceDictionary>

24
src/modules/colorPicker/ColorPickerUI/Themes/HighContrast1.xaml
View File

@@ -1,24 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">HighContrast.Accent2</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent2 (HighContrast)</system:String>
<system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
<system:String x:Key="Theme.ColorScheme">Accent2</system:String>
<Color x:Key="Theme.PrimaryAccentColor">White</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FFffff00"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#FF242424"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FF454545"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffff00" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF00ff00" />
</ResourceDictionary>

25
src/modules/colorPicker/ColorPickerUI/Themes/HighContrast2.xaml
View File

@@ -1,25 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">HighContrast.Accent3</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent3 (HighContrast)</system:String>
<system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
<system:String x:Key="Theme.ColorScheme">Accent3</system:String>
<Color x:Key="Theme.PrimaryAccentColor">White</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FF00ff00"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#FF242424"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FF454545"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF00ff00" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FFc0c0c0" />
</ResourceDictionary>

25
src/modules/colorPicker/ColorPickerUI/Themes/HighContrastBlack.xaml
View File

@@ -1,25 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">HighContrast.Accent4</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent4 (HighContrast)</system:String>
<system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
<system:String x:Key="Theme.ColorScheme">Accent4</system:String>
<Color x:Key="Theme.PrimaryAccentColor">White</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FFffffff"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#FF242424"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FF454545"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffffff" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF1aebff" />
</ResourceDictionary>

25
src/modules/colorPicker/ColorPickerUI/Themes/HighContrastWhite.xaml
View File

@@ -1,25 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">HighContrast.Accent5</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent5 (HighContrast)</system:String>
<system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
<system:String x:Key="Theme.ColorScheme">Accent5</system:String>
<Color x:Key="Theme.PrimaryAccentColor">White</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFededed" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFe5e5e5" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="Black"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF949494"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#e9e9e9"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FFe5e5e5"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FFf9f9f9"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF37006e" />
</ResourceDictionary>

25
src/modules/colorPicker/ColorPickerUI/Themes/Light.xaml
View File

@@ -1,25 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<!-- Metadata -->
<system:String x:Key="Theme.Name">Light.Accent1</system:String>
<system:String x:Key="Theme.Origin">PowerToysRun</system:String>
<system:String x:Key="Theme.DisplayName">Accent1 (Light)</system:String>
<system:String x:Key="Theme.BaseColorScheme">Light</system:String>
<system:String x:Key="Theme.ColorScheme">Accent1</system:String>
<Color x:Key="Theme.PrimaryAccentColor">White</Color>
<SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFededed" />
<SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFe5e5e5" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FFf7f7f7"/>
<SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF949494"/>
<SolidColorBrush x:Key="ListViewPointerOverBrush" Color="#e9e9e9"/>
<SolidColorBrush x:Key="ListViewPressedBrush" Color="#FFe5e5e5"/>
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FFf9f9f9"/>
<SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
<SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF949494" />
</ResourceDictionary>

427
src/modules/colorPicker/ColorPickerUI/Views/ColorEditorView.xaml
View File

@@ -1,213 +1,306 @@
<UserControl x:Class="ColorPicker.Views.ColorEditorView" <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.Views.ColorEditorView"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:controls="clr-namespace:ColorPicker.Controls"
xmlns:p="clr-namespace:ColorPicker.Properties" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="http://schemas.modernwpf.com/2019" xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
xmlns:controls="clr-namespace:ColorPicker.Controls" x:Name="colorEditorControl"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors" mc:Ignorable="d">
WindowChrome.IsHitTestVisibleInChrome="True"
x:Name="colorEditorControl">
<Grid> <Grid>
<Grid.ColumnDefinitions> <Grid.RowDefinitions>
<ColumnDefinition Width="64"/> <RowDefinition Height="64" />
<ColumnDefinition Width="*"/> <RowDefinition Height="*" />
</Grid.ColumnDefinitions> </Grid.RowDefinitions>
<!-- Side bar --> <!-- Side bar -->
<Grid Background="{DynamicResource SecondaryBackgroundBrush}"> <Grid Margin="16,16,16,0">
<ui:ListView x:Name="HistoryColors" <Grid.ColumnDefinitions>
Margin="0,48,0,0" <ColumnDefinition Width="Auto" />
Grid.Row="1" <ColumnDefinition Width="*" />
Padding="0" <ColumnDefinition Width="Auto" />
TabIndex="2" </Grid.ColumnDefinitions>
KeyboardNavigation.DirectionalNavigation="Contained" <ui:Button
Width="64" Height="36"
AutomationProperties.Name="{x:Static p:Resources.Color_History}" VerticalAlignment="Top"
HorizontalAlignment="Center" AutomationProperties.Name="{x:Static p:Resources.Pick_color}"
ui:FocusVisualHelper.UseSystemFocusVisuals="True" Command="{Binding OpenColorPickerCommand}"
ItemsSource="{Binding ColorsHistory}" TabIndex="0"
SelectedIndex="{Binding SelectedColorIndex}" ToolTipService.ToolTip="{x:Static p:Resources.Pick_color}">
ItemContainerStyle="{DynamicResource ColorHistoryListViewStyle}" <Button.Content>
IsItemClickEnabled="True" <StackPanel Orientation="Horizontal">
SelectionMode="Extended" <ui:SymbolIcon FontSize="18" Symbol="Eyedropper20" />
ItemClick="HistoryColors_ItemClick"> <TextBlock Margin="8,0,0,0" Text="{x:Static p:Resources.New_Label}" />
<ui:ListView.ContextMenu> </StackPanel>
</Button.Content>
</ui:Button>
<ListView
x:Name="HistoryColors"
Grid.Column="1"
Height="48"
Margin="12,4,12,0"
VerticalAlignment="Top"
VerticalContentAlignment="Top"
AutomationProperties.Name="{x:Static p:Resources.Color_History}"
ItemsSource="{Binding ColorsHistory}"
KeyboardNavigation.DirectionalNavigation="Contained"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
SelectedIndex="{Binding SelectedColorIndex}"
SelectionMode="Extended"
TabIndex="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Top" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ContextMenu>
<ContextMenu Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}"> <ContextMenu Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}">
<MenuItem Header="{x:Static p:Resources.Remove}" <MenuItem
Command="{Binding RemoveColorsCommand}" Command="{Binding RemoveColorsCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}"> CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}"
Header="{x:Static p:Resources.Remove}">
<MenuItem.Icon> <MenuItem.Icon>
<ui:FontIcon Glyph="&#xE74D;" /> <ui:SymbolIcon Symbol="Delete24" />
</MenuItem.Icon> </MenuItem.Icon>
</MenuItem> </MenuItem>
<MenuItem Header="{x:Static p:Resources.Export_by}" > <MenuItem Header="{x:Static p:Resources.Export_by}">
<MenuItem.Icon> <MenuItem.Icon>
<ui:FontIcon Glyph="&#xEDE1;"/> <ui:SymbolIcon Symbol="ArrowExportLtr24" />
</MenuItem.Icon> </MenuItem.Icon>
<MenuItem Header="{x:Static p:Resources.Export_by_color}" <MenuItem
Command="{Binding ExportColorsGroupedByColorCommand}" Command="{Binding ExportColorsGroupedByColorCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}"> CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}"
Header="{x:Static p:Resources.Export_by_color}">
<MenuItem.Icon> <MenuItem.Icon>
<ui:FontIcon Glyph="&#xE790;"/> <ui:SymbolIcon Symbol="Color20" />
</MenuItem.Icon> </MenuItem.Icon>
</MenuItem> </MenuItem>
<MenuItem Header="{x:Static p:Resources.Export_by_format}" <MenuItem
Command="{Binding ExportColorsGroupedByFormatCommand}" Command="{Binding ExportColorsGroupedByFormatCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}" > CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItems}"
Header="{x:Static p:Resources.Export_by_format}">
<MenuItem.Icon> <MenuItem.Icon>
<ui:FontIcon Glyph="&#xE943;"/> <ui:SymbolIcon Symbol="Code20" />
</MenuItem.Icon> </MenuItem.Icon>
</MenuItem> </MenuItem>
</MenuItem> </MenuItem>
</ContextMenu> </ContextMenu>
</ui:ListView.ContextMenu> </ListView.ContextMenu>
<ui:ListView.ItemTemplate> <ListView.ItemTemplate>
<DataTemplate> <DataTemplate>
<Grid Width="64" Height="48"> <Grid Width="28" Height="28">
<Border <Ellipse
Width="26" Width="20"
Height="26" Height="20"
CornerRadius="4" Stroke="{DynamicResource SurfaceStrokeColorDefaultBrush}"
HorizontalAlignment="Center" StrokeThickness="1">
VerticalAlignment="Center" <Ellipse.Fill>
Background="{Binding Path=., Converter={StaticResource colorToBrushConverter}}"> <SolidColorBrush Color="{Binding Path=.}" />
<Border.Effect> </Ellipse.Fill>
<DropShadowEffect BlurRadius="6" Opacity="0.32" ShadowDepth="2" /> </Ellipse>
</Border.Effect>
</Border>
</Grid> </Grid>
</DataTemplate> </DataTemplate>
</ui:ListView.ItemTemplate> </ListView.ItemTemplate>
</ui:ListView> <ListView.ItemContainerStyle>
</Grid> <Style TargetType="{x:Type ListViewItem}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="RootGrid" Height="30">
<Ellipse
x:Name="SelectionStroke"
Width="28"
Height="28"
Fill="Transparent"
Opacity="0"
StrokeThickness="2">
<Ellipse.Stroke>
<SolidColorBrush Color="{Binding Path=.}" />
</Ellipse.Stroke>
</Ellipse>
<ContentPresenter
x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<!-- Title bar --> <ControlTemplate.Triggers>
<Grid Grid.ColumnSpan="2" <!-- Focused -->
Height="32" <!--
Background="Transparent" <Trigger Property="ui:FocusVisualHelper.ShowFocusVisual" Value="True">
VerticalAlignment="Top" <Setter TargetName="BorderRectangle" Property="Visibility" Value="Collapsed" />
KeyboardNavigation.DirectionalNavigation="Contained" </Trigger>-->
IsHitTestVisible="True">
<e:Interaction.Behaviors>
<behaviors:DragWindowBehavior/>
</e:Interaction.Behaviors>
<Border
Background="{DynamicResource TitleBarSecondaryForegroundBrush}"
Grid.ColumnSpan="2"
Width="30"
Height="3"
CornerRadius="1.5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,1,0,0" />
<Button Width="46" <!-- PointerOver -->
Command="{Binding OpenSettingsCommand}" <MultiTrigger>
Height="32" <MultiTrigger.Conditions>
Content="&#xE713;" <Condition Property="IsMouseOver" Value="True" />
TabIndex="2" <Condition Property="IsSelected" Value="False" />
Background="Transparent" </MultiTrigger.Conditions>
FontFamily="Segoe MDL2 Assets" <Setter TargetName="RootGrid" Property="Opacity" Value="0.8" />
HorizontalAlignment="Right"
Margin="0,0,46,0"
ToolTipService.ToolTip="{x:Static p:Resources.Open_settings}"
AutomationProperties.Name="{x:Static p:Resources.Open_settings}" />
<Button Width="64" </MultiTrigger>
Height="32" <!-- Selected -->
TabIndex="0" <MultiTrigger>
Command="{Binding OpenColorPickerCommand}" <MultiTrigger.Conditions>
Background="Transparent" <Condition Property="IsMouseOver" Value="False" />
FontFamily="Segoe MDL2 Assets" <Condition Property="IsSelected" Value="True" />
ui:FocusVisualHelper.FocusVisualMargin="-1" </MultiTrigger.Conditions>
ToolTipService.ToolTip="{x:Static p:Resources.Pick_color}" <Setter TargetName="SelectionStroke" Property="Opacity" Value="1" />
AutomationProperties.Name="{x:Static p:Resources.Pick_color}">
</MultiTrigger>
<!-- PointerOverSelected -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="SelectionStroke" Property="Opacity" Value="1" />
<Setter TargetName="RootGrid" Property="Opacity" Value="0.8" />
</MultiTrigger>
<!-- Disabled -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="RootGrid" Property="Opacity" Value="{DynamicResource ListViewItemDisabledThemeOpacity}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button
Grid.Column="2"
Width="36"
Height="36"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
AutomationProperties.Name="{x:Static p:Resources.Open_settings}"
Background="Transparent"
BorderBrush="Transparent"
Command="{Binding OpenSettingsCommand}"
Style="{StaticResource SubtleButtonStyle}"
TabIndex="2"
ToolTipService.ToolTip="{x:Static p:Resources.Open_settings}">
<Button.Content> <Button.Content>
<TextBlock Text="&#xEF3C;" AutomationProperties.Name="{x:Static p:Resources.Pick_color}" /> <ui:SymbolIcon FontSize="18" Symbol="Settings20" />
</Button.Content> </Button.Content>
</Button> </Button>
</Grid> </Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border
Grid.ColumnSpan="2"
Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
BorderThickness="0,1,0,0" />
<!-- Main grid --> <controls:ColorPickerControl
<Grid Grid.Column="1" Margin="16,0,12,0"
Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}"> HorizontalAlignment="Center"
<ScrollViewer IsTabStop="False" VerticalAlignment="Center"
Margin="0,90,0,0"> IsTabStop="True"
<StackPanel> KeyboardNavigation.DirectionalNavigation="Contained"
<ItemsControl IsTabStop="False" SelectedColor="{Binding SelectedColor}"
TabIndex="4" SelectedColorChangedCommand="{Binding SelectedColorChangedCommand}"
KeyboardNavigation.DirectionalNavigation="Contained" TabIndex="2"
FocusManager.IsFocusScope="True" Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}" />
KeyboardNavigation.TabNavigation="Once"
ItemsSource="{Binding ColorRepresentations}"> <!-- Main grid -->
<Grid
Grid.Column="1"
Margin="0,2,0,0"
Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}">
<ScrollViewer IsTabStop="False">
<ItemsControl
FocusManager.IsFocusScope="True"
IsTabStop="False"
ItemsSource="{Binding ColorRepresentations}"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabNavigation="Once"
TabIndex="4">
<ItemsControl.ItemTemplate> <ItemsControl.ItemTemplate>
<DataTemplate> <DataTemplate>
<controls:ColorFormatControl <controls:ColorFormatControl
ColorFormatModel="{Binding }" ColorCopiedNotificationBorder="{Binding ElementName=CopiedBorderIndicator}"
SelectedColor="{Binding ElementName=colorEditorControl, Path=DataContext.SelectedColor}" ColorFormatModel="{Binding}"
ColorCopiedNotificationBorder="{Binding ElementName=CopiedBorderIndicator}" /> SelectedColor="{Binding ElementName=colorEditorControl, Path=DataContext.SelectedColor}" />
</DataTemplate> </DataTemplate>
</ItemsControl.ItemTemplate> </ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel> <ItemsControl.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel <StackPanel
Orientation="Vertical" Margin="0,14,12,10"
Margin="0,16,0,16"/> Background="Transparent"
Orientation="Vertical" />
</ItemsPanelTemplate> </ItemsPanelTemplate>
</ItemsControl.ItemsPanel> </ItemsControl.ItemsPanel>
</ItemsControl> </ItemsControl>
</StackPanel> </ScrollViewer>
</ScrollViewer>
<controls:ColorPickerControl HorizontalAlignment="Left" </Grid>
Margin="0,44,0,0"
Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}"
IsTabStop="True"
TabIndex="2"
KeyboardNavigation.DirectionalNavigation="Contained"
SelectedColor="{Binding SelectedColor}"
SelectedColorChangedCommand="{Binding SelectedColorChangedCommand}"
Grid.Column="1"
VerticalAlignment="Top" />
</Grid> </Grid>
<!-- Empty history -->
<!-- Empty history --> <StackPanel
<StackPanel Grid.Column="1" Margin="24, 12" VerticalAlignment="Center" Orientation="Vertical" Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToInvertedVisibilityConverter}}"> Grid.Row="1"
<TextBlock Text="&#xEF3C;" Grid.ColumnSpan="2"
FontFamily="Segoe MDL2 Assets" Margin="0,-12,0,0"
FontSize="44" VerticalAlignment="Center"
HorizontalAlignment="Center" Orientation="Vertical"
Foreground="{DynamicResource SecondaryForegroundBrush}" /> Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToInvertedVisibilityConverter}}">
<TextBlock Margin="0,16,0,0" <ui:SymbolIcon FontSize="40" Symbol="Eyedropper20" />
TextWrapping="Wrap" <TextBlock
TextAlignment="Center" Margin="24,16,24,16"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Foreground="{DynamicResource SecondaryForegroundBrush}" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Text="{x:Static p:Resources.No_colors_yet}"/> Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Static p:Resources.No_colors_yet}"
TextAlignment="Center"
TextWrapping="Wrap" />
</StackPanel> </StackPanel>
<Border x:Name="CopiedBorderIndicator" <Border
Opacity="0" x:Name="CopiedBorderIndicator"
Grid.ColumnSpan="2" Grid.Row="1"
HorizontalAlignment="Stretch" Grid.ColumnSpan="2"
VerticalAlignment="Bottom" Height="0"
Height="0" HorizontalAlignment="Stretch"
Background="{DynamicResource SystemControlBackgroundAccentBrush}"> VerticalAlignment="Bottom"
BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
<TextBlock FontSize="16" BorderThickness="0,1,0,0"
Foreground="White" Opacity="0">
HorizontalAlignment="Center" <Border.Background>
VerticalAlignment="Center" <SolidColorBrush Color="{DynamicResource SystemAccentColorPrimary}" />
AutomationProperties.LiveSetting="Assertive" </Border.Background>
AutomationProperties.Name="{x:Static p:Resources.Copied_to_clipboard}"> <StackPanel
<Run Text="&#xE8C8; " FontFamily="Segoe MDL2 Assets"/> HorizontalAlignment="Center"
<Run Text="{x:Static p:Resources.Copied_to_clipboard}" FontWeight="SemiBold"/> VerticalAlignment="Center"
</TextBlock> AutomationProperties.LiveSetting="Assertive"
AutomationProperties.Name="{x:Static p:Resources.Copied_to_clipboard}"
Orientation="Horizontal">
<ui:SymbolIcon
Margin="0,0,8,0"
FontSize="20"
Foreground="{DynamicResource TextOnAccentFillColorPrimaryBrush}"
Symbol="Copy20" />
<TextBlock
FontSize="16"
Foreground="{DynamicResource TextOnAccentFillColorPrimaryBrush}"
Text="{x:Static p:Resources.Copied_to_clipboard}" />
</StackPanel>
</Border> </Border>
</Grid> </Grid>
</UserControl> </UserControl>

4
src/modules/colorPicker/ColorPickerUI/Views/ColorEditorView.xaml.cs
View File

@@ -42,11 +42,13 @@ namespace ColorPicker.Views
}; };
} }
private void HistoryColors_ItemClick(object sender, ModernWpf.Controls.ItemClickEventArgs e) /*
private void HistoryColors_ItemClick(object sender, ItemClickEventArgs e)
{ {
// Note: it does not handle clicking on the same color. // Note: it does not handle clicking on the same color.
// More appropriate event would be SelectionChanged but we can not distinguish between user action and program action inside of it. // More appropriate event would be SelectionChanged but we can not distinguish between user action and program action inside of it.
SessionEventHelper.Event.EditorHistoryColorPicked = true; SessionEventHelper.Event.EditorHistoryColorPicked = true;
} }
*/
} }
} }

132
src/modules/colorPicker/ColorPickerUI/Views/MainView.xaml
View File

@@ -1,20 +1,23 @@
<UserControl x:Class="ColorPicker.Views.MainView" <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.Views.MainView"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ColorPicker.Views" xmlns:local="clr-namespace:ColorPicker.Views"
xmlns:viewModel="clr-namespace:ColorPicker.ViewModels" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="64" xmlns:viewModel="clr-namespace:ColorPicker.ViewModels"
d:DataContext="{d:DesignInstance viewModel:MainViewModel, IsDesignTimeCreatable=True}"> d:DataContext="{d:DesignInstance viewModel:MainViewModel,
IsDesignTimeCreatable=True}"
d:DesignHeight="64"
mc:Ignorable="d">
<Grid Background="Transparent"> <Grid Background="Transparent">
<Border BorderBrush="{DynamicResource WindowBorderBrush}" <Border
Margin="12" Background="{DynamicResource ApplicationBackgroundBrush}"
BorderThickness="1" BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
Background="{DynamicResource PrimaryBackgroundBrush}" BorderThickness="1"
CornerRadius="4"> CornerRadius="8">
<!-- Disabled due to the poor performance of drawing shadows in WPF --> <!-- Disabled due to the poor performance of drawing shadows in WPF -->
<!--<Border.Effect> <!--<Border.Effect>
<DropShadowEffect <DropShadowEffect
BlurRadius="16" BlurRadius="16"
@@ -23,72 +26,73 @@
</Border.Effect>--> </Border.Effect>-->
<Grid> <Grid>
<!--only color format - one line --> <!-- only color format - one line -->
<Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2InvertedVisibilityConverter}}"> <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2InvertedVisibilityConverter}}">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="36"/> <ColumnDefinition Width="36" />
<ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}" <Border
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}" Background="{Binding ColorBrush}"
BorderThickness="1" BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
CornerRadius="4"/> BorderThickness="1"
CornerRadius="{DynamicResource ControlCornerRadius}" />
<TextBlock <TextBlock
x:Name="ColorTextBlock" x:Name="ColorTextBlock"
Margin="8,5,8,8" Grid.Column="1"
FontSize="16" Margin="8,5,8,8"
FontWeight="SemiBold" AutomationProperties.LiveSetting="Assertive"
Foreground="{DynamicResource PrimaryForegroundBrush}" AutomationProperties.Name="{Binding ColorName}"
Grid.Column="1" FontSize="16"
AutomationProperties.LiveSetting="Assertive" FontWeight="SemiBold"
AutomationProperties.LabeledBy="{Binding ColorName}" Foreground="{DynamicResource TextFillColorPrimaryBrush}"
AutomationProperties.Name="{Binding ColorName}" Text="{Binding ColorText}" />
Text="{Binding ColorText}"/>
</Grid> </Grid>
<!--color format and color name - two lines--> <!-- color format and color name - two lines -->
<Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2VisibilityConverter}}"> <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2VisibilityConverter}}">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="26"/> <RowDefinition Height="26" />
<RowDefinition Height="26"/> <RowDefinition Height="26" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="52"/> <ColumnDefinition Width="52" />
<ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}" <Border
HorizontalAlignment="Stretch"
Grid.RowSpan="2"
VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1"
Margin="1"
x:Name="ColorBorderBig" x:Name="ColorBorderBig"
CornerRadius="4"/> Grid.RowSpan="2"
Margin="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{Binding ColorBrush}"
BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{DynamicResource ControlCornerRadius}" />
<TextBlock Margin="8,5,6,0" <TextBlock
FontSize="16" Grid.Row="0"
Grid.Row="0" Grid.Column="1"
FontWeight="SemiBold" Margin="8,5,6,0"
Foreground="{DynamicResource PrimaryForegroundBrush}" FontSize="16"
Grid.Column="1" FontWeight="SemiBold"
Text="{Binding ColorText}"/> Foreground="{DynamicResource TextFillColorPrimaryBrush}"
Text="{Binding ColorText}" />
<TextBlock Margin="8,0,8,2" <TextBlock
Height="26" Grid.Row="1"
Grid.Row="1" Grid.Column="1"
Grid.Column="1" Grid.ColumnSpan="2"
Grid.ColumnSpan="2" Height="26"
FontSize="16" Margin="8,0,8,2"
FontWeight="SemiBold" Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Foreground="{DynamicResource PrimaryForegroundBrush}" Style="{StaticResource CaptionTextBlockStyle}"
Opacity="0.6" Text="{Binding ColorName}" />
Text="{Binding ColorName}"/>
</Grid> </Grid>
</Grid> </Grid>
</Border> </Border>

86
src/modules/colorPicker/ColorPickerUI/Views/ZoomView.xaml
View File

@@ -1,62 +1,68 @@
<UserControl x:Class="ColorPicker.Views.ZoomView" <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="ColorPicker.Views.ZoomView"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:shaders="clr-namespace:ColorPicker.Shaders" xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors" xmlns:shaders="clr-namespace:ColorPicker.Shaders"
Background="Transparent" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
Focusable="False"> Background="Transparent"
Focusable="False"
mc:Ignorable="d">
<Border x:Name="WindowBorder" <Border
HorizontalAlignment="Center" x:Name="WindowBorder"
VerticalAlignment="Center" Margin="12"
BorderBrush="{DynamicResource WindowBorderBrush}" HorizontalAlignment="Center"
Margin="12" VerticalAlignment="Center"
BorderThickness="1" Background="{DynamicResource LayerFillColorDefaultBrush}"
Background="{DynamicResource PrimaryBackgroundBrush}" BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
CornerRadius="4"> BorderThickness="1"
<!-- Disabled due to the poor performance of drawing shadows in WPF --> CornerRadius="{DynamicResource ControlCornerRadius}">
<!-- Disabled due to the poor performance of drawing shadows in WPF -->
<!--<Border.Effect> <!--<Border.Effect>
<DropShadowEffect BlurRadius="16" Opacity="0.28" ShadowDepth="1" /> <DropShadowEffect BlurRadius="16" Opacity="0.28" ShadowDepth="1" />
</Border.Effect>--> </Border.Effect>-->
<Grid> <Grid>
<Image Margin="3" Source="{Binding ZoomArea}" <Image
RenderOptions.BitmapScalingMode="NearestNeighbor" Width="{Binding Width, Mode=TwoWay}"
Stretch="Fill" Height="{Binding Height, Mode=TwoWay}"
Width="{Binding Width, Mode=TwoWay}" Margin="3"
Height="{Binding Height, Mode=TwoWay}"> RenderOptions.BitmapScalingMode="NearestNeighbor"
Source="{Binding ZoomArea}"
Stretch="Fill">
<e:Interaction.Behaviors> <e:Interaction.Behaviors>
<behaviors:ResizeBehavior Width="{Binding DesiredWidth}" Height="{Binding DesiredHeight}"/> <behaviors:ResizeBehavior Width="{Binding DesiredWidth}" Height="{Binding DesiredHeight}" />
<behaviors:GridEffectBehavior Effect="{Binding ElementName=gridEffect}" ZoomFactor="{Binding ZoomFactor}"/> <behaviors:GridEffectBehavior Effect="{Binding ElementName=gridEffect}" ZoomFactor="{Binding ZoomFactor}" />
</e:Interaction.Behaviors> </e:Interaction.Behaviors>
<Image.Effect> <Image.Effect>
<shaders:GridShaderEffect x:Name="gridEffect"/> <shaders:GridShaderEffect x:Name="gridEffect" />
</Image.Effect> </Image.Effect>
</Image> </Image>
<!-- Non-functional close button --> <!-- Non-functional close button -->
<Border HorizontalAlignment="Right" <Border
Visibility="Collapsed" HorizontalAlignment="Right"
VerticalAlignment="Top" VerticalAlignment="Top"
CornerRadius="0,4,0,4" CornerRadius="0,4,0,4"
Background="{DynamicResource PrimaryBackgroundBrush}"> Visibility="Collapsed">
<Border.Style> <Border.Style>
<Style TargetType="Border"> <Style TargetType="Border">
<Style.Triggers> <Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=WindowBorder}" Value="False"> <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=WindowBorder}" Value="False">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0" />
</DataTrigger> </DataTrigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
</Border.Style> </Border.Style>
<Button Height="40" <Button
Width="40" Width="40"
Content="&#xE8BB;" Height="40"
FontFamily="Segoe MDL2 Assets" Background="Transparent">
Background="Transparent"/> <ui:SymbolIcon Symbol="Dismiss20" />
</Button>
</Border> </Border>
</Grid> </Grid>
</Border> </Border>