feat: basic SimpleColorView.

This commit is contained in:
Zhang Dian 2024-08-10 14:54:09 +08:00
parent 3c0497c07a
commit d2a1f1e277

View File

@ -7,12 +7,12 @@
xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
xmlns:primitives="using:Avalonia.Controls.Primitives"
x:CompileBindings="True">
<!-- Add Resources Here -->
<pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
<converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
<converters:ColorToHexConverter x:Key="ColorToHexConverter" />
<converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
<converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
<converters:ToBrushConverter x:Key="ToBrushConverter" />
<globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
<VisualBrush
@ -376,7 +376,7 @@
AutomationProperties.Name="Hexadecimal Color"
InnerLeftContent="#"
IsVisible="{TemplateBinding IsHexInputVisible}"
MaxLength="9" />
MaxLength="8" />
</Grid>
<!-- Color component editing controls -->
<!-- Component 1 RGB:Red HSV:Hue -->
@ -560,4 +560,144 @@
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorView}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="280"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Backgrounds -->
<Border
x:Name="ContentBackgroundBorder"
Grid.Row="0"
Grid.RowSpan="3"
Height="{TemplateBinding Height}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorViewContentBackgroundBrush}"
BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
BorderThickness="0,1,0,0"
CornerRadius="{TemplateBinding CornerRadius}" />
<!-- Spectrum Tab -->
<Border
Grid.Row="0"
CornerRadius="8 8 0 0"
ClipToBounds="True">
<primitives:ColorSpectrum
x:Name="ColorSpectrum"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Components="{TemplateBinding ColorSpectrumComponents}"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
MaxHue="{TemplateBinding MaxHue}"
MaxSaturation="{TemplateBinding MaxSaturation}"
MaxValue="{TemplateBinding MaxValue}"
MinHue="{TemplateBinding MinHue}"
MinSaturation="{TemplateBinding MinSaturation}"
MinValue="{TemplateBinding MinValue}"
Shape="{TemplateBinding ColorSpectrumShape}" />
</Border>
<primitives:ColorSlider
x:Name="ColorSpectrumThirdComponentSlider"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
AutomationProperties.Name="Third Component"
ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
ColorModel="Hsva"
HsvColor="{Binding #ColorSpectrum.HsvColor}"
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
Orientation="Horizontal" />
<primitives:ColorSlider
x:Name="ColorSpectrumAlphaSlider"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
AutomationProperties.Name="Alpha Component"
ColorComponent="Alpha"
ColorModel="Hsva"
HsvColor="{Binding #ColorSpectrum.HsvColor}"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
IsVisible="{TemplateBinding IsAlphaVisible}"
IsRoundingEnabled="True"
IsSnapToTickEnabled="True"
TickFrequency="1"
Orientation="Horizontal">
</primitives:ColorSlider>
<StackPanel
Grid.Row="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Orientation="Horizontal"
Margin="0 8 0 0">
<Border
Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
Width="20"
Height="20"
CornerRadius="4" />
<Panel>
<TextBox
x:Name="PART_HexTextBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="4 0 0 0"
Classes="Small"
AutomationProperties.Name="Hexadecimal Color"
InnerLeftContent="#"
IsVisible="{TemplateBinding IsHexInputVisible}"
MaxLength="8" />
</Panel>
<NumericUpDown
x:Name="AlphaComponentNumericUpDown"
Width="70"
VerticalAlignment="Center"
AllowSpin="True"
Classes="Small"
IsEnabled="{TemplateBinding IsAlphaEnabled}"
Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
ShowButtonSpinner="False"
InnerRightContent="%"
Value="{Binding #ColorSpectrumAlphaSlider.Value}">
<NumericUpDown.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</NumericUpDown.IsVisible>
</NumericUpDown>
<ComboBox
x:Name="ColorComponentComboBox"
Width="80"
VerticalAlignment="Center"
Classes="Small"
SelectedValue="{TemplateBinding ColorModel}">
<ColorModel>Rgba</ColorModel>
<ColorModel>Hsva</ColorModel>
</ComboBox>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
<Design.PreviewWith>
<ColorView
Theme="{StaticResource SimpleColorView}"
IsAlphaVisible="True"
IsAlphaEnabled="True"
ColorModel="Hsva"
HsvColor="hsv(120,1,1,30)" />
</Design.PreviewWith>
</ResourceDictionary>