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

feat: add ColorPicker new theme.

Browse Source
This commit is contained in:
rabbitism 2023-10-04 16:12:45 +08:00
parent e563f860ad
commit ba2ce1decb
4 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/Directory.Build.props
View File

@ -1,6 +1,6 @@
<Project> <Project>
<PropertyGroup> <PropertyGroup>
<Nullable>enable</Nullable> <Nullable>enable</Nullable>
<AvaloniaVersion>11.0.0</AvaloniaVersion> <AvaloniaVersion>11.1.999-cibuild0040425-beta</AvaloniaVersion>
</PropertyGroup> </PropertyGroup>
</Project> </Project>

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

@ -29,6 +29,12 @@
<colorPicker:SemiColorLightPalette /> <colorPicker:SemiColorLightPalette />
</ColorPicker.Palette> </ColorPicker.Palette>
</ColorPicker> </ColorPicker>
<ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
<ColorPicker.Palette>
<colorPicker:SemiColorLightPalette />
</ColorPicker.Palette>
</ColorPicker>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

2
src/Package.props
View File

@ -7,7 +7,7 @@
<Authors>IRIHI Technology</Authors> <Authors>IRIHI Technology</Authors>
<Description>Avalonia Theme inspired by Semi Design.</Description> <Description>Avalonia Theme inspired by Semi Design.</Description>
<PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl> <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
<AvaloniaVersion>11.0.0</AvaloniaVersion> <AvaloniaVersion>11.1.999-cibuild0040425-beta</AvaloniaVersion>
<PackageLicenseExpression>MIT</PackageLicenseExpression> <PackageLicenseExpression>MIT</PackageLicenseExpression>
</PropertyGroup> </PropertyGroup>
</Project> </Project>

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

@ -17,10 +17,33 @@
<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="{DynamicResource ControlCornerRadius}" /> <Setter Property="CornerRadius" Value="3" />
<Setter Property="Height" Value="32" /> <Setter Property="Height" Value="32" />
<Setter Property="Width" Value="64" /> <Setter Property="Width" Value="64" />
<Setter Property="MinWidth" Value="64" /> <Setter Property="MinWidth" Value="64" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Content">
<Template>
<Panel>
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Panel>
</Template>
</Setter>
<Setter Property="Palette"> <Setter Property="Palette">
<controls:FluentColorPalette /> <controls:FluentColorPalette />
</Setter> </Setter>
@ -33,6 +56,8 @@
HorizontalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
ClipToBounds="True" ClipToBounds="True"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False"> UseLayoutRounding="False">
<DropDownButton.Styles> <DropDownButton.Styles>
@ -40,26 +65,6 @@
<Setter Property="Padding" Value="0" /> <Setter Property="Padding" Value="0" />
</Style> </Style>
</DropDownButton.Styles> </DropDownButton.Styles>
<DropDownButton.Content>
<!-- Preview color -->
<Panel>
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Border
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius,
Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Panel>
</DropDownButton.Content>
<DropDownButton.Flyout> <DropDownButton.Flyout>
<Flyout FlyoutPresenterClasses="nopadding" Placement="AnchorAndGravity"> <Flyout FlyoutPresenterClasses="nopadding" Placement="AnchorAndGravity">
@ -471,4 +476,40 @@
</Setter> </Setter>
</ControlTheme> </ControlTheme>
<ControlTheme
x:Key="HexColorPicker"
BasedOn="{StaticResource {x:Type ColorPicker}}"
TargetType="ColorPicker">
<Setter Property="Width" Value="200" />
<Setter Property="Content">
<Template>
<Grid ColumnDefinitions="Auto, *">
<Border
Grid.Column="0"
Width="{Binding $self.Bounds.Height}"
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Border
Grid.Column="0"
Width="{Binding $self.Bounds.Height}"
Margin="1,1,0,1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding HsvColor,
Converter={StaticResource ToBrushConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock
Grid.Column="1"
Margin="8,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding $parent[ColorPicker].Color}" />
</Grid>
</Template>
</Setter>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>