feat: Add color picker themes.
This commit is contained in:
rabbitism
parent
ec33914f86
commit
52e57b14fd
@ -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/Themes/Index.axaml" />
|
<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
|
||||||
<StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
|
<StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
|
||||||
|
<StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
|
||||||
</Application.Styles>
|
</Application.Styles>
|
||||||
</Application>
|
</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;
|
||||||
using Avalonia.Controls;
|
using Avalonia.Controls;
|
||||||
using Avalonia.Markup.Xaml;
|
using Avalonia.Markup.Xaml;
|
||||||
|
using Avalonia.Media;
|
||||||
|
|
||||||
namespace Semi.Avalonia.Demo.Pages;
|
namespace Semi.Avalonia.Demo.Pages;
|
||||||
|
|
||||||
@ -15,4 +16,9 @@ public partial class DatePickerDemo : UserControl
|
|||||||
{
|
{
|
||||||
AvaloniaXamlLoader.Load(this);
|
AvaloniaXamlLoader.Load(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public override void Render(DrawingContext context)
|
||||||
|
{
|
||||||
|
base.Render(context);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -43,6 +43,7 @@
|
|||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<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.DataGrid\Semi.Avalonia.DataGrid.csproj" />
|
||||||
<ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
|
<ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|||||||
@ -39,6 +39,9 @@
|
|||||||
<TabItem Header="CheckBox">
|
<TabItem Header="CheckBox">
|
||||||
<pages:CheckBoxDemo />
|
<pages:CheckBoxDemo />
|
||||||
</TabItem>
|
</TabItem>
|
||||||
|
<TabItem Header="ColorPicker">
|
||||||
|
<pages:ColorPickerDemo />
|
||||||
|
</TabItem>
|
||||||
<TabItem Header="ComboBox">
|
<TabItem Header="ComboBox">
|
||||||
<pages:ComboBoxDemo />
|
<pages:ComboBoxDemo />
|
||||||
</TabItem>
|
</TabItem>
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
|
||||||
<!-- Add Resources Here -->
|
|
||||||
</ResourceDictionary>
|
|
||||||
440
src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
Normal file
440
src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
Normal file
@ -0,0 +1,440 @@
|
|||||||
|
<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
|
||||||
|
Width="300"
|
||||||
|
Height="300"
|
||||||
|
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="{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">
|
||||||
|
<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>
|
||||||
|
</Flyout>
|
||||||
|
</DropDownButton.Flyout>
|
||||||
|
</DropDownButton>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
</ControlTheme>
|
||||||
|
|
||||||
|
</ResourceDictionary>
|
||||||
118
src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
Normal file
118
src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<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="40" />
|
||||||
|
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
|
||||||
|
<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"
|
||||||
|
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>
|
||||||
@ -1,3 +1,14 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
</ResourceDictionary>
|
<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>
|
||||||
|
|||||||
@ -1,3 +1,41 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<!-- Add Resources Here -->
|
<!-- 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>
|
||||||
|
|
||||||
|
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
<TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
|
<TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
|
||||||
<LangVersion>10</LangVersion>
|
<LangVersion>10</LangVersion>
|
||||||
<Nullable>enable</Nullable>
|
<Nullable>enable</Nullable>
|
||||||
|
<Version>0.1.0-preview5</Version>
|
||||||
<Title>Semi.Avalonia.ColorPicker</Title>
|
<Title>Semi.Avalonia.ColorPicker</Title>
|
||||||
<Authors>IRIHI Technology</Authors>
|
<Authors>IRIHI Technology</Authors>
|
||||||
<Description>Avalonia Theme inspired by Semi Design. </Description>
|
<Description>Avalonia Theme inspired by Semi Design. </Description>
|
||||||
|
|||||||
@ -2,8 +2,9 @@
|
|||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
<ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
|
<ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
|
||||||
<Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
|
<Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
|
||||||
|
<Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
|
||||||
<Setter Property="NumericUpDown.Template">
|
<Setter Property="NumericUpDown.Template">
|
||||||
<ControlTemplate>
|
<ControlTemplate TargetType="NumericUpDown">
|
||||||
<ButtonSpinner
|
<ButtonSpinner
|
||||||
Name="PART_Spinner"
|
Name="PART_Spinner"
|
||||||
MinWidth="0"
|
MinWidth="0"
|
||||||
@ -14,13 +15,13 @@
|
|||||||
BorderBrush="{TemplateBinding BorderBrush}"
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
BorderThickness="{TemplateBinding BorderThickness}"
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
|
ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
|
||||||
CornerRadius="{TemplateBinding CornerRadius}"
|
|
||||||
ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
|
ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
|
||||||
<TextBox
|
<TextBox
|
||||||
Name="PART_TextBox"
|
Name="PART_TextBox"
|
||||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||||
AcceptsReturn="False"
|
AcceptsReturn="False"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}"
|
||||||
FontSize="{TemplateBinding FontSize}"
|
FontSize="{TemplateBinding FontSize}"
|
||||||
Foreground="{TemplateBinding Foreground}"
|
Foreground="{TemplateBinding Foreground}"
|
||||||
IsReadOnly="{TemplateBinding IsReadOnly}"
|
IsReadOnly="{TemplateBinding IsReadOnly}"
|
||||||
|
|||||||
@ -108,7 +108,7 @@
|
|||||||
Background="{TemplateBinding Background}"
|
Background="{TemplateBinding Background}"
|
||||||
BorderBrush="{TemplateBinding BorderBrush}"
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
BorderThickness="{TemplateBinding BorderThickness}"
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}">
|
CornerRadius="{TemplateBinding CornerRadius}">
|
||||||
<Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
|
<Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
|
||||||
<ContentPresenter
|
<ContentPresenter
|
||||||
Grid.Column="0"
|
Grid.Column="0"
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
|
<CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
|
<CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user