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

misc: format ColorPicker xaml.

Browse Source
This commit is contained in:
Zhang Dian
2025-02-28 16:18:41 +08:00
parent a6855ab7db
commit 27b08caae7
7 changed files with 254 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,8 @@
<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" />
@@ -30,21 +21,18 @@
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="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" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor, Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
Converter={StaticResource ToBrushConverter}}" CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
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}">
@@ -127,7 +115,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 +129,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 +143,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,12 +155,12 @@
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 -->
@@ -228,7 +216,7 @@
<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 +260,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 +275,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,9 +287,9 @@
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>
@@ -332,15 +320,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 +350,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 +380,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 +417,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 +455,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>
@@ -499,8 +483,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"
@@ -557,8 +540,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 +554,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 +566,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 +580,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,8 +675,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 +690,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>

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

@@ -13,17 +13,15 @@
<Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" /> <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
<Setter Property="CornerRadius" Value="999" /> <Setter Property="CornerRadius" Value="999" />
<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"
@@ -136,20 +129,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 +148,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"
@@ -231,4 +219,4 @@
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

198
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="6" />
<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>

129
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}">
@@ -222,7 +229,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 +243,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 +257,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,12 +269,12 @@
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 -->
@@ -323,7 +330,7 @@
<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,41 +346,41 @@
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" Height="32"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
@@ -399,15 +406,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 +436,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 +466,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 +503,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 +586,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 +600,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 +612,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 +626,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 +695,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>

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>