zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-25 10:56:35 +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" x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker" xmlns:semi="https://irihi.tech/semi"
xmlns:controls="using:Avalonia.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1450" d:DesignHeight="1450"
@@ -11,18 +10,15 @@
mc:Ignorable="d"> mc:Ignorable="d">
<ScrollViewer> <ScrollViewer>
<StackPanel Spacing="20"> <StackPanel Spacing="20">
<StackPanel <StackPanel Orientation="Horizontal" Spacing="20">
VerticalAlignment="Top"
Orientation="Horizontal"
Spacing="20">
<ColorView Name="Test" ColorSpectrumShape="Ring" /> <ColorView Name="Test" ColorSpectrumShape="Ring" />
<ColorView ColorSpectrumShape="Box" /> <ColorView ColorSpectrumShape="Box" />
<ColorView Palette="{DynamicResource SemiColorPalette}" /> <ColorView Palette="{DynamicResource SemiColorPalette}" />
</StackPanel> </StackPanel>
<StackPanel VerticalAlignment="Top" Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ColorView <ColorView
Name="SimpleColorViewTest" Name="SimpleColorViewTest"
HsvColor="hsv(120,11%,10%)" HsvColor="hsv(180,80%,70%)"
IsAlphaVisible="True" IsAlphaVisible="True"
Theme="{StaticResource SimpleColorView}" /> Theme="{StaticResource SimpleColorView}" />
<StackPanel> <StackPanel>
@@ -30,63 +26,55 @@
<TextBlock Text="{Binding #SimpleColorViewTest.Color}" /> <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal"> <StackPanel Orientation="Horizontal" Spacing="8">
<ColorPicker Margin="8" ColorSpectrumShape="Ring"> <ColorPicker ColorSpectrumShape="Ring">
<ColorPicker.Palette> <ColorPicker.Palette>
<controls:FlatHalfColorPalette /> <FlatHalfColorPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker Margin="8" ColorSpectrumShape="Box"> <ColorPicker ColorSpectrumShape="Box">
<ColorPicker.Palette> <ColorPicker.Palette>
<colorPicker:SemiColorLightPalette /> <semi:SemiColorLightPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker <ColorPicker
Margin="8" Theme="{DynamicResource HexColorPicker}"
ColorSpectrumShape="Box" ColorSpectrumShape="Box">
Theme="{DynamicResource HexColorPicker}">
<ColorPicker.Palette> <ColorPicker.Palette>
<colorPicker:SemiColorLightPalette /> <semi:SemiColorLightPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
</StackPanel> </StackPanel>
<StackPanel HorizontalAlignment="Left" > <StackPanel HorizontalAlignment="Left">
<TextBlock Text="Use Style to customize button"></TextBlock> <TextBlock Text="Use Style to customize button" />
<ColorPicker <ColorPicker
Margin="8" Margin="8"
Width="32" MinWidth="32"
HsvColor="hsv(120,11%,10%)" HsvColor="hsv(180,80%,70%)">
>
<ColorPicker.Content> <ColorPicker.Content>
<Border <Border
Margin="1" Margin="1"
HorizontalAlignment="Stretch" Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
VerticalAlignment="Stretch"
Background="{Binding $parent[ColorPicker].HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="1" /> CornerRadius="1" />
</ColorPicker.Content> </ColorPicker.Content>
<ColorPicker.Styles> <ColorPicker.Styles>
<Style Selector="DropDownButton"> <Style Selector="DropDownButton">
<Setter Property="Padding" Value="0"/> <Setter Property="Padding" Value="0" />
<Style Selector="^ /template/ PathIcon"> <Style Selector="^ /template/ PathIcon">
<Setter Property="IsVisible" Value="False"/> <Setter Property="IsVisible" Value="False" />
</Style> </Style>
</Style> </Style>
</ColorPicker.Styles> </ColorPicker.Styles>
</ColorPicker> </ColorPicker>
</StackPanel> </StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Spacing="8">
<ColorPicker <ColorPicker
Margin="8" Theme="{StaticResource SimpleColorPicker}"
HsvColor="hsv(120,11%,10%)" HsvColor="hsv(180,80%,70%)" />
Theme="{StaticResource SimpleColorPicker}" />
<ColorPicker <ColorPicker
Margin="8" Theme="{StaticResource HexSimpleColorPicker}"
HsvColor="hsv(120,11%,10%)" HsvColor="hsv(180,80%,70%)" />
Theme="{StaticResource HexSimpleColorPicker}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </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 <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Avalonia.Controls"
xmlns:converters="using:Avalonia.Controls.Converters" xmlns:converters="using:Avalonia.Controls.Converters"
xmlns:primitives="using:Avalonia.Controls.Primitives"
x:CompileBindings="True"> 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:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
<converters:ToBrushConverter x:Key="ToBrushConverter" /> <converters:ToBrushConverter x:Key="ToBrushConverter" />
<ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker"> <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="MinWidth" Value="64" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
<Setter Property="Content"> <Setter Property="Content">
<Template> <Template>
<Panel> <Panel>
<Border <Border
Margin="1,1,0,1" Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius, CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Border <Border
Margin="1,1,0,1" Margin="1,1,0,1"
HorizontalAlignment="Stretch" Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
VerticalAlignment="Stretch" CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Panel> </Panel>
</Template> </Template>
</Setter> </Setter>
<Setter Property="Palette"> <Setter Property="Palette">
<controls:FluentColorPalette /> <FluentColorPalette />
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorPicker}"> <ControlTemplate TargetType="{x:Type ColorPicker}">
<DropDownButton <DropDownButton
Width="{TemplateBinding Width}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Height="{TemplateBinding Height}"
HorizontalContentAlignment="Stretch" MinWidth="{TemplateBinding MinWidth}"
VerticalContentAlignment="Stretch" MinHeight="{TemplateBinding MinHeight}"
ClipToBounds="True" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
ClipToBounds="True"
UseLayoutRounding="False"> UseLayoutRounding="False">
<DropDownButton.Styles> <DropDownButton.Styles>
<Style Selector="FlyoutPresenter.nopadding"> <Style Selector="FlyoutPresenter.nopadding">
@@ -113,13 +99,10 @@
<!-- Spectrum Tab --> <!-- Spectrum Tab -->
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}"> <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
<TabItem.Header> <TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}"> <PathIcon
<PathIcon Theme="{StaticResource InnerPathIcon}"
Width="16" Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Height="16" Foreground="{Binding $parent[TabItem].Foreground}" />
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
</TabItem.Header> </TabItem.Header>
<Grid Margin="12" RowDefinitions="*"> <Grid Margin="12" RowDefinitions="*">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
@@ -127,7 +110,7 @@
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="32" /> <ColumnDefinition Width="Auto" MinWidth="32" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<primitives:ColorSlider <ColorSlider
Name="ColorSpectrumThirdComponentSlider" Name="ColorSpectrumThirdComponentSlider"
Grid.Column="0" Grid.Column="0"
Margin="0,0,12,0" Margin="0,0,12,0"
@@ -141,8 +124,8 @@
IsPerceptive="False" IsPerceptive="False"
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}" IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Vertical" /> Orientation="Vertical" />
<primitives:ColorSpectrum <ColorSpectrum
x:Name="ColorSpectrum" Name="ColorSpectrum"
Grid.Column="1" Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
@@ -155,7 +138,7 @@
MinSaturation="{TemplateBinding MinSaturation}" MinSaturation="{TemplateBinding MinSaturation}"
MinValue="{TemplateBinding MinValue}" MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" /> Shape="{TemplateBinding ColorSpectrumShape}" />
<primitives:ColorSlider <ColorSlider
Name="ColorSpectrumAlphaSlider" Name="ColorSpectrumAlphaSlider"
Grid.Column="2" Grid.Column="2"
Margin="12,0,0,0" Margin="12,0,0,0"
@@ -167,24 +150,21 @@
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}" HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
IsEnabled="{TemplateBinding IsAlphaEnabled}" IsEnabled="{TemplateBinding IsAlphaEnabled}"
Orientation="Vertical"> Orientation="Vertical">
<primitives:ColorSlider.IsVisible> <ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}"> <MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" /> <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding> </MultiBinding>
</primitives:ColorSlider.IsVisible> </ColorSlider.IsVisible>
</primitives:ColorSlider> </ColorSlider>
</Grid> </Grid>
</TabItem> </TabItem>
<!-- Palette Tab --> <!-- Palette Tab -->
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}"> <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
<TabItem.Header> <TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}"> <PathIcon
<PathIcon Theme="{StaticResource InnerPathIcon}"
Width="16" Data="{DynamicResource ColorViewPaletteIconGlyph}"
Height="16" Foreground="{Binding $parent[TabItem].Foreground}" />
Data="{DynamicResource ColorViewPaletteIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
</TabItem.Header> </TabItem.Header>
<ListBox <ListBox
Margin="12" Margin="12"
@@ -217,18 +197,15 @@
<!-- Components Tab --> <!-- Components Tab -->
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}"> <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
<TabItem.Header> <TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}"> <PathIcon
<PathIcon Theme="{StaticResource InnerPathIcon}"
Width="16" Data="{DynamicResource ColorViewComponentsIconGlyph}"
Height="16" Foreground="{Binding $parent[TabItem].Foreground}" />
Data="{DynamicResource ColorViewComponentsIconGlyph}"
Foreground="{Binding $parent[TabItem].Foreground}" />
</Border>
</TabItem.Header> </TabItem.Header>
<Grid <Grid
Margin="12" Margin="12"
ColumnDefinitions="Auto,*" ColumnDefinitions="Auto,*"
RowDefinitions="Auto,24,1*,1*,1*,1*,12" RowDefinitions="Auto,24,*,*,*,*,12"
Tag="{TemplateBinding ColorModel}"> Tag="{TemplateBinding ColorModel}">
<Grid.Styles> <Grid.Styles>
<Style Selector="NumericUpDown"> <Style Selector="NumericUpDown">
@@ -272,13 +249,13 @@
Grid.Row="0" Grid.Row="0"
Grid.Column="0" Grid.Column="0"
Grid.ColumnSpan="2" Grid.ColumnSpan="2"
ColumnDefinitions="1*,12,1*"> ColumnDefinitions="*,12,*">
<!-- RadioButtonGroup --> <!-- RadioButtonGroup -->
<Border <Border
Padding="2" Padding="2"
Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}" Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
CornerRadius="3"> CornerRadius="3">
<Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}"> <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
<RadioButton <RadioButton
Name="RgbRadioButton" Name="RgbRadioButton"
Grid.Column="0" Grid.Column="0"
@@ -287,9 +264,9 @@
Content="RGB" Content="RGB"
CornerRadius="3,0,0,3" CornerRadius="3,0,0,3"
IsChecked="{TemplateBinding ColorModel, IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter}, Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Rgba}, ConverterParameter={x:Static ColorModel.Rgba},
Mode=TwoWay}" Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" /> Theme="{DynamicResource ColorViewRadioButton}" />
<RadioButton <RadioButton
Name="HsvRadioButton" Name="HsvRadioButton"
@@ -299,21 +276,20 @@
Content="HSV" Content="HSV"
CornerRadius="0,3,3,0" CornerRadius="0,3,3,0"
IsChecked="{TemplateBinding ColorModel, IsChecked="{TemplateBinding ColorModel,
Converter={StaticResource EnumToBoolConverter}, Converter={StaticResource EnumToBoolConverter},
ConverterParameter={x:Static controls:ColorModel.Hsva}, ConverterParameter={x:Static ColorModel.Hsva},
Mode=TwoWay}" Mode=TwoWay}"
Theme="{DynamicResource ColorViewRadioButton}" /> Theme="{DynamicResource ColorViewRadioButton}" />
</Grid> </Grid>
</Border> </Border>
<TextBox <TextBox
Name="PART_HexTextBox" Name="PART_HexTextBox"
Grid.Column="2" Grid.Column="2"
Height="32"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
AutomationProperties.Name="Hexadecimal Color" AutomationProperties.Name="Hexadecimal Color"
InnerLeftContent="#" InnerLeftContent="#"
IsVisible="{TemplateBinding IsHexInputVisible}" IsVisible="{TemplateBinding IsHexInputVisible}"
MaxLength="9" /> MaxLength="8" />
</Grid> </Grid>
<!-- Color component editing controls --> <!-- Color component editing controls -->
<!-- Component 1 RGB:Red HSV:Hue --> <!-- Component 1 RGB:Red HSV:Hue -->
@@ -332,15 +308,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}" NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False" ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component1Slider}" /> Value="{Binding Value, ElementName=Component1Slider}" />
<primitives:ColorSlider <ColorSlider
x:Name="Component1Slider" Name="Component1Slider"
Grid.Row="2" Grid.Row="2"
Grid.Column="1" Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Center" VerticalAlignment="Center"
ColorComponent="Component1" ColorComponent="Component1"
ColorModel="{TemplateBinding ColorModel, ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True" IsRoundingEnabled="True"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
@@ -363,15 +338,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}" NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False" ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component2Slider}" /> Value="{Binding Value, ElementName=Component2Slider}" />
<primitives:ColorSlider <ColorSlider
x:Name="Component2Slider" Name="Component2Slider"
Grid.Row="3" Grid.Row="3"
Grid.Column="1" Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Center" VerticalAlignment="Center"
ColorComponent="Component2" ColorComponent="Component2"
ColorModel="{TemplateBinding ColorModel, ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True" IsRoundingEnabled="True"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
@@ -394,15 +368,14 @@
NumberFormat="{StaticResource ColorViewComponentNumberFormat}" NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False" ShowButtonSpinner="False"
Value="{Binding Value, ElementName=Component3Slider}" /> Value="{Binding Value, ElementName=Component3Slider}" />
<primitives:ColorSlider <ColorSlider
x:Name="Component3Slider" Name="Component3Slider"
Grid.Row="4" Grid.Row="4"
Grid.Column="1" Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Center" VerticalAlignment="Center"
ColorComponent="Component3" ColorComponent="Component3"
ColorModel="{TemplateBinding ColorModel, ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsRoundingEnabled="True" IsRoundingEnabled="True"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
@@ -432,34 +405,33 @@
</MultiBinding> </MultiBinding>
</NumericUpDown.IsVisible> </NumericUpDown.IsVisible>
</NumericUpDown> </NumericUpDown>
<primitives:ColorSlider <ColorSlider
x:Name="AlphaComponentSlider" Name="AlphaComponentSlider"
Grid.Row="5" Grid.Row="5"
Grid.Column="1" Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Center" VerticalAlignment="Center"
ColorComponent="Alpha" ColorComponent="Alpha"
ColorModel="{TemplateBinding ColorModel, ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
Mode=OneWay}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsEnabled="{TemplateBinding IsAlphaEnabled}" IsEnabled="{TemplateBinding IsAlphaEnabled}"
IsRoundingEnabled="True" IsRoundingEnabled="True"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
Orientation="Horizontal" Orientation="Horizontal"
TickFrequency="1"> TickFrequency="1">
<primitives:ColorSlider.IsVisible> <ColorSlider.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}"> <MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" /> <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" /> <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding> </MultiBinding>
</primitives:ColorSlider.IsVisible> </ColorSlider.IsVisible>
</primitives:ColorSlider> </ColorSlider>
</Grid> </Grid>
</TabItem> </TabItem>
</TabControl> </TabControl>
<!-- Previewer --> <!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding --> <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<primitives:ColorPreviewer <ColorPreviewer
Grid.Row="1" Grid.Row="1"
Margin="12,-5,12,7" Margin="12,-5,12,7"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -471,9 +443,9 @@
</DropDownButton> </DropDownButton>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ DropDownButton"> <Style Selector="^ /template/ DropDownButton">
<Setter Property="Padding" Value="0 0 10 0"></Setter> <Setter Property="Padding" Value="0 0 10 0" />
</Style> </Style>
</ControlTheme> </ControlTheme>
@@ -481,7 +453,7 @@
x:Key="HexColorPicker" x:Key="HexColorPicker"
BasedOn="{StaticResource {x:Type ColorPicker}}" BasedOn="{StaticResource {x:Type ColorPicker}}"
TargetType="ColorPicker"> TargetType="ColorPicker">
<Setter Property="Width" Value="200" /> <Setter Property="MinWidth" Value="200" />
<Setter Property="Content"> <Setter Property="Content">
<Template> <Template>
<Grid ColumnDefinitions="Auto, *"> <Grid ColumnDefinitions="Auto, *">
@@ -499,8 +471,7 @@
Margin="1,1,0,1" Margin="1,1,0,1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor, Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" /> CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock <TextBlock
Grid.Column="1" Grid.Column="1"
@@ -525,9 +496,12 @@
<DropDownButton <DropDownButton
Width="{TemplateBinding Width}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Height="{TemplateBinding Height}"
HorizontalContentAlignment="Stretch" MinWidth="{TemplateBinding MinWidth}"
VerticalContentAlignment="Stretch" MinHeight="{TemplateBinding MinHeight}"
ClipToBounds="True" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
@@ -557,8 +531,8 @@
Grid.Row="0" Grid.Row="0"
CornerRadius="8 8 0 0" CornerRadius="8 8 0 0"
ClipToBounds="True"> ClipToBounds="True">
<primitives:ColorSpectrum <ColorSpectrum
x:Name="ColorSpectrum" Name="ColorSpectrum"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Components="{TemplateBinding ColorSpectrumComponents}" Components="{TemplateBinding ColorSpectrumComponents}"
@@ -571,7 +545,7 @@
MinValue="{TemplateBinding MinValue}" MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" /> Shape="{TemplateBinding ColorSpectrumShape}" />
</Border> </Border>
<primitives:ColorSlider <ColorSlider
Name="ColorSpectrumThirdComponentSlider" Name="ColorSpectrumThirdComponentSlider"
Grid.Row="1" Grid.Row="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
@@ -583,8 +557,8 @@
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}" IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Horizontal" /> Orientation="Horizontal" />
<primitives:ColorSlider <ColorSlider
x:Name="ColorSpectrumAlphaSlider" Name="ColorSpectrumAlphaSlider"
Grid.Row="2" Grid.Row="2"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Center" VerticalAlignment="Center"
@@ -597,8 +571,7 @@
IsRoundingEnabled="True" IsRoundingEnabled="True"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
TickFrequency="1" TickFrequency="1"
Orientation="Horizontal"> Orientation="Horizontal" />
</primitives:ColorSlider>
<StackPanel <StackPanel
Grid.Row="3" Grid.Row="3"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
@@ -675,7 +648,7 @@
x:Key="HexSimpleColorPicker" x:Key="HexSimpleColorPicker"
BasedOn="{StaticResource SimpleColorPicker}" BasedOn="{StaticResource SimpleColorPicker}"
TargetType="ColorPicker"> TargetType="ColorPicker">
<Setter Property="Width" Value="200" /> <Setter Property="MinWidth" Value="200" />
<Setter Property="Content"> <Setter Property="Content">
<Template> <Template>
<Grid ColumnDefinitions="Auto, *"> <Grid ColumnDefinitions="Auto, *">
@@ -693,8 +666,7 @@
Margin="1,1,0,1" Margin="1,1,0,1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor, Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" /> CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock <TextBlock
Grid.Column="1" Grid.Column="1"
@@ -709,4 +681,4 @@
</Setter> </Setter>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

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

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

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

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

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

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

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

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

@@ -1,30 +1,31 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker"> xmlns:semi="https://irihi.tech/semi">
<FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight> <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
<Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness> <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
<x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double> <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> <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
<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> <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
<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="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> <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
<CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius> <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
<Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness> <StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
<BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows> <StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
<x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double> <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
<x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double> <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
<x:Double x:Key="ColorPreviewerHeight">48</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="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
<PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode> <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
</ResourceDictionary> </ResourceDictionary>