zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-03-03 00:00:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #559 from irihitech/colorpicker

Browse Source 
enhance Colorpicker
This commit is contained in:
Dong Bin
2025-03-13 11:04:43 +08:00
committed by GitHub
parent 5a1d87e163 7e33078f00
commit d03e80d0ef
12 changed files with 374 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
View File

@@ -2,8 +2,7 @@
x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
xmlns:controls="using:Avalonia.Controls"
xmlns:semi="https://irihi.tech/semi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1450"
@@ -11,18 +10,15 @@
mc:Ignorable="d">
<ScrollViewer>
<StackPanel Spacing="20">
<StackPanel
VerticalAlignment="Top"
Orientation="Horizontal"
Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="20">
<ColorView Name="Test" ColorSpectrumShape="Ring" />
<ColorView ColorSpectrumShape="Box" />
<ColorView Palette="{DynamicResource SemiColorPalette}" />
</StackPanel>
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<StackPanel Orientation="Horizontal">
<ColorView
Name="SimpleColorViewTest"
HsvColor="hsv(120,11%,10%)"
HsvColor="hsv(180,80%,70%)"
IsAlphaVisible="True"
Theme="{StaticResource SimpleColorView}" />
<StackPanel>
@@ -30,63 +26,55 @@
<TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
</StackPanel>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<ColorPicker Margin="8" ColorSpectrumShape="Ring">
<StackPanel Orientation="Horizontal" Spacing="8">
<ColorPicker ColorSpectrumShape="Ring">
<ColorPicker.Palette>
<controls:FlatHalfColorPalette />
<FlatHalfColorPalette />
</ColorPicker.Palette>
</ColorPicker>
<ColorPicker Margin="8" ColorSpectrumShape="Box">
<ColorPicker ColorSpectrumShape="Box">
<ColorPicker.Palette>
<colorPicker:SemiColorLightPalette />
<semi:SemiColorLightPalette />
</ColorPicker.Palette>
</ColorPicker>
<ColorPicker
Margin="8"
ColorSpectrumShape="Box"
Theme="{DynamicResource HexColorPicker}">
Theme="{DynamicResource HexColorPicker}"
ColorSpectrumShape="Box">
<ColorPicker.Palette>
<colorPicker:SemiColorLightPalette />
<semi:SemiColorLightPalette />
</ColorPicker.Palette>
</ColorPicker>
</StackPanel>
<StackPanel HorizontalAlignment="Left" >
<TextBlock Text="Use Style to customize button"></TextBlock>
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="Use Style to customize button" />
<ColorPicker
Margin="8"
Width="32"
HsvColor="hsv(120,11%,10%)"
>
MinWidth="32"
HsvColor="hsv(180,80%,70%)">
<ColorPicker.Content>
<Border
Margin="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{Binding $parent[ColorPicker].HsvColor,
Converter={StaticResource ToBrushConverter}}"
Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
CornerRadius="1" />
</ColorPicker.Content>
<ColorPicker.Styles>
<Style Selector="DropDownButton">
<Setter Property="Padding" Value="0"/>
<Setter Property="Padding" Value="0" />
<Style Selector="^ /template/ PathIcon">
<Setter Property="IsVisible" Value="False"/>
<Setter Property="IsVisible" Value="False" />
</Style>
</Style>
</ColorPicker.Styles>
</ColorPicker>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Spacing="8">
<ColorPicker
Margin="8"
HsvColor="hsv(120,11%,10%)"
Theme="{StaticResource SimpleColorPicker}" />
Theme="{StaticResource SimpleColorPicker}"
HsvColor="hsv(180,80%,70%)" />
<ColorPicker
Margin="8"
HsvColor="hsv(120,11%,10%)"
Theme="{StaticResource HexSimpleColorPicker}" />
Theme="{StaticResource HexSimpleColorPicker}"
HsvColor="hsv(180,80%,70%)" />
</StackPanel>
</StackPanel>
</ScrollViewer>

3
src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs Normal file
View File

@@ -0,0 +1,3 @@
using Avalonia.Metadata;
[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]

184
src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
View File

@@ -1,62 +1,48 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Avalonia.Controls"
xmlns:converters="using:Avalonia.Controls.Converters"
xmlns:primitives="using:Avalonia.Controls.Primitives"
x:CompileBindings="True">
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
</ResourceDictionary.MergedDictionaries>
<converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
<converters:ToBrushConverter x:Key="ToBrushConverter" />
<ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
<Setter Property="CornerRadius" Value="3" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="64" />
<Setter Property="MinWidth" Value="64" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
<Setter Property="Content">
<Template>
<Panel>
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Panel>
</Template>
</Setter>
<Setter Property="Palette">
<controls:FluentColorPalette />
<FluentColorPalette />
</Setter>
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorPicker}">
<DropDownButton
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ClipToBounds="True"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
ClipToBounds="True"
UseLayoutRounding="False">
<DropDownButton.Styles>
<Style Selector="FlyoutPresenter.nopadding">
@@ -113,13 +99,10 @@
<!-- Spectrum Tab -->
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<Grid Margin="12" RowDefinitions="*">
<Grid.ColumnDefinitions>
@@ -127,7 +110,7 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="32" />
</Grid.ColumnDefinitions>
<primitives:ColorSlider
<ColorSlider
Name="ColorSpectrumThirdComponentSlider"
Grid.Column="0"
Margin="0,0,12,0"
@@ -141,8 +124,8 @@
IsPerceptive="False"
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Vertical" />
<primitives:ColorSpectrum
x:Name="ColorSpectrum"
<ColorSpectrum
Name="ColorSpectrum"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
@@ -155,7 +138,7 @@
MinSaturation="{TemplateBinding MinSaturation}"
MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" />
<primitives:ColorSlider
<ColorSlider
Name="ColorSpectrumAlphaSlider"
Grid.Column="2"
Margin="12,0,0,0"
@@ -167,24 +150,21 @@
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
Orientation="Vertical">
<primitives:ColorSlider.IsVisible>
<ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</primitives:ColorSlider.IsVisible>
</primitives:ColorSlider>
</ColorSlider.IsVisible>
</ColorSlider>
</Grid>
</TabItem>
<!-- Palette Tab -->
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewPaletteIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewPaletteIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<ListBox
Margin="12"
@@ -217,18 +197,15 @@
<!-- Components Tab -->
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewComponentsIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewComponentsIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<Grid
Margin="12"
ColumnDefinitions="Auto,*"
RowDefinitions="Auto,24,1*,1*,1*,1*,12"
RowDefinitions="Auto,24,*,*,*,*,12"
Tag="{TemplateBinding ColorModel}">
<Grid.Styles>
<Style Selector="NumericUpDown">
@@ -272,13 +249,13 @@
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ColumnDefinitions="1*,12,1*">
ColumnDefinitions="*,12,*">
<!-- RadioButtonGroup -->
<Border
Padding="2"
Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
CornerRadius="3">
<Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
<Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
<RadioButton
Name="RgbRadioButton"
Grid.Column="0"
@@ -287,9 +264,9 @@
Content="RGB"
CornerRadius="3,0,0,3"
IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Rgba},
Mode=TwoWay}"
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorModel.Rgba},
Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" />
<RadioButton
Name="HsvRadioButton"
@@ -299,21 +276,20 @@
Content="HSV"
CornerRadius="0,3,3,0"
IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Hsva},
Mode=TwoWay}"
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorModel.Hsva},
Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" />
</Grid>
</Border>
<TextBox
Name="PART_HexTextBox"
Grid.Column="2"
Height="32"
HorizontalAlignment="Stretch"
AutomationProperties.Name="Hexadecimal Color"
InnerLeftContent="#"
IsVisible="{TemplateBinding IsHexInputVisible}"
MaxLength="9" />
MaxLength="8" />
</Grid>
<!-- Color component editing controls -->
<!-- Component 1 RGB:Red HSV:Hue -->
@@ -332,15 +308,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component1Slider}" />
<primitives:ColorSlider
x:Name="Component1Slider"
<ColorSlider
Name="Component1Slider"
Grid.Row="2"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component1"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -363,15 +338,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component2Slider}" />
<primitives:ColorSlider
x:Name="Component2Slider"
<ColorSlider
Name="Component2Slider"
Grid.Row="3"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component2"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -394,15 +368,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component3Slider}" />
<primitives:ColorSlider
x:Name="Component3Slider"
<ColorSlider
Name="Component3Slider"
Grid.Row="4"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component3"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -432,34 +405,33 @@
</MultiBinding>
</NumericUpDown.IsVisible>
</NumericUpDown>
<primitives:ColorSlider
x:Name="AlphaComponentSlider"
<ColorSlider
Name="AlphaComponentSlider"
Grid.Row="5"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Alpha"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
Orientation="Horizontal"
TickFrequency="1">
<primitives:ColorSlider.IsVisible>
<ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</primitives:ColorSlider.IsVisible>
</primitives:ColorSlider>
</ColorSlider.IsVisible>
</ColorSlider>
</Grid>
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<primitives:ColorPreviewer
<ColorPreviewer
Grid.Row="1"
Margin="12,-5,12,7"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -471,9 +443,9 @@
</DropDownButton>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ DropDownButton">
<Setter Property="Padding" Value="0 0 10 0"></Setter>
<Setter Property="Padding" Value="0 0 10 0" />
</Style>
</ControlTheme>
@@ -481,7 +453,7 @@
x:Key="HexColorPicker"
BasedOn="{StaticResource {x:Type ColorPicker}}"
TargetType="ColorPicker">
<Setter Property="Width" Value="200" />
<Setter Property="MinWidth" Value="200" />
<Setter Property="Content">
<Template>
<Grid ColumnDefinitions="Auto, *">
@@ -499,8 +471,7 @@
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock
Grid.Column="1"
@@ -525,9 +496,12 @@
<DropDownButton
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ClipToBounds="True"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
@@ -557,8 +531,8 @@
Grid.Row="0"
CornerRadius="8 8 0 0"
ClipToBounds="True">
<primitives:ColorSpectrum
x:Name="ColorSpectrum"
<ColorSpectrum
Name="ColorSpectrum"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Components="{TemplateBinding ColorSpectrumComponents}"
@@ -571,7 +545,7 @@
MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" />
</Border>
<primitives:ColorSlider
<ColorSlider
Name="ColorSpectrumThirdComponentSlider"
Grid.Row="1"
HorizontalAlignment="Stretch"
@@ -583,8 +557,8 @@
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Horizontal" />
<primitives:ColorSlider
x:Name="ColorSpectrumAlphaSlider"
<ColorSlider
Name="ColorSpectrumAlphaSlider"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
@@ -597,8 +571,7 @@
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
TickFrequency="1"
Orientation="Horizontal">
</primitives:ColorSlider>
Orientation="Horizontal" />
<StackPanel
Grid.Row="3"
HorizontalAlignment="Stretch"
@@ -675,7 +648,7 @@
x:Key="HexSimpleColorPicker"
BasedOn="{StaticResource SimpleColorPicker}"
TargetType="ColorPicker">
<Setter Property="Width" Value="200" />
<Setter Property="MinWidth" Value="200" />
<Setter Property="Content">
<Template>
<Grid ColumnDefinitions="Auto, *">
@@ -693,8 +666,7 @@
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock
Grid.Column="1"
@@ -709,4 +681,4 @@
</Setter>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

39
src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
View File

@@ -33,17 +33,16 @@
Name="PART_AccentDecrement2Border"
Grid.Column="0"
Background="{TemplateBinding HsvColor,
Converter={StaticResource AccentColorConverter},
ConverterParameter='-2'}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}"
Converter={StaticResource AccentColorConverter},
ConverterParameter='-2'}"
CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
Tag="-2" />
<Border
Name="PART_AccentDecrement1Border"
Grid.Column="1"
Background="{TemplateBinding HsvColor,
Converter={StaticResource AccentColorConverter},
ConverterParameter='-1'}"
Converter={StaticResource AccentColorConverter},
ConverterParameter='-1'}"
Tag="-1" />
</Grid>
<!-- Right accent colors -->
@@ -63,17 +62,16 @@
Name="PART_AccentIncrement1Border"
Grid.Column="0"
Background="{TemplateBinding HsvColor,
Converter={StaticResource AccentColorConverter},
ConverterParameter='1'}"
Converter={StaticResource AccentColorConverter},
ConverterParameter='1'}"
Tag="1" />
<Border
Name="PART_AccentIncrement2Border"
Grid.Column="1"
Background="{TemplateBinding HsvColor,
Converter={StaticResource AccentColorConverter},
ConverterParameter='2'}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource RightCornerRadiusFilterConverter}}"
Converter={StaticResource AccentColorConverter},
ConverterParameter='2'}"
CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
Tag="2" />
</Grid>
<!-- Preview color: Must be last for drop shadow Z-index -->
@@ -85,12 +83,13 @@
BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
<Border
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Border
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Panel>
</Border>
@@ -100,15 +99,15 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{TemplateBinding IsAccentColorsVisible,
Converter={x:Static BoolConverters.Not}}">
IsVisible="{TemplateBinding IsAccentColorsVisible,Converter={x:Static BoolConverters.Not}}">
<Panel>
<Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
<Border
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Border
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Panel>
</Border>

62
src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
View File

@@ -11,19 +11,17 @@
<Setter Property="UseLayoutRounding" Value="False" />
<Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
<Setter Property="CornerRadius" Value="999" />
<Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border
Margin="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="{DynamicResource ColorSliderBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}" />
</ControlTemplate>
</Setter.Value>
<ControlTemplate>
<Border
Margin="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="{DynamicResource ColorSliderBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}" />
</ControlTemplate>
</Setter>
</ControlTheme>
@@ -45,20 +43,16 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Rectangle
Width="{Binding #PART_Track.Bounds.Width}"
Height="{Binding #PART_Track.Bounds.Height}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{TemplateBinding Background}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Track
Name="PART_Track"
Height="12"
@@ -68,8 +62,7 @@
Maximum="{TemplateBinding Maximum}"
Minimum="{TemplateBinding Minimum}"
Orientation="Horizontal"
Value="{TemplateBinding Value,
Mode=TwoWay}">
Value="{TemplateBinding Value,Mode=TwoWay}">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
@@ -106,10 +99,8 @@
</Track.IncreaseButton>
<Thumb
Name="ColorSliderThumb"
Width="16"
Height="16"
Margin="0"
Padding="0"
Width="{TemplateBinding Height}"
Height="{TemplateBinding Height}"
DataContext="{TemplateBinding Value}"
Theme="{StaticResource ColorSliderThumbTheme}" />
</Track>
@@ -136,20 +127,16 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Rectangle
Width="{Binding #PART_Track.Bounds.Width}"
Height="{Binding #PART_Track.Bounds.Height}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{TemplateBinding Background}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Track
Name="PART_Track"
Width="12"
@@ -159,8 +146,7 @@
Maximum="{TemplateBinding Maximum}"
Minimum="{TemplateBinding Minimum}"
Orientation="Vertical"
Value="{TemplateBinding Value,
Mode=TwoWay}">
Value="{TemplateBinding Value,Mode=TwoWay}">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
@@ -199,8 +185,6 @@
Name="ColorSliderThumb"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Width}"
Margin="0"
Padding="0"
DataContext="{TemplateBinding Value}"
Theme="{StaticResource ColorSliderThumbTheme}" />
</Track>
@@ -231,4 +215,4 @@
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

200
src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
View File

@@ -1,125 +1,115 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Avalonia.Controls"
xmlns:converters="using:Avalonia.Controls.Converters"
x:CompileBindings="True">
<converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
<converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
<converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
<ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
<Setter Property="CornerRadius" Value="6" />
<Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ColorSpectrum}">
<ControlTemplate TargetType="{x:Type ColorSpectrum}">
<Panel
Name="PART_LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Panel
Name="PART_LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Panel
Name="PART_SizingPanel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ClipToBounds="True">
<Rectangle
Name="PART_SpectrumRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Rectangle
Name="PART_SpectrumOverlayRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Ellipse
Name="PART_SpectrumEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
<Ellipse
Name="PART_SpectrumOverlayEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
<Canvas
Name="PART_InputTarget"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent">
<!-- Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers -->
<Panel
Name="PART_SelectionEllipsePanel"
ToolTip.Placement="Top"
ToolTip.VerticalOffset="-10">
<Ellipse
Name="FocusEllipse"
Margin="-2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
StrokeThickness="2" />
<Ellipse
Name="SelectionEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
StrokeThickness="2" />
<ToolTip.Tip>
<!-- Set in code-behind -->
</ToolTip.Tip>
</Panel>
</Canvas>
<Rectangle
Name="BorderRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,
Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Ellipse
Name="BorderEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
</Panel>
Name="PART_SizingPanel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ClipToBounds="True">
<Rectangle
Name="PART_SpectrumRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Rectangle
Name="PART_SpectrumOverlayRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Ellipse
Name="PART_SpectrumEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
<Ellipse
Name="PART_SpectrumOverlayEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
<Canvas
Name="PART_InputTarget"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent">
<!-- Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers -->
<Panel
Name="PART_SelectionEllipsePanel"
ToolTip.Placement="Top"
ToolTip.VerticalOffset="-10">
<Ellipse
Name="FocusEllipse"
Margin="-2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
StrokeThickness="2" />
<Ellipse
Name="SelectionEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
StrokeThickness="2" />
<ToolTip.Tip>
<!-- Set in code-behind -->
</ToolTip.Tip>
</Panel>
</Canvas>
<Rectangle
Name="BorderRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Box}}"
RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Ellipse
Name="BorderEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsHitTestVisible="False"
IsVisible="{TemplateBinding Shape,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
</Panel>
</ControlTemplate>
</Setter.Value>
</Panel>
</ControlTemplate>
</Setter>
<!-- Normal -->
<!-- Separating this allows easier customization in applications -->
<Style Selector="^ /template/ Ellipse#BorderEllipse, ^ /template/ Rectangle#BorderRectangle">
<Style Selector="^ /template/ Ellipse#BorderEllipse,^ /template/ Rectangle#BorderRectangle">
<Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
<Setter Property="StrokeThickness" Value="1" />
</Style>

163
src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
View File

@@ -1,11 +1,9 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Avalonia.Controls"
xmlns:converters="using:Avalonia.Controls.Converters"
xmlns:globalization="using:System.Globalization"
xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
xmlns:primitives="using:Avalonia.Controls.Primitives"
xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
x:CompileBindings="True">
<pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -19,6 +17,15 @@
<cvts:ToColorModel x:Key="ToColorModel" />
<globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
<Design.PreviewWith>
<ColorView
Theme="{StaticResource SimpleColorView}"
IsAlphaVisible="True"
IsAlphaEnabled="True"
ColorModel="Hsva"
HsvColor="hsv(120,7%,90%)" />
</Design.PreviewWith>
<VisualBrush
x:Key="ColorControlCheckeredBackgroundBrush"
DestinationRect="0,0,8,8"
@@ -116,12 +123,12 @@
</ControlTheme>
<ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
<Setter Property="RadioButton.Cursor" Value="Hand" />
<Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
<Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
<Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
<Setter Property="RadioButton.Template">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
<Setter Property="Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
<Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
<Setter Property="Template">
<ControlTemplate TargetType="RadioButton">
<ContentPresenter
Name="PART_ContentPresenter"
@@ -163,10 +170,10 @@
<ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="ColorView.Width" Value="300" />
<Setter Property="ColorView.Height" Value="300" />
<Setter Property="ColorView.Palette">
<controls:FluentColorPalette />
<Setter Property="Width" Value="300" />
<Setter Property="Height" Value="300" />
<Setter Property="Palette">
<FluentColorPalette />
</Setter>
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorView}">
@@ -208,13 +215,10 @@
<!-- Spectrum Tab -->
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<Grid Margin="12" RowDefinitions="*">
<Grid.ColumnDefinitions>
@@ -222,7 +226,7 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="32" />
</Grid.ColumnDefinitions>
<primitives:ColorSlider
<ColorSlider
Name="ColorSpectrumThirdComponentSlider"
Grid.Column="0"
Margin="0,0,12,0"
@@ -236,8 +240,8 @@
IsPerceptive="False"
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Vertical" />
<primitives:ColorSpectrum
x:Name="ColorSpectrum"
<ColorSpectrum
Name="ColorSpectrum"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
@@ -250,8 +254,8 @@
MinSaturation="{TemplateBinding MinSaturation}"
MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" />
<primitives:ColorSlider
x:Name="ColorSpectrumAlphaSlider"
<ColorSlider
Name="ColorSpectrumAlphaSlider"
Grid.Column="2"
Margin="12,0,0,0"
HorizontalAlignment="Center"
@@ -262,24 +266,21 @@
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
Orientation="Vertical">
<primitives:ColorSlider.IsVisible>
<ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</primitives:ColorSlider.IsVisible>
</primitives:ColorSlider>
</ColorSlider.IsVisible>
</ColorSlider>
</Grid>
</TabItem>
<!-- Palette Tab -->
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewPaletteIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewPaletteIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<ListBox
Margin="12"
@@ -312,18 +313,15 @@
<!-- Components Tab -->
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ColorViewComponentsIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{DynamicResource ColorViewComponentsIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</TabItem.Header>
<Grid
Margin="12"
ColumnDefinitions="Auto,*"
RowDefinitions="Auto,24,1*,1*,1*,1*,12"
RowDefinitions="Auto,24,*,*,*,*,12"
UseLayoutRounding="False">
<Grid.Styles>
<Style Selector="NumericUpDown">
@@ -339,43 +337,42 @@
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ColumnDefinitions="1*,12,1*">
ColumnDefinitions="*,12,*">
<!-- RadioButtonGroup -->
<Border
Padding="2"
Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
CornerRadius="3">
<Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
<Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
<RadioButton
x:Name="RgbRadioButton"
Name="RgbRadioButton"
Grid.Column="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Content="RGB"
CornerRadius="3,0,0,3"
IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Rgba},
Mode=TwoWay}"
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorModel.Rgba},
Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" />
<RadioButton
x:Name="HsvRadioButton"
Name="HsvRadioButton"
Grid.Column="1"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Content="HSV"
CornerRadius="0,3,3,0"
IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Hsva},
Mode=TwoWay}"
Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static ColorModel.Hsva},
Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" />
</Grid>
</Border>
<TextBox
x:Name="PART_HexTextBox"
Name="PART_HexTextBox"
Grid.Column="2"
Height="32"
HorizontalAlignment="Stretch"
AutomationProperties.Name="Hexadecimal Color"
InnerLeftContent="#"
@@ -399,15 +396,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component1Slider}" />
<primitives:ColorSlider
x:Name="Component1Slider"
<ColorSlider
Name="Component1Slider"
Grid.Row="2"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component1"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -430,15 +426,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component2Slider}" />
<primitives:ColorSlider
x:Name="Component2Slider"
<ColorSlider
Name="Component2Slider"
Grid.Row="3"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component2"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -461,15 +456,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component3Slider}" />
<primitives:ColorSlider
x:Name="Component3Slider"
<ColorSlider
Name="Component3Slider"
Grid.Row="4"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Component3"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
@@ -499,34 +493,33 @@
</MultiBinding>
</NumericUpDown.IsVisible>
</NumericUpDown>
<primitives:ColorSlider
x:Name="AlphaComponentSlider"
<ColorSlider
Name="AlphaComponentSlider"
Grid.Row="5"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColorComponent="Alpha"
ColorModel="{TemplateBinding ColorModel,
Mode=OneWay}"
ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
Orientation="Horizontal"
TickFrequency="1">
<primitives:ColorSlider.IsVisible>
<ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</primitives:ColorSlider.IsVisible>
</primitives:ColorSlider>
</ColorSlider.IsVisible>
</ColorSlider>
</Grid>
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<primitives:ColorPreviewer
<ColorPreviewer
Grid.Row="1"
Margin="12,-5,12,7"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -583,8 +576,8 @@
Grid.Row="0"
CornerRadius="8 8 0 0"
ClipToBounds="True">
<primitives:ColorSpectrum
x:Name="ColorSpectrum"
<ColorSpectrum
Name="ColorSpectrum"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Components="{TemplateBinding ColorSpectrumComponents}"
@@ -597,7 +590,7 @@
MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" />
</Border>
<primitives:ColorSlider
<ColorSlider
Name="ColorSpectrumThirdComponentSlider"
Grid.Row="1"
HorizontalAlignment="Stretch"
@@ -609,7 +602,7 @@
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Horizontal" />
<primitives:ColorSlider
<ColorSlider
x:Name="ColorSpectrumAlphaSlider"
Grid.Row="2"
HorizontalAlignment="Stretch"
@@ -623,8 +616,7 @@
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
TickFrequency="1"
Orientation="Horizontal">
</primitives:ColorSlider>
Orientation="Horizontal" />
<StackPanel
Grid.Row="3"
HorizontalAlignment="Stretch"
@@ -693,13 +685,4 @@
<Setter Property="Width" Value="176" />
</Style>
</ControlTheme>
<Design.PreviewWith>
<ColorView
Theme="{StaticResource SimpleColorView}"
IsAlphaVisible="True"
IsAlphaEnabled="True"
ColorModel="Hsva"
HsvColor="hsv(120,7%,90%)" />
</Design.PreviewWith>
</ResourceDictionary>
</ResourceDictionary>

12
src/Semi.Avalonia.ColorPicker/Controls/_index.axaml Normal file
View File

@@ -0,0 +1,12 @@
<ResourceDictionary
x:CompileBindings="True"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

34
src/Semi.Avalonia.ColorPicker/Dark.axaml
View File

@@ -1,21 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
<SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
<SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
<SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
<StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
<StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
<StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
<StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
<StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
<StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
<StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
<BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
</ResourceDictionary>

2
src/Semi.Avalonia.ColorPicker/Index.axaml
View File

@@ -6,7 +6,7 @@
<ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
</ResourceDictionary.ThemeDictionaries>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/_index.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

34
src/Semi.Avalonia.ColorPicker/Light.axaml
View File

@@ -1,21 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
<SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
<SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
<SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
<SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
<SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
<SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
<StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
<StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
<StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
<StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
<StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
<StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
<StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
<BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
</ResourceDictionary>

29
src/Semi.Avalonia.ColorPicker/Shared.axaml
View File

@@ -1,30 +1,31 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
<FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
xmlns:semi="https://irihi.tech/semi">
<StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
<Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
<x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
<StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
<StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
<StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
<!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
<!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
<!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
<StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
<StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
<StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" />
<x:Double x:Key="ColorSliderWidth">16</x:Double>
<CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
<Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
<BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
<StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
<StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
<StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
<StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
<x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
<x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
<x:Double x:Key="ColorPreviewerHeight">48</x:Double>
<CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
<StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
<semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
<StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
<StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />
<StaticResource x:Key="ColorPickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
<PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
</ResourceDictionary>