zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #444 from irihitech/colorpicker

Browse Source 
Make ColorPicker dropdown button customizable.
This commit is contained in:
Dong Bin 2024-10-18 15:14:35 +08:00 committed by GitHub
commit c56ce90341
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,42 +19,74 @@
<ColorView ColorSpectrumShape="Box" /> <ColorView ColorSpectrumShape="Box" />
<ColorView Palette="{DynamicResource SemiColorPalette}" /> <ColorView Palette="{DynamicResource SemiColorPalette}" />
</StackPanel> </StackPanel>
<StackPanel <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
VerticalAlignment="Top"
Orientation="Horizontal">
<ColorView <ColorView
Name="SimpleColorViewTest" Name="SimpleColorViewTest"
Theme="{StaticResource SimpleColorView}" HsvColor="hsv(120,11%,10%)"
IsAlphaVisible="True" IsAlphaVisible="True"
HsvColor="hsv(120,11%,10%)" /> Theme="{StaticResource SimpleColorView}" />
<StackPanel> <StackPanel>
<TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" /> <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
<TextBlock Text="{Binding #SimpleColorViewTest.Color}" /> <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal"> <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<ColorPicker ColorSpectrumShape="Ring"> <ColorPicker Margin="8" ColorSpectrumShape="Ring">
<ColorPicker.Palette> <ColorPicker.Palette>
<controls:FlatHalfColorPalette /> <controls:FlatHalfColorPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker ColorSpectrumShape="Box"> <ColorPicker Margin="8" ColorSpectrumShape="Box">
<ColorPicker.Palette> <ColorPicker.Palette>
<colorPicker:SemiColorLightPalette /> <colorPicker:SemiColorLightPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}"> <ColorPicker
Margin="8"
ColorSpectrumShape="Box"
Theme="{DynamicResource HexColorPicker}">
<ColorPicker.Palette> <ColorPicker.Palette>
<colorPicker:SemiColorLightPalette /> <colorPicker:SemiColorLightPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
</StackPanel> </StackPanel>
<StackPanel HorizontalAlignment="Left" >
<TextBlock Text="Use Style to customize button"></TextBlock>
<ColorPicker
Margin="8"
Width="32"
HsvColor="hsv(120,11%,10%)"
>
<ColorPicker.Content>
<Border
Margin="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{Binding $parent[ColorPicker].HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="1" />
</ColorPicker.Content>
<ColorPicker.Styles>
<Style Selector="DropDownButton">
<Setter Property="Padding" Value="0"/>
<Style Selector="^ /template/ PathIcon">
<Setter Property="IsVisible" Value="False"/>
</Style>
</Style>
</ColorPicker.Styles>
</ColorPicker>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal"> <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<ColorPicker Theme="{StaticResource SimpleColorPicker}" <ColorPicker
HsvColor="hsv(120,11%,10%)" /> Margin="8"
<ColorPicker Theme="{StaticResource HexSimpleColorPicker}" HsvColor="hsv(120,11%,10%)"
HsvColor="hsv(120,11%,10%)" /> Theme="{StaticResource SimpleColorPicker}" />
<ColorPicker
Margin="8"
HsvColor="hsv(120,11%,10%)"
Theme="{StaticResource HexSimpleColorPicker}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>

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

@ -51,7 +51,6 @@
<DropDownButton <DropDownButton
Width="{TemplateBinding Width}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Height="{TemplateBinding Height}"
Padding="0,0,10,0"
HorizontalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
ClipToBounds="True" ClipToBounds="True"
@ -473,6 +472,10 @@
</DropDownButton> </DropDownButton>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ DropDownButton">
<Setter Property="Padding" Value="0 0 10 0"></Setter>
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme <ControlTheme
@ -523,7 +526,6 @@
<DropDownButton <DropDownButton
Width="{TemplateBinding Width}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Height="{TemplateBinding Height}"
Padding="0,0,10,0"
HorizontalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
ClipToBounds="True" ClipToBounds="True"