Zhang Dian
GitHub
commit
321912a32e
@ -21,6 +21,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo", "demo\
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
Debug|Any CPU = Debug|Any CPU
|
||||
@ -47,6 +49,10 @@ Global
|
||||
{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
||||
{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
EndGlobalSection
|
||||
GlobalSection(SolutionProperties) = preSolution
|
||||
HideSolutionNode = FALSE
|
||||
|
||||
@ -7,5 +7,6 @@
|
||||
<!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
|
||||
<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
|
||||
<StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
|
||||
<StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
|
||||
</Application.Styles>
|
||||
</Application>
|
||||
37
demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
Normal file
37
demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
Normal file
@ -0,0 +1,37 @@
|
||||
<UserControl
|
||||
x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Avalonia.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<StackPanel>
|
||||
<StackPanel
|
||||
VerticalAlignment="Top"
|
||||
Orientation="Horizontal"
|
||||
Spacing="20">
|
||||
<ColorView ColorSpectrumShape="Ring" />
|
||||
<ColorView ColorSpectrumShape="Box" />
|
||||
<ColorView>
|
||||
<ColorView.Palette>
|
||||
<controls:MaterialColorPalette />
|
||||
</ColorView.Palette>
|
||||
</ColorView>
|
||||
</StackPanel>
|
||||
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
|
||||
<ColorPicker ColorSpectrumShape="Ring">
|
||||
<ColorPicker.Palette>
|
||||
<controls:FlatHalfColorPalette />
|
||||
</ColorPicker.Palette>
|
||||
</ColorPicker>
|
||||
<ColorPicker ColorSpectrumShape="Box">
|
||||
<ColorPicker.Palette>
|
||||
<controls:MaterialColorPalette />
|
||||
</ColorPicker.Palette>
|
||||
</ColorPicker>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
13
demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs
Normal file
13
demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs
Normal file
@ -0,0 +1,13 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
public partial class ColorPickerDemo : UserControl
|
||||
{
|
||||
public ColorPickerDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Media;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
@ -15,4 +16,9 @@ public partial class DatePickerDemo : UserControl
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
|
||||
public override void Render(DrawingContext context)
|
||||
{
|
||||
base.Render(context);
|
||||
}
|
||||
}
|
||||
@ -43,6 +43,7 @@
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
|
||||
<ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
|
||||
<ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
@ -39,6 +39,9 @@
|
||||
<TabItem Header="CheckBox">
|
||||
<pages:CheckBoxDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="ColorPicker">
|
||||
<pages:ColorPickerDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="ComboBox">
|
||||
<pages:ComboBoxDemo />
|
||||
</TabItem>
|
||||
|
||||
465
src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
Normal file
465
src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
Normal file
@ -0,0 +1,465 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Avalonia.Controls"
|
||||
xmlns:converters="using:Avalonia.Controls.Converters"
|
||||
xmlns:primitives="using:Avalonia.Controls.Primitives">
|
||||
<!-- Add Resources Here -->
|
||||
<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:ToBrushConverter x:Key="ToBrushConverter" />
|
||||
|
||||
<ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
|
||||
<Setter Property="Height" Value="32" />
|
||||
<Setter Property="Width" Value="64" />
|
||||
<Setter Property="MinWidth" Value="64" />
|
||||
<Setter Property="Palette">
|
||||
<controls:FluentColorPalette />
|
||||
</Setter>
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ColorPicker}">
|
||||
<DropDownButton
|
||||
Width="{TemplateBinding Width}"
|
||||
Height="{TemplateBinding Height}"
|
||||
Padding="0,0,10,0"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
VerticalContentAlignment="Stretch"
|
||||
ClipToBounds="True"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
UseLayoutRounding="False">
|
||||
<DropDownButton.Styles>
|
||||
<Style Selector="FlyoutPresenter.nopadding">
|
||||
<Setter Property="Padding" Value="0" />
|
||||
</Style>
|
||||
</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>
|
||||
<Flyout FlyoutPresenterClasses="nopadding" Placement="Auto">
|
||||
|
||||
<!--
|
||||
The following is copy-pasted from the ColorView's control template.
|
||||
It MUST always be kept in sync with the ColorView (which is master).
|
||||
Note the only changes are resources specific to the ColorPicker.
|
||||
-->
|
||||
<Grid
|
||||
Name="RootGrid"
|
||||
Width="300"
|
||||
Height="300"
|
||||
RowDefinitions="*,Auto">
|
||||
<Grid.Styles />
|
||||
<!-- Backgrounds -->
|
||||
<!-- TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}" -->
|
||||
<Border
|
||||
x:Name="ContentBackgroundBorder"
|
||||
Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
Height="{TemplateBinding Height}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{DynamicResource ColorViewContentBackgroundBrush}"
|
||||
BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
|
||||
BorderThickness="0,1,0,0"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
|
||||
<TabControl
|
||||
x:Name="PART_TabControl"
|
||||
Grid.Row="0"
|
||||
Padding="0"
|
||||
VerticalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
|
||||
<TabControl.Styles>
|
||||
<Style Selector="TabItem">
|
||||
<Setter Property="MinHeight" Value="32" />
|
||||
</Style>
|
||||
<Style Selector="TabItem:selected">
|
||||
<Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
|
||||
</Style>
|
||||
</TabControl.Styles>
|
||||
<TabControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Columns="0" Rows="1" />
|
||||
</ItemsPanelTemplate>
|
||||
</TabControl.ItemsPanel>
|
||||
<!-- Spectrum Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<Grid Margin="12" RowDefinitions="*">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" MinWidth="32" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" MinWidth="32" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<primitives:ColorSlider
|
||||
x:Name="ColorSpectrumThirdComponentSlider"
|
||||
Grid.Column="0"
|
||||
Margin="0,0,12,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="Third Component"
|
||||
ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
|
||||
ColorModel="Hsva"
|
||||
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
|
||||
IsAlphaMaxForced="True"
|
||||
IsSaturationValueMaxForced="False"
|
||||
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
|
||||
Orientation="Vertical" />
|
||||
<primitives:ColorSpectrum
|
||||
x:Name="ColorSpectrum"
|
||||
Grid.Column="1"
|
||||
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}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="ColorSpectrumAlphaSlider"
|
||||
Grid.Column="2"
|
||||
Margin="12,0,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="Alpha Component"
|
||||
ColorComponent="Alpha"
|
||||
ColorModel="Hsva"
|
||||
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
Orientation="Vertical">
|
||||
<primitives:ColorSlider.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</primitives:ColorSlider.IsVisible>
|
||||
</primitives:ColorSlider>
|
||||
</Grid>
|
||||
</TabItem>
|
||||
<!-- Palette Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewPaletteIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<ListBox
|
||||
Margin="12"
|
||||
VerticalAlignment="Stretch"
|
||||
ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
|
||||
Items="{TemplateBinding PaletteColors}"
|
||||
SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
|
||||
Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
|
||||
UseLayoutRounding="False">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type Color}">
|
||||
<Border
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
|
||||
ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{Binding}" />
|
||||
</Border.Background>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
<ListBox.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
|
||||
</ItemsPanelTemplate>
|
||||
</ListBox.ItemsPanel>
|
||||
</ListBox>
|
||||
</TabItem>
|
||||
<!-- Components Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewComponentsIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<Grid
|
||||
Margin="12"
|
||||
ColumnDefinitions="Auto,*"
|
||||
RowDefinitions="Auto,24,1*,1*,1*,1*,12"
|
||||
Tag="{TemplateBinding ColorModel}">
|
||||
<Grid.Styles>
|
||||
<Style Selector="NumericUpDown /template/ TextBox">
|
||||
<Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
|
||||
</Style>
|
||||
<Style Selector="Grid[Tag=Rgba]">
|
||||
<Style Selector="^ NumericUpDown#Component1NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="R" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#Component2NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="G" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#Component3NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="B" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="A" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="Grid[Tag=Hsva]">
|
||||
<Style Selector="^ NumericUpDown#Component1NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="H" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#Component2NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="S" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#Component3NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="V" />
|
||||
</Style>
|
||||
<Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="A" />
|
||||
</Style>
|
||||
</Style>
|
||||
</Grid.Styles>
|
||||
<!-- Top color model & Hex input -->
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
ColumnDefinitions="1*,12,1*">
|
||||
<!-- RadioButtonGroup -->
|
||||
<Border
|
||||
Padding="2"
|
||||
Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
|
||||
CornerRadius="3">
|
||||
<Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
|
||||
<RadioButton
|
||||
x:Name="RgbRadioButton"
|
||||
Grid.Column="0"
|
||||
HorizontalContentAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="RGB"
|
||||
CornerRadius="3,0,0,3"
|
||||
IsChecked="{TemplateBinding ColorModel,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorModel.Rgba},
|
||||
Mode=TwoWay}"
|
||||
Theme="{DynamicResource ColorViewRadioButton}" />
|
||||
<RadioButton
|
||||
x:Name="HsvRadioButton"
|
||||
Grid.Column="1"
|
||||
HorizontalContentAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="HSV"
|
||||
CornerRadius="0,3,3,0"
|
||||
IsChecked="{TemplateBinding ColorModel,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorModel.Hsva},
|
||||
Mode=TwoWay}"
|
||||
Theme="{DynamicResource ColorViewRadioButton}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<TextBox
|
||||
x:Name="PART_HexTextBox"
|
||||
Grid.Column="2"
|
||||
Height="32"
|
||||
HorizontalAlignment="Stretch"
|
||||
AutomationProperties.Name="Hexadecimal Color"
|
||||
InnerLeftContent="#"
|
||||
IsVisible="{TemplateBinding IsHexInputVisible}"
|
||||
MaxLength="9" />
|
||||
</Grid>
|
||||
<!-- Color component editing controls -->
|
||||
<!-- Component 1 RGB:Red HSV:Hue -->
|
||||
<NumericUpDown
|
||||
x:Name="Component1NumericUpDown"
|
||||
Grid.Row="2"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component1Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component1Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component1Slider}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component1Slider"
|
||||
Grid.Row="2"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component1"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Component 2 RGB:Green HSV:Saturation -->
|
||||
<NumericUpDown
|
||||
x:Name="Component2NumericUpDown"
|
||||
Grid.Row="3"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component2Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component2Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component2Slider}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component2Slider"
|
||||
Grid.Row="3"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component2"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Component 3 RGB:Blue HSV:Value -->
|
||||
<NumericUpDown
|
||||
x:Name="Component3NumericUpDown"
|
||||
Grid.Row="4"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component3Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component3Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component3Slider}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component3Slider"
|
||||
Grid.Row="4"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component3"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Alpha Component -->
|
||||
<NumericUpDown
|
||||
x:Name="AlphaComponentNumericUpDown"
|
||||
Grid.Row="5"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
|
||||
Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=AlphaComponentSlider}">
|
||||
<NumericUpDown.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</NumericUpDown.IsVisible>
|
||||
</NumericUpDown>
|
||||
<primitives:ColorSlider
|
||||
x:Name="AlphaComponentSlider"
|
||||
Grid.Row="5"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Alpha"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1">
|
||||
<primitives:ColorSlider.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</primitives:ColorSlider.IsVisible>
|
||||
</primitives:ColorSlider>
|
||||
</Grid>
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
<!-- Previewer -->
|
||||
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
|
||||
<primitives:ColorPreviewer
|
||||
Grid.Row="1"
|
||||
Margin="12,-5,12,7"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
|
||||
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
|
||||
</Grid>
|
||||
</Flyout>
|
||||
</DropDownButton.Flyout>
|
||||
</DropDownButton>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
|
||||
</ResourceDictionary>
|
||||
119
src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
Normal file
119
src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
Normal file
@ -0,0 +1,119 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:converters="using:Avalonia.Controls.Converters"
|
||||
xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
|
||||
<!-- Add Resources Here -->
|
||||
<pc:AccentColorConverter x:Key="AccentColorConverter" />
|
||||
<converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
|
||||
<converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
|
||||
|
||||
<ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
|
||||
<Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ColorPreviewerCornerRadius}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ColorPreviewer}">
|
||||
<Panel>
|
||||
<!-- Preview color with accents to the left and right -->
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">
|
||||
<!-- Left accent colors -->
|
||||
<Grid
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
|
||||
Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
|
||||
VerticalAlignment="Center"
|
||||
ColumnDefinitions="*,*">
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
|
||||
<Border
|
||||
x:Name="PART_AccentDecrement2Border"
|
||||
Grid.Column="0"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource AccentColorConverter},
|
||||
ConverterParameter='-2'}"
|
||||
CornerRadius="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource LeftCornerRadiusFilterConverter}}"
|
||||
Tag="-2" />
|
||||
<Border
|
||||
x:Name="PART_AccentDecrement1Border"
|
||||
Grid.Column="1"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource AccentColorConverter},
|
||||
ConverterParameter='-1'}"
|
||||
Tag="-1" />
|
||||
</Grid>
|
||||
<!-- Right accent colors -->
|
||||
<Grid
|
||||
Grid.Column="2"
|
||||
Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
|
||||
Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
|
||||
VerticalAlignment="Center"
|
||||
ColumnDefinitions="*,*">
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
|
||||
<Border
|
||||
x:Name="PART_AccentIncrement1Border"
|
||||
Grid.Column="0"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource AccentColorConverter},
|
||||
ConverterParameter='1'}"
|
||||
Tag="1" />
|
||||
<Border
|
||||
x:Name="PART_AccentIncrement2Border"
|
||||
Grid.Column="1"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource AccentColorConverter},
|
||||
ConverterParameter='2'}"
|
||||
CornerRadius="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource RightCornerRadiusFilterConverter}}"
|
||||
Tag="2" />
|
||||
</Grid>
|
||||
<!-- Preview color: Must be last for drop shadow Z-index -->
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Margin="0,8"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Panel>
|
||||
<Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
<Border
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource ToBrushConverter}}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
</Panel>
|
||||
</Border>
|
||||
</Grid>
|
||||
<!-- Only preview color -->
|
||||
<Border
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
IsVisible="{TemplateBinding IsAccentColorsVisible,
|
||||
Converter={x:Static BoolConverters.Not}}">
|
||||
<Panel>
|
||||
<Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
<Border
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{TemplateBinding HsvColor,
|
||||
Converter={StaticResource ToBrushConverter}}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
</Panel>
|
||||
</Border>
|
||||
</Panel>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
220
src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
Normal file
220
src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
Normal file
@ -0,0 +1,220 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:converters="using:Avalonia.Controls.Converters">
|
||||
<!-- Add Resources Here -->
|
||||
|
||||
<converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
|
||||
<converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
|
||||
|
||||
<ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
|
||||
<Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
|
||||
<Setter Property="CornerRadius" Value="999" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="{x:Type ColorSlider}" TargetType="ColorSlider">
|
||||
<Style Selector="^:horizontal">
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
|
||||
<Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ColorSlider}">
|
||||
<Border
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Grid Margin="{TemplateBinding Padding}">
|
||||
<Rectangle
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Rectangle
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Fill="{TemplateBinding Background}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Track
|
||||
Name="PART_Track"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
|
||||
Maximum="{TemplateBinding Maximum}"
|
||||
Minimum="{TemplateBinding Minimum}"
|
||||
Orientation="Horizontal"
|
||||
Value="{TemplateBinding Value,
|
||||
Mode=TwoWay}">
|
||||
<Track.DecreaseButton>
|
||||
<RepeatButton
|
||||
Name="PART_DecreaseButton"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
Focusable="False">
|
||||
<RepeatButton.Template>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Name="FocusTarget"
|
||||
Margin="0,-8"
|
||||
Background="Transparent" />
|
||||
</ControlTemplate>
|
||||
</RepeatButton.Template>
|
||||
</RepeatButton>
|
||||
</Track.DecreaseButton>
|
||||
<Track.IncreaseButton>
|
||||
<RepeatButton
|
||||
Name="PART_IncreaseButton"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
Focusable="False">
|
||||
<RepeatButton.Template>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Name="FocusTarget"
|
||||
Margin="0,-8"
|
||||
Background="Transparent" />
|
||||
</ControlTemplate>
|
||||
</RepeatButton.Template>
|
||||
</RepeatButton>
|
||||
</Track.IncreaseButton>
|
||||
<Thumb
|
||||
Name="ColorSliderThumb"
|
||||
Width="16"
|
||||
Height="16"
|
||||
Margin="0"
|
||||
Padding="0"
|
||||
DataContext="{TemplateBinding Value}"
|
||||
Theme="{StaticResource ColorSliderThumbTheme}" />
|
||||
</Track>
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:vertical">
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
|
||||
<Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ColorSlider}">
|
||||
<Border
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Grid Margin="{TemplateBinding Padding}">
|
||||
<Rectangle
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Rectangle
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Fill="{TemplateBinding Background}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Track
|
||||
Name="PART_Track"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
|
||||
Maximum="{TemplateBinding Maximum}"
|
||||
Minimum="{TemplateBinding Minimum}"
|
||||
Orientation="Vertical"
|
||||
Value="{TemplateBinding Value,
|
||||
Mode=TwoWay}">
|
||||
<Track.DecreaseButton>
|
||||
<RepeatButton
|
||||
Name="PART_DecreaseButton"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
Focusable="False">
|
||||
<RepeatButton.Template>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Name="FocusTarget"
|
||||
Margin="0,-8"
|
||||
Background="Transparent" />
|
||||
</ControlTemplate>
|
||||
</RepeatButton.Template>
|
||||
</RepeatButton>
|
||||
</Track.DecreaseButton>
|
||||
<Track.IncreaseButton>
|
||||
<RepeatButton
|
||||
Name="PART_IncreaseButton"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
Focusable="False">
|
||||
<RepeatButton.Template>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Name="FocusTarget"
|
||||
Margin="0,-8"
|
||||
Background="Transparent" />
|
||||
</ControlTemplate>
|
||||
</RepeatButton.Template>
|
||||
</RepeatButton>
|
||||
</Track.IncreaseButton>
|
||||
<Thumb
|
||||
Name="ColorSliderThumb"
|
||||
Width="{TemplateBinding Width}"
|
||||
Height="{TemplateBinding Width}"
|
||||
Margin="0"
|
||||
Padding="0"
|
||||
DataContext="{TemplateBinding Value}"
|
||||
Theme="{StaticResource ColorSliderThumbTheme}" />
|
||||
</Track>
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<!-- Selector/Thumb Color -->
|
||||
<Style Selector="^:pointerover /template/ Thumb#ColorSliderThumb">
|
||||
<Setter Property="Opacity" Value="0.75" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover:dark-selector /template/ Thumb#ColorSliderThumb">
|
||||
<Setter Property="Opacity" Value="0.7" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover:light-selector /template/ Thumb#ColorSliderThumb">
|
||||
<Setter Property="Opacity" Value="0.8" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource ColorSliderLightBorderBrush}" />
|
||||
</Style>
|
||||
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
166
src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
Normal file
166
src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
Normal file
@ -0,0 +1,166 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Avalonia.Controls"
|
||||
xmlns:converters="using:Avalonia.Controls.Converters">
|
||||
<!-- Add Resources Here -->
|
||||
<converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
|
||||
<converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
|
||||
<converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
|
||||
|
||||
|
||||
<ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
|
||||
<Setter Property="CornerRadius" Value="6" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="{x:Type ColorSpectrum}">
|
||||
<Panel
|
||||
x:Name="PART_LayoutRoot"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch">
|
||||
<Panel
|
||||
x:Name="PART_SizingPanel"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
ClipToBounds="True">
|
||||
<Rectangle
|
||||
x:Name="PART_SpectrumRectangle"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Rectangle
|
||||
x:Name="PART_SpectrumOverlayRectangle"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Ellipse
|
||||
x:Name="PART_SpectrumEllipse"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
|
||||
<Ellipse
|
||||
x:Name="PART_SpectrumOverlayEllipse"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
|
||||
<Canvas
|
||||
x:Name="PART_InputTarget"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent">
|
||||
<!-- Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers -->
|
||||
<Panel
|
||||
x:Name="PART_SelectionEllipsePanel"
|
||||
ToolTip.Placement="Top"
|
||||
ToolTip.VerticalOffset="-10">
|
||||
<Ellipse
|
||||
x:Name="FocusEllipse"
|
||||
Margin="-2"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
StrokeThickness="2" />
|
||||
<Ellipse
|
||||
x:Name="SelectionEllipse"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
StrokeThickness="2" />
|
||||
<ToolTip.Tip>
|
||||
<!-- Set in code-behind -->
|
||||
</ToolTip.Tip>
|
||||
</Panel>
|
||||
</Canvas>
|
||||
<Rectangle
|
||||
x:Name="BorderRectangle"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
|
||||
RadiusX="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource TopLeftCornerRadiusConverter}}"
|
||||
RadiusY="{TemplateBinding CornerRadius,
|
||||
Converter={StaticResource BottomRightCornerRadiusConverter}}" />
|
||||
<Ellipse
|
||||
x:Name="BorderEllipse"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
IsVisible="{TemplateBinding Shape,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
|
||||
</Panel>
|
||||
</Panel>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
|
||||
<!-- Normal -->
|
||||
<!-- Separating this allows easier customization in applications -->
|
||||
<Style Selector="^ /template/ Ellipse#BorderEllipse, ^ /template/ Rectangle#BorderRectangle">
|
||||
<Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
|
||||
<Setter Property="StrokeThickness" Value="1" />
|
||||
</Style>
|
||||
|
||||
<!-- Focus -->
|
||||
<Style Selector="^ /template/ Ellipse#FocusEllipse">
|
||||
<Setter Property="IsVisible" Value="False" />
|
||||
</Style>
|
||||
<Style Selector="^:focus-visible /template/ Ellipse#FocusEllipse">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
</Style>
|
||||
|
||||
<!-- Selector Color -->
|
||||
<Style Selector="^ /template/ Ellipse#FocusEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ Ellipse#SelectionEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
|
||||
<Setter Property="Opacity" Value="0.7" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover:light-selector /template/ Ellipse#SelectionEllipse">
|
||||
<Setter Property="Opacity" Value="0.8" />
|
||||
</Style>
|
||||
|
||||
<!-- Selector Size -->
|
||||
<Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
|
||||
<Setter Property="Width" Value="16" />
|
||||
<Setter Property="Height" Value="16" />
|
||||
</Style>
|
||||
<Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
|
||||
<Setter Property="Width" Value="48" />
|
||||
<Setter Property="Height" Value="48" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
558
src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
Normal file
558
src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
Normal file
@ -0,0 +1,558 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Avalonia.Controls"
|
||||
xmlns:converters="using:Avalonia.Controls.Converters"
|
||||
xmlns:globalization="using:System.Globalization"
|
||||
xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
|
||||
xmlns:primitives="using:Avalonia.Controls.Primitives">
|
||||
<!-- 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" />
|
||||
<globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
|
||||
|
||||
<VisualBrush
|
||||
x:Key="ColorControlCheckeredBackgroundBrush"
|
||||
DestinationRect="0,0,8,8"
|
||||
Stretch="Uniform"
|
||||
TileMode="Tile">
|
||||
<VisualBrush.Visual>
|
||||
<Image Width="8" Height="8">
|
||||
<Image.Source>
|
||||
<DrawingImage>
|
||||
<DrawingImage.Drawing>
|
||||
<DrawingGroup>
|
||||
<GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
|
||||
<GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
|
||||
</DrawingGroup>
|
||||
</DrawingImage.Drawing>
|
||||
</DrawingImage>
|
||||
</Image.Source>
|
||||
</Image>
|
||||
</VisualBrush.Visual>
|
||||
</VisualBrush>
|
||||
|
||||
<ControlTheme x:Key="ColorViewPaletteListBoxTheme" TargetType="ListBox">
|
||||
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
|
||||
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="ListBox">
|
||||
<Border
|
||||
Name="border"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
ClipToBounds="{TemplateBinding ClipToBounds}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<ScrollViewer
|
||||
Name="PART_ScrollViewer"
|
||||
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
|
||||
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
|
||||
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
|
||||
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
|
||||
<ItemsPresenter
|
||||
Name="PART_ItemsPresenter"
|
||||
Margin="{TemplateBinding Padding}"
|
||||
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||
</ScrollViewer>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="ColorViewPaletteListBoxItemTheme" TargetType="ListBoxItem">
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="Padding" Value="0" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Stretch" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ListBoxItem}">
|
||||
<Grid UseLayoutRounding="False">
|
||||
<ContentPresenter
|
||||
Name="PART_ContentPresenter"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
<Rectangle
|
||||
x:Name="BorderRectangle"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
IsHitTestVisible="False"
|
||||
StrokeThickness="1" />
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^ /template/ Rectangle#BorderRectangle">
|
||||
<Setter Property="Stroke" Value="Transparent" />
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
</Style>
|
||||
|
||||
<Style x:DataType="Color" Selector="^:pointerover /template/ Rectangle#BorderRectangle">
|
||||
<Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
|
||||
<Setter Property="Opacity" Value="0.5" />
|
||||
</Style>
|
||||
|
||||
<Style x:DataType="Color" Selector="^:selected /template/ Rectangle#BorderRectangle">
|
||||
<Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
|
||||
<Setter Property="RadioButton.Cursor" Value="Hand" />
|
||||
<Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
|
||||
<Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
|
||||
<Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
|
||||
<Setter Property="RadioButton.Template">
|
||||
<ControlTemplate TargetType="RadioButton">
|
||||
<ContentPresenter
|
||||
x:Name="PART_ContentPresenter"
|
||||
Margin="{TemplateBinding Margin}"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
RecognizesAccessKey="True"
|
||||
TextElement.FontSize="{TemplateBinding FontSize}"
|
||||
TextElement.FontWeight="{TemplateBinding FontWeight}"
|
||||
UseLayoutRounding="False" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:checked">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
|
||||
<Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPointeroverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPressedBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^:unchecked">
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPointeroverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPressedBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
|
||||
<Setter Property="ColorView.Width" Value="300" />
|
||||
<Setter Property="ColorView.Height" Value="300" />
|
||||
<Setter Property="ColorView.Palette">
|
||||
<controls:FluentColorPalette />
|
||||
</Setter>
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="{x:Type ColorView}">
|
||||
<Grid RowDefinitions="*,Auto">
|
||||
<!-- Backgrounds -->
|
||||
<!-- TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}" -->
|
||||
<Border
|
||||
x:Name="ContentBackgroundBorder"
|
||||
Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
Height="{TemplateBinding Height}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="{DynamicResource ColorViewContentBackgroundBrush}"
|
||||
BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
|
||||
BorderThickness="0,1,0,0"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
|
||||
<TabControl
|
||||
x:Name="PART_TabControl"
|
||||
Grid.Row="0"
|
||||
Padding="0"
|
||||
VerticalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
|
||||
<TabControl.Styles>
|
||||
<Style Selector="TabItem">
|
||||
<Setter Property="MinHeight" Value="32" />
|
||||
</Style>
|
||||
<Style Selector="TabItem:selected">
|
||||
<Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
|
||||
</Style>
|
||||
</TabControl.Styles>
|
||||
<TabControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Columns="0" Rows="1" />
|
||||
</ItemsPanelTemplate>
|
||||
</TabControl.ItemsPanel>
|
||||
<!-- Spectrum Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewSpectrumIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<Grid Margin="12" RowDefinitions="*">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" MinWidth="32" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" MinWidth="32" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<primitives:ColorSlider
|
||||
x:Name="ColorSpectrumThirdComponentSlider"
|
||||
Grid.Column="0"
|
||||
Margin="0,0,12,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="Third Component"
|
||||
ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
|
||||
ColorModel="Hsva"
|
||||
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
|
||||
IsAlphaMaxForced="True"
|
||||
IsSaturationValueMaxForced="False"
|
||||
IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
|
||||
Orientation="Vertical" />
|
||||
<primitives:ColorSpectrum
|
||||
x:Name="ColorSpectrum"
|
||||
Grid.Column="1"
|
||||
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}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="ColorSpectrumAlphaSlider"
|
||||
Grid.Column="2"
|
||||
Margin="12,0,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="Alpha Component"
|
||||
ColorComponent="Alpha"
|
||||
ColorModel="Hsva"
|
||||
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
Orientation="Vertical">
|
||||
<primitives:ColorSlider.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</primitives:ColorSlider.IsVisible>
|
||||
</primitives:ColorSlider>
|
||||
</Grid>
|
||||
</TabItem>
|
||||
<!-- Palette Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewPaletteIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<ListBox
|
||||
Margin="12"
|
||||
VerticalAlignment="Stretch"
|
||||
ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
|
||||
Items="{TemplateBinding PaletteColors}"
|
||||
SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
|
||||
Theme="{StaticResource ColorViewPaletteListBoxTheme}"
|
||||
UseLayoutRounding="False">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type Color}">
|
||||
<Border
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
|
||||
ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{Binding}" />
|
||||
</Border.Background>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
<ListBox.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
|
||||
</ItemsPanelTemplate>
|
||||
</ListBox.ItemsPanel>
|
||||
</ListBox>
|
||||
</TabItem>
|
||||
<!-- Components Tab -->
|
||||
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
|
||||
<TabItem.Header>
|
||||
<Border Height="{DynamicResource ColorViewTabStripHeight}">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ColorViewComponentsIconGlyph}"
|
||||
Foreground="{Binding $parent[TabItem].Foreground}" />
|
||||
</Border>
|
||||
</TabItem.Header>
|
||||
<Grid
|
||||
Margin="12"
|
||||
ColumnDefinitions="Auto,*"
|
||||
RowDefinitions="Auto,24,1*,1*,1*,1*,12">
|
||||
<Grid.Styles>
|
||||
<Style Selector="NumericUpDown /template/ TextBox">
|
||||
<Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
|
||||
</Style>
|
||||
</Grid.Styles>
|
||||
<!-- Top color model & Hex input -->
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
ColumnDefinitions="1*,12,1*">
|
||||
<!-- RadioButtonGroup -->
|
||||
<Border
|
||||
Padding="2"
|
||||
Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
|
||||
CornerRadius="3">
|
||||
<Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
|
||||
<RadioButton
|
||||
x:Name="RgbRadioButton"
|
||||
Grid.Column="0"
|
||||
HorizontalContentAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="RGB"
|
||||
CornerRadius="3,0,0,3"
|
||||
IsChecked="{TemplateBinding ColorModel,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorModel.Rgba},
|
||||
Mode=TwoWay}"
|
||||
Theme="{DynamicResource ColorViewRadioButton}" />
|
||||
<RadioButton
|
||||
x:Name="HsvRadioButton"
|
||||
Grid.Column="1"
|
||||
HorizontalContentAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="HSV"
|
||||
CornerRadius="0,3,3,0"
|
||||
IsChecked="{TemplateBinding ColorModel,
|
||||
Converter={StaticResource EnumToBoolConverter},
|
||||
ConverterParameter={x:Static controls:ColorModel.Hsva},
|
||||
Mode=TwoWay}"
|
||||
Theme="{DynamicResource ColorViewRadioButton}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<TextBox
|
||||
x:Name="PART_HexTextBox"
|
||||
Grid.Column="2"
|
||||
Height="32"
|
||||
HorizontalAlignment="Stretch"
|
||||
AutomationProperties.Name="Hexadecimal Color"
|
||||
InnerLeftContent="#"
|
||||
IsVisible="{TemplateBinding IsHexInputVisible}"
|
||||
MaxLength="9" />
|
||||
</Grid>
|
||||
<!-- Color component editing controls -->
|
||||
<!-- Component 1 RGB:Red HSV:Hue -->
|
||||
<NumericUpDown
|
||||
x:Name="Component1NumericUpDown"
|
||||
Grid.Row="2"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component1Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component1Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component1Slider}">
|
||||
<NumericUpDown.Styles>
|
||||
<Style Selector="NumericUpDown /template/ TextBox">
|
||||
<Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
|
||||
</Style>
|
||||
</NumericUpDown.Styles>
|
||||
</NumericUpDown>
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component1Slider"
|
||||
Grid.Row="2"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component1"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Component 2 RGB:Green HSV:Saturation -->
|
||||
<NumericUpDown
|
||||
x:Name="Component2NumericUpDown"
|
||||
Grid.Row="3"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component2Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component2Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component2Slider}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component2Slider"
|
||||
Grid.Row="3"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component2"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Component 3 RGB:Blue HSV:Value -->
|
||||
<NumericUpDown
|
||||
x:Name="Component3NumericUpDown"
|
||||
Grid.Row="4"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsVisible="{TemplateBinding IsComponentTextInputVisible}"
|
||||
Maximum="{Binding Maximum, ElementName=Component3Slider}"
|
||||
Minimum="{Binding Minimum, ElementName=Component3Slider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=Component3Slider}" />
|
||||
<primitives:ColorSlider
|
||||
x:Name="Component3Slider"
|
||||
Grid.Row="4"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Component3"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
IsVisible="{TemplateBinding IsComponentSliderVisible}"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1" />
|
||||
<!-- Alpha Component -->
|
||||
<NumericUpDown
|
||||
x:Name="AlphaComponentNumericUpDown"
|
||||
Grid.Row="5"
|
||||
Grid.Column="0"
|
||||
Width="{DynamicResource ColorViewNumericUpDownWidth}"
|
||||
Margin="0,0,12,0"
|
||||
VerticalAlignment="Center"
|
||||
AllowSpin="True"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
|
||||
Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
|
||||
NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
|
||||
ShowButtonSpinner="False"
|
||||
Value="{Binding Value, ElementName=AlphaComponentSlider}">
|
||||
<NumericUpDown.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</NumericUpDown.IsVisible>
|
||||
</NumericUpDown>
|
||||
<primitives:ColorSlider
|
||||
x:Name="AlphaComponentSlider"
|
||||
Grid.Row="5"
|
||||
Grid.Column="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
ColorComponent="Alpha"
|
||||
ColorModel="{TemplateBinding ColorModel,
|
||||
Mode=OneWay}"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsEnabled="{TemplateBinding IsAlphaEnabled}"
|
||||
IsRoundingEnabled="True"
|
||||
IsSnapToTickEnabled="True"
|
||||
Orientation="Horizontal"
|
||||
TickFrequency="1">
|
||||
<primitives:ColorSlider.IsVisible>
|
||||
<MultiBinding Converter="{x:Static BoolConverters.And}">
|
||||
<Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
</MultiBinding>
|
||||
</primitives:ColorSlider.IsVisible>
|
||||
</primitives:ColorSlider>
|
||||
</Grid>
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
<!-- Previewer -->
|
||||
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
|
||||
<primitives:ColorPreviewer
|
||||
Grid.Row="1"
|
||||
Margin="12,-5,12,7"
|
||||
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
|
||||
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^[ColorModel=Rgba]">
|
||||
<Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="R" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="G" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="B" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="A" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^[ColorModel=Hsva]">
|
||||
<Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="H" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="S" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="V" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
|
||||
<Setter Property="NumericUpDown.Tag" Value="A" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
43
src/Semi.Avalonia.ColorPicker/Dark.axaml
Normal file
43
src/Semi.Avalonia.ColorPicker/Dark.axaml
Normal file
@ -0,0 +1,43 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
|
||||
<FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
|
||||
<Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
|
||||
<x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
|
||||
|
||||
<SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
|
||||
|
||||
<PathGeometry x:Key="ColorViewSpectrumIconGlyph">
|
||||
M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
|
||||
</PathGeometry>
|
||||
<PathGeometry x:Key="ColorViewPaletteIconGlyph">
|
||||
M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
|
||||
</PathGeometry>
|
||||
<PathGeometry x:Key="ColorViewComponentsIconGlyph">
|
||||
M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
|
||||
</PathGeometry>
|
||||
|
||||
<SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
|
||||
<SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
|
||||
|
||||
<x:Double x:Key="ColorSliderWidth">16</x:Double>
|
||||
<CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
|
||||
<Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
|
||||
|
||||
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
|
||||
|
||||
<x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
|
||||
<x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
|
||||
<x:Double x:Key="ColorPreviewerHeight">48</x:Double>
|
||||
<CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
|
||||
|
||||
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
|
||||
</ResourceDictionary>
|
||||
14
src/Semi.Avalonia.ColorPicker/Index.axaml
Normal file
14
src/Semi.Avalonia.ColorPicker/Index.axaml
Normal file
@ -0,0 +1,14 @@
|
||||
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<Styles.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.ThemeDictionaries>
|
||||
<ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
|
||||
<ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
|
||||
</ResourceDictionary.ThemeDictionaries>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</Styles.Resources>
|
||||
</Styles>
|
||||
43
src/Semi.Avalonia.ColorPicker/Light.axaml
Normal file
43
src/Semi.Avalonia.ColorPicker/Light.axaml
Normal file
@ -0,0 +1,43 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
|
||||
<SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
|
||||
<FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
|
||||
<Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
|
||||
<x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
|
||||
|
||||
<SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
|
||||
|
||||
<PathGeometry x:Key="ColorViewSpectrumIconGlyph">
|
||||
M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
|
||||
</PathGeometry>
|
||||
<PathGeometry x:Key="ColorViewPaletteIconGlyph">
|
||||
M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
|
||||
</PathGeometry>
|
||||
<PathGeometry x:Key="ColorViewComponentsIconGlyph">
|
||||
M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
|
||||
</PathGeometry>
|
||||
|
||||
<SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
|
||||
<SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
|
||||
<SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
|
||||
|
||||
<x:Double x:Key="ColorSliderWidth">16</x:Double>
|
||||
<CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
|
||||
<Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
|
||||
|
||||
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
|
||||
|
||||
<x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
|
||||
<x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
|
||||
<x:Double x:Key="ColorPreviewerHeight">48</x:Double>
|
||||
<CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
|
||||
|
||||
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
|
||||
</ResourceDictionary>
|
||||
@ -0,0 +1,19 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
|
||||
<LangVersion>10</LangVersion>
|
||||
<Nullable>enable</Nullable>
|
||||
<Version>0.1.0-preview5</Version>
|
||||
<Title>Semi.Avalonia.ColorPicker</Title>
|
||||
<Authors>IRIHI Technology</Authors>
|
||||
<Description>Avalonia Theme inspired by Semi Design. </Description>
|
||||
<PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Avalonia" Version="11.0.0-preview5" />
|
||||
<PackageReference Include="Avalonia.Controls.ColorPicker" Version="11.0.0-preview5" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
@ -2,8 +2,9 @@
|
||||
<!-- Add Resources Here -->
|
||||
<ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
|
||||
<Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
|
||||
<Setter Property="NumericUpDown.Template">
|
||||
<ControlTemplate>
|
||||
<ControlTemplate TargetType="NumericUpDown">
|
||||
<ButtonSpinner
|
||||
Name="PART_Spinner"
|
||||
MinWidth="0"
|
||||
@ -14,13 +15,13 @@
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
|
||||
<TextBox
|
||||
Name="PART_TextBox"
|
||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
AcceptsReturn="False"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
FontSize="{TemplateBinding FontSize}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
IsReadOnly="{TemplateBinding IsReadOnly}"
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}">
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
|
||||
<ContentPresenter
|
||||
Grid.Column="0"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
|
||||
</ResourceDictionary>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
|
||||
</ResourceDictionary>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user