mirror/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2024-11-24 04:12:32 +08:00
Code Issues Actions 3 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 1466 additions and 1073 deletions
Show Stats 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.Shell32" Version="3.4.11" />
<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 Condition="'$(IsExperimentationLive)'!=''">
<!-- 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.User32 3.4.11
- WinUIEx 2.2.0
- WPF-UI 3.0.0-preview.13
- WPF-UI 3.0.0

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

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

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

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

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

@ -1,27 +1,47 @@
<Window x:Class="ColorPicker.ColorEditorWindow"
<ui:FluentWindow
x:Class="ColorPicker.ColorEditorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
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"
AutomationProperties.Name="{x:Static p:Resources.cp_editor}"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
ui:TitleBar.ExtendViewIntoTitleBar="True"
ui:TitleBar.ButtonStyle="{DynamicResource AppTitleBarButtonStyle}"
ui:WindowHelper.UseModernWindowStyle="True"
BorderBrush="{DynamicResource WindowBorderBrush}"
Background="{DynamicResource PrimaryBackgroundBrush}"
BorderThickness="1"
Title="Color Picker"
Height="380"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
Width="440"
Height="380"
ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
AutomationProperties.Name="{x:Static p:Resources.cp_editor}"
ExtendsContentIntoTitleBar="True"
ResizeMode="NoResize"
Topmost="True"
WindowStartupLocation="CenterScreen">
WindowCornerPreference="Default"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d">
<e:Interaction.Behaviors>
<behaviors:CloseZoomWindowBehavior />
</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.Windows;
using ColorPicker.Helpers;
using Common.UI;
using Wpf.Ui.Controls;
namespace ColorPicker
{
/// <summary>
/// Interaction logic for ColorEditorWindow.xaml
/// </summary>
public partial class ColorEditorWindow : Window
public partial class ColorEditorWindow : FluentWindow
{
private readonly AppStateHandler _appStateHandler;
public ColorEditorWindow(AppStateHandler appStateHandler)
{
InitializeComponent();
Wpf.Ui.Appearance.SystemThemeWatcher.Watch(this);
WindowBackdropType = OSVersionHelper.IsWindows11() ? WindowBackdropType.Mica : WindowBackdropType = WindowBackdropType.None;
_appStateHandler = appStateHandler;
Closing += ColorEditorWindow_Closing;
}
@ -31,7 +36,6 @@ namespace ColorPicker
protected override void OnSourceInitialized(EventArgs e)
{
base.OnSourceInitialized(e);
NativeMethods.SetToolWindowStyle(this);
}
}
}

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

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

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

@ -1,66 +1,181 @@
<UserControl x:Class="ColorPicker.Controls.ColorFormatControl"
xmlns:local="clr-namespace:ColorPicker"
<UserControl
x:Class="ColorPicker.Controls.ColorFormatControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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:p="clr-namespace:ColorPicker.Properties" xmlns:ui="http://schemas.modernwpf.com/2019"
xmlns:local="clr-namespace:ColorPicker"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
mc:Ignorable="d">
<Border x:Name="MainBorder"
Margin="12,16,12,0"
Width="348"
Height="36"
CornerRadius="4"
<UserControl.Resources>
<Style x:Key="ReadonlyTextBoxStyle" TargetType="{x:Type TextBox}">
<!-- Universal WPF UI focus -->
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
<!-- Universal WPF UI focus -->
<!-- Universal WPF UI ContextMenu -->
<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"
Background="{DynamicResource ColorControlBackgroundBrush}">
<Grid>
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>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="36"/>
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="FormatNameTextBlock"
Opacity="0.6"
Style="{DynamicResource BodyStrongTextBlockStyle}"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Margin="8"
VerticalAlignment="Center"/>
<TextBlock
x:Name="FormatNameTextBlock"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
TextTrimming="CharacterEllipsis" />
<TextBox x:Name="ColorTextRepresentationTextBlock"
FontFamily="Consolas"
FontSize="14"
Foreground="{DynamicResource PrimaryForegroundBrush}"
<TextBox
x:Name="ColorTextRepresentationTextBlock"
Grid.Column="1"
IsTabStop="False"
Margin="0,-2,0,0"
VerticalAlignment="Center"
AutomationProperties.Name="{x:Static p:Resources.Color_Code}"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
IsReadOnly="True"
VerticalAlignment="Center"
Padding="8"
AutomationProperties.Name="{x:Static p:Resources.Color_Code}"
/>
IsTabStop="False"
Style="{StaticResource ReadonlyTextBoxStyle}" />
<Button x:Name="CopyToClipboardButton"
ToolTipService.ToolTip="{x:Static p:Resources.Copy_to_clipboard}"
Background="{DynamicResource ColorControlBackgroundBrush}"
FontSize="16"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Opacity="0.6"
Height="36"
Width="36"
<Button
x:Name="CopyToClipboardButton"
Grid.Column="2"
Style="{StaticResource DefaultButtonStyle}"
Width="36"
Height="36"
Margin="0,0,4,0"
Padding="0"
AutomationProperties.HelpText="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:Controls.ColorFormatControl}}, Path=SelectedColorCopyHelperText}"
AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}"
AutomationProperties.HelpText="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:Controls.ColorFormatControl}}, Path=SelectedColorCopyHelperText}">
Background="Transparent"
BorderBrush="Transparent"
Style="{StaticResource SubtleButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Copy_to_clipboard}">
<Button.Content>
<TextBlock Text="&#xE8C8;" AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}" />
<ui:SymbolIcon FontSize="20" Symbol="Copy20" />
</Button.Content>
</Button>
</Grid>
<Border.Effect>
<DropShadowEffect BlurRadius="6" Opacity="0.24" ShadowDepth="1" />
</Border.Effect>
</Border>
</UserControl>

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

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

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

@ -1,457 +1,392 @@
<UserControl x:Class="ColorPicker.Controls.ColorPickerControl"
<UserControl
x:Class="ColorPicker.Controls.ColorPickerControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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:local="clr-namespace:ColorPicker.Controls"
xmlns:helpers="clr-namespace:ColorPicker.Helpers"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:p="clr-namespace:ColorPicker.Properties"
xmlns:ui="http://schemas.modernwpf.com/2019"
mc:Ignorable="d"
TabIndex="3"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
AutomationProperties.Name="{x:Static p:Resources.Color_Palette}"
FocusManager.IsFocusScope="True"
KeyboardNavigation.TabNavigation="Once">
KeyboardNavigation.TabNavigation="Once"
TabIndex="3"
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="Thumb"
x:Key="SliderThumbStyle">
<Setter Property="BorderThickness"
Value="4" />
<Setter Property="Background"
Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="IsTabStop"
Value="False" />
<Style TargetType="{x:Type Slider}">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border Background="Transparent"
BorderBrush="{DynamicResource PrimaryForegroundBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<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>
<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}" />
</RepeatButton.Style>
</RepeatButton>
</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 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>
</Grid>
</Grid>
<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="TopTickBar"
Property="Visibility"
Value="Visible" />
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="BottomRight">
<Setter TargetName="BottomTickBar"
Property="Visibility"
Value="Visible" />
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" 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 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>
<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>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="PickerPanel"
<Border
BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid
x:Name="PickerPanel"
Height="248"
HorizontalAlignment="Stretch"
Margin="12,2,12,2">
<Grid.Effect>
<DropShadowEffect BlurRadius="6"
Opacity="0.32"
ShadowDepth="2" />
</Grid.Effect>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="46" />
<ColumnDefinition Width="46" />
<ColumnDefinition Width="165" />
<ColumnDefinition Width="46" />
<ColumnDefinition Width="46" />
</Grid.ColumnDefinitions>
ClipToBounds="True"
Opacity="1">
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
<RowDefinition Height="*" />
<RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Button x:Name="colorVariation1Button"
<Button
x:Name="colorVariation1Button"
Grid.Column="0"
TabIndex="3"
ui:ControlHelper.CornerRadius="2,0,0,2"
Background="LightPink"
Click="ColorVariationButton_Click"
helpers:ControlHelper.CornerRadius="4,4,0,0"
AutomationProperties.Name="{x:Static p:Resources.Lightest_color}"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button x:Name="colorVariation2Button"
Grid.Column="1"
ui:ControlHelper.CornerRadius="0"
Background="LightPink"
Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}"
TabIndex="3"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button
x:Name="colorVariation2Button"
Grid.Row="1"
AutomationProperties.Name="{x:Static p:Resources.Lighter_color}"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button x:Name="colorVariation3Button"
Grid.Column="3"
ui:ControlHelper.CornerRadius="0"
Background="LightPink"
Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button
x:Name="colorVariation3Button"
Grid.Row="3"
AutomationProperties.Name="{x:Static p:Resources.Darker_color}"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button x:Name="colorVariation4Button"
Grid.Column="4"
ui:ControlHelper.CornerRadius="0,2,2,0"
Background="LightPink"
Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button
x:Name="colorVariation4Button"
Grid.Row="4"
helpers:ControlHelper.CornerRadius="0,0,4,4"
AutomationProperties.Name="{x:Static p:Resources.Darkest_color}"
Background="LightPink"
Click="ColorVariationButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
<Button x:Name="CurrentColorButton"
HorizontalAlignment="Left"
Grid.Column="0"
Grid.ColumnSpan="5"
ui:ControlHelper.CornerRadius="0"
Background="Red"
Width="165"
Height="48"
Margin="92,0,0,0"
AutomationProperties.Name="{x:Static p:Resources.Selected_color}"
<Button
x:Name="CurrentColorButton"
Grid.RowSpan="5"
Height="104"
Margin="0,72,0,72"
VerticalAlignment="Top"
AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}"
ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}"
AutomationProperties.Name="{x:Static p:Resources.Selected_color}"
Click="CurrentColorButton_Click"
Style="{DynamicResource ColorShadeButtonStyle}">
<ui:FlyoutService.Flyout>
<ui:Flyout x:Name="DetailsFlyout"
Placement="Bottom"
Style="{DynamicResource ColorShadeButtonStyle}"
ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}">
<ui:Flyout
x:Name="DetailsFlyout"
Closed="DetailsFlyout_Closed"
Opened="DetailsFlyout_Opened"
Closed="DetailsFlyout_Closed">
<Grid Margin="0,4,0,12"
KeyboardNavigation.TabNavigation="Contained"
x:Name="detailsGrid">
<StackPanel x:Name="detailsStackPanel">
Placement="Top">
<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>
<StackPanel Orientation="Horizontal">
<TextBlock Text="H"
Width="38"
FontWeight="SemiBold"
TextAlignment="Center"
VerticalAlignment="Center" />
<Slider x:Name="HueGradientSlider"
Width="214"
IsMoveToPointEnabled="True"
AutomationProperties.Name="{x:Static p:Resources.Hue_slider}"
Style="{StaticResource CustomSLiderStyle}"
ValueChanged="HueGradientSlider_ValueChanged"
<TextBlock
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="H"
TextAlignment="Center" />
<Slider
x:Name="HueGradientSlider"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalAlignment="Center"
AutomationProperties.Name="{x:Static p:Resources.Hue_slider}"
IsMoveToPointEnabled="True"
Maximum="289"
Minimum="0"
Maximum="289" />
</StackPanel>
ValueChanged="HueGradientSlider_ValueChanged" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="S"
Grid.Row="1"
Width="38"
TextAlignment="Center"
FontWeight="SemiBold"
VerticalAlignment="Center" />
<TextBlock
Grid.Row="2"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="S"
TextAlignment="Center" />
<Slider x:Name="SaturationGradientSlider"
<Slider
x:Name="SaturationGradientSlider"
Grid.Row="2"
Grid.Column="1"
Grid.ColumnSpan="3"
AutomationProperties.Name="{x:Static p:Resources.Saturation_slider}"
Style="{StaticResource CustomSLiderStyle}"
ValueChanged="SaturationGradientSlider_ValueChanged"
Grid.Column="1"
Width="214"
IsMoveToPointEnabled="True"
Grid.Row="1"
Maximum="289"
Minimum="0"
Maximum="289">
ValueChanged="SaturationGradientSlider_ValueChanged">
<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 StartPoint="0, 0.5" EndPoint="1,0.5">
<GradientStop x:Name="SaturationStartColor" Color="Black" />
<GradientStop x:Name="SaturationStopColor" Offset="1" Color="Red" />
</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"
<TextBlock
Grid.Row="4"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="V"
TextAlignment="Center" />
<Slider
x:Name="ValueGradientSlider"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="3"
AutomationProperties.Name="{x:Static p:Resources.Value_slider}"
Style="{StaticResource CustomSLiderStyle}"
ValueChanged="ValueGradientSlider_ValueChanged"
Grid.Column="1"
IsMoveToPointEnabled="True"
Grid.Row="2"
Width="214"
Maximum="289"
Minimum="0"
Maximum="289">
ValueChanged="ValueGradientSlider_ValueChanged">
<Slider.Background>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0, 0.5">
<GradientStop x:Name="ValueStartColor"
Color="Black" />
<GradientStop x:Name="ValueStopColor"
Color="Red"
Offset="1" />
<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>
</StackPanel>
<TextBlock
Grid.Row="6"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="RGB"
TextAlignment="Center" />
<StackPanel Orientation="Horizontal"
Margin="0,16,0,0">
<TextBlock Text="RGB"
Width="38"
FontWeight="SemiBold"
TextAlignment="Center"
VerticalAlignment="Center" />
<ui:NumberBox x:Name="RNumberBox"
Height="32"
Width="72"
ui:ControlHelper.CornerRadius="2,0,0,2"
<ui:NumberBox
x:Name="RNumberBox"
Grid.Row="6"
Grid.Column="1"
AutomationProperties.Name="{x:Static p:Resources.Red_value}"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged"
Maximum="255"
Minimum="0"
Maximum="255" />
SpinButtonPlacementMode="Compact"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
<ui:NumberBox x:Name="GNumberBox"
Height="32"
Margin="-1,0,0,0"
Width="72"
ui:ControlHelper.CornerRadius="0"
<ui:NumberBox
x:Name="GNumberBox"
Grid.Row="6"
Grid.Column="2"
Margin="4,0,0,0"
AutomationProperties.Name="{x:Static p:Resources.Green_value}"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged"
Maximum="255"
Minimum="0"
Maximum="255" />
SpinButtonPlacementMode="Compact"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
<ui:NumberBox x:Name="BNumberBox"
Height="32"
Width="72"
Margin="-1,0,0,0"
ui:ControlHelper.CornerRadius="0,2,2,0"
<ui:NumberBox
x:Name="BNumberBox"
Grid.Row="6"
Grid.Column="3"
Margin="4,0,0,0"
AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged"
Maximum="255"
Minimum="0"
Maximum="255" />
</StackPanel>
SpinButtonPlacementMode="Compact"
TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
<StackPanel Orientation="Horizontal"
Margin="0,16,0,0">
<TextBlock Text="HEX"
<TextBlock
Grid.Row="8"
Width="38"
TextAlignment="Center"
FontWeight="SemiBold"
VerticalAlignment="Center" />
<TextBox x:Name="HexCode"
Height="32"
Width="214"
VerticalAlignment="Center"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="HEX"
TextAlignment="Center" />
<TextBox
x:Name="HexCode"
Grid.Row="8"
Grid.Column="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
CharacterCasing="Lower"
GotKeyboardFocus="HexCode_GotKeyboardFocus"
TextChanged="HexCode_TextChanged"
TextWrapping="Wrap"
MaxLength="7"
CharacterCasing="Lower" />
</StackPanel>
TextChanged="HexCode_TextChanged"
TextWrapping="Wrap" />
<Button Margin="0,32,0,0"
<ui:Button
x:Name="OKButton"
Click="OKButton_Click"
Style="{StaticResource AccentButtonStyle}"
Grid.Row="9"
Grid.ColumnSpan="4"
Margin="0,32,0,0"
HorizontalAlignment="Stretch"
Appearance="Primary"
AutomationProperties.Name="{x:Static p:Resources.Select}"
Content="{x:Static p:Resources.Select}"
HorizontalAlignment="Stretch" />
</StackPanel>
Click="OKButton_Click"
Content="{x:Static p:Resources.Select}" />
</Grid>
</ui:Flyout>
</ui:FlyoutService.Flyout>
</Button>
</Grid>
</Border>
</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 ColorPicker.Helpers;
using ManagedCommon;
using ModernWpf.Controls;
using ModernWpf.Controls.Primitives;
using Wpf.Ui.Controls;
using static System.Net.Mime.MediaTypeNames;
namespace ColorPicker.Controls
{
@ -74,9 +74,9 @@ namespace ColorPicker.Controls
control._ignoreRGBChanges = true;
control.HexCode.Text = ColorToHex(newColor);
control.RNumberBox.Text = newColor.R.ToString(CultureInfo.InvariantCulture);
control.GNumberBox.Text = newColor.G.ToString(CultureInfo.InvariantCulture);
control.BNumberBox.Text = newColor.B.ToString(CultureInfo.InvariantCulture);
control.RNumberBox.Value = newColor.R;
control.GNumberBox.Value = newColor.G;
control.BNumberBox.Value = newColor.B;
control.SetColorFromTextBoxes(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
control._ignoreRGBChanges = false;
@ -173,9 +173,9 @@ namespace ColorPicker.Controls
if (!_ignoreRGBChanges)
{
RNumberBox.Text = currentColor.R.ToString(CultureInfo.InvariantCulture);
GNumberBox.Text = currentColor.G.ToString(CultureInfo.InvariantCulture);
BNumberBox.Text = currentColor.B.ToString(CultureInfo.InvariantCulture);
RNumberBox.Value = currentColor.R;
GNumberBox.Value = currentColor.G;
BNumberBox.Value = currentColor.B;
}
_currentColor = currentColor;
@ -193,17 +193,17 @@ namespace ColorPicker.Controls
{
_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 };
var moveColor = new ThicknessAnimation(new Thickness(0), new Duration(TimeSpan.FromMilliseconds(250)));
moveColor.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
ControlHelper.SetCornerRadius(CurrentColorButton, new CornerRadius(2));
CurrentColorButton.BeginAnimation(Button.WidthProperty, resizeColor);
CurrentColorButton.BeginAnimation(Button.MarginProperty, moveColor);
CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.HeightProperty, resizeColor);
CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.MarginProperty, moveColor);
CurrentColorButton.IsEnabled = false;
SessionEventHelper.Event.EditorAdjustColorOpened = true;
DetailsFlyout.IsOpen = true;
}
}
@ -216,19 +216,17 @@ namespace ColorPicker.Controls
var resizeColor = new DoubleAnimation(165, new Duration(TimeSpan.FromMilliseconds(150)));
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 };
ControlHelper.SetCornerRadius(CurrentColorButton, new CornerRadius(0));
CurrentColorButton.BeginAnimation(Button.WidthProperty, resizeColor);
CurrentColorButton.BeginAnimation(Button.MarginProperty, moveColor);
CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.HeightProperty, resizeColor);
CurrentColorButton.BeginAnimation(System.Windows.Controls.Button.MarginProperty, moveColor);
CurrentColorButton.IsEnabled = true;
}
}
private void OKButton_Click(object sender, RoutedEventArgs e)
{
HideDetails();
SelectedColorChangedCommand.Execute(_currentColor);
SessionEventHelper.Event.EditorColorAdjusted = true;
DetailsFlyout.Hide();
@ -253,7 +251,7 @@ namespace ColorPicker.Controls
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);
SessionEventHelper.Event.EditorSimilarColorPicked = true;
}
@ -284,7 +282,7 @@ namespace ColorPicker.Controls
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
var reg = new Regex("^#?([0-9A-Fa-f]{3}){1,2}$");
@ -362,9 +360,11 @@ namespace ColorPicker.Controls
if (!_ignoreRGBChanges)
{
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;
var b = numberBox.Name == "BNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)BNumberBox.Value;
byte r = numberBox.Name == "RNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)RNumberBox.Value;
byte g = numberBox.Name == "GNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)GNumberBox.Value;
byte b = numberBox.Name == "BNumberBox" ? GetValueFromNumberBox(numberBox) : (byte)BNumberBox.Value;
_ignoreRGBChanges = true;
SetColorFromTextBoxes(System.Drawing.Color.FromArgb(r, g, b));
_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>
private static byte GetValueFromNumberBox(NumberBox numberBox)
{
var internalTextBox = GetChildOfType<TextBox>(numberBox);
var parsedValue = numberBox.NumberFormatter.ParseDouble(internalTextBox.Text);
double? parsedValue = ParseDouble(numberBox.Text);
if (parsedValue != null)
{
var parsedValueByte = (byte)parsedValue;
if (parsedValueByte >= numberBox.Minimum && parsedValueByte <= numberBox.Maximum)
{
return parsedValueByte;
@ -394,6 +395,16 @@ namespace ColorPicker.Controls
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)
where T : DependencyObject
{

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

@ -150,7 +150,7 @@ namespace ColorPicker.Helpers
if (_colorEditorWindow == null)
{
_colorEditorWindow = new ColorEditorWindow(this);
_colorEditorWindow.Content = _colorEditorViewModel;
_colorEditorWindow.contentPresenter.Content = _colorEditorViewModel;
_colorEditorViewModel.OpenColorPickerRequested += ColorEditorViewModel_OpenColorPickerRequested;
_colorEditorViewModel.OpenSettingsRequested += ColorEditorViewModel_OpenSettingsRequested;
_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));
}
}
}

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

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

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

@ -6,6 +6,7 @@ using System.ComponentModel.Composition;
using System.Windows;
using System.Windows.Interop;
using ColorPicker.ViewModelContracts;
using Wpf.Ui.Controls;
namespace ColorPicker
{
@ -18,6 +19,7 @@ namespace ColorPicker
{
Closing += MainWindow_Closing;
Bootstrapper.InitializeContainer(this);
Wpf.Ui.Appearance.SystemThemeWatcher.Watch(this, WindowBackdropType.None);
InitializeComponent();
DataContext = this;
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>
/// Looks up a localized string similar to Color dark 1.
/// </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>
/// Looks up a localized string similar to Press the Color Picker icon to capture a color from your screen..
/// </summary>

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

@ -400,4 +400,12 @@
<value>Plum</value>
<comment>Plum color</comment>
</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>

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

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

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

@ -1,4 +1,5 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModels="clr-namespace:ColorPicker.ViewModels"
xmlns:views="clr-namespace:ColorPicker.Views">

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>

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

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

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

@ -1,19 +1,22 @@
<UserControl x:Class="ColorPicker.Views.MainView"
<UserControl
x:Class="ColorPicker.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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:local="clr-namespace:ColorPicker.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModel="clr-namespace:ColorPicker.ViewModels"
mc:Ignorable="d" d:DesignHeight="64"
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">
<Border BorderBrush="{DynamicResource WindowBorderBrush}"
Margin="12"
<Border
Background="{DynamicResource ApplicationBackgroundBrush}"
BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
BorderThickness="1"
Background="{DynamicResource PrimaryBackgroundBrush}"
CornerRadius="4">
CornerRadius="8">
<!-- Disabled due to the poor performance of drawing shadows in WPF -->
<!--<Border.Effect>
<DropShadowEffect
@ -30,23 +33,23 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}"
<Border
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}"
Background="{Binding ColorBrush}"
BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4"/>
CornerRadius="{DynamicResource ControlCornerRadius}" />
<TextBlock
x:Name="ColorTextBlock"
Grid.Column="1"
Margin="8,5,8,8"
AutomationProperties.LiveSetting="Assertive"
AutomationProperties.Name="{Binding ColorName}"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Grid.Column="1"
AutomationProperties.LiveSetting="Assertive"
AutomationProperties.LabeledBy="{Binding ColorName}"
AutomationProperties.Name="{Binding ColorName}"
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
Text="{Binding ColorText}" />
</Grid>
@ -61,33 +64,34 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}"
HorizontalAlignment="Stretch"
Grid.RowSpan="2"
VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1"
Margin="1"
<Border
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"
FontSize="16"
<TextBlock
Grid.Row="0"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Grid.Column="1"
Margin="8,5,6,0"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
Text="{Binding ColorText}" />
<TextBlock Margin="8,0,8,2"
Height="26"
<TextBlock
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Opacity="0.6"
Height="26"
Margin="8,0,8,2"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{Binding ColorName}" />
</Grid>
</Grid>

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

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