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

feat: enhance ColorPicker & redesign demo.

Browse Source
This commit is contained in:
Zhang Dian
2025-03-10 11:19:56 +08:00
parent 776ac47a98
commit ea182c07f0
3 changed files with 33 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,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>
@@ -29,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>
<FlatHalfColorPalette /> <FlatHalfColorPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker Margin="8" ColorSpectrumShape="Box"> <ColorPicker ColorSpectrumShape="Box">
<ColorPicker.Palette> <ColorPicker.Palette>
<semi: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>
<semi: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" Width="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>

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

@@ -7,25 +7,18 @@
<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="Width" Value="64" />
<Setter Property="MinWidth" Value="64" /> <Setter Property="MinHeight" Value="32" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="CornerRadius" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<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, Converter={StaticResource LeftCornerRadiusFilterConverter}}" /> CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Border <Border
Margin="1,1,0,1" Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}" Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" /> CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Panel> </Panel>
@@ -39,12 +32,14 @@
<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" 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">
@@ -499,9 +494,10 @@
<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" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"

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

@@ -2,7 +2,7 @@
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:semi="https://irihi.tech/semi"> 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>
@@ -18,7 +18,7 @@
<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" />
<semi:SemiColorDarkPalette x:Key="SemiColorPalette" /> <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />