tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #8633 from robloo/colorpicker-controltheme-updates 

Add ColorPicker Default ControlThemes
pull/8657/head
Max Katz 4 years ago
committed by GitHub
parent
b17298b60d 6d706e0554
commit
e7124db116
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 285 additions and 278 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
  2. 346
      src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
  3. 94
      src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
  4. 76
      src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
  5. 20
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
  6. 4
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

23
src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
View File

@ -1,15 +1,14 @@
<Styles xmlns="https://github.com/avaloniaui" <ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:pc="using:Avalonia.Controls.Primitives.Converters" xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
x:CompileBindings="True"> x:CompileBindings="True">
<Styles.Resources> <pc:AccentColorConverter x:Key="AccentColorConverter" />
<pc:AccentColorConverter x:Key="AccentColorConverter" /> <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
<x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double> <x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
<x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
</Styles.Resources>
<Style Selector="ColorPreviewer"> <ControlTheme x:Key="{x:Type ColorPreviewer}"
TargetType="ColorPreviewer">
<Setter Property="Height" Value="70" /> <Setter Property="Height" Value="70" />
<Setter Property="CornerRadius" Value="0" /> <Setter Property="CornerRadius" Value="0" />
<Setter Property="Template"> <Setter Property="Template">
@ -97,6 +96,6 @@
</Panel> </Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </ControlTheme>
</Styles> </ResourceDictionary>

346
src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
View File

@ -1,188 +1,190 @@
<Styles xmlns="https://github.com/avaloniaui" <ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True"> x:CompileBindings="True">
<Style Selector="Thumb.ColorSliderThumbStyle"> <ControlTheme x:Key="ColorSliderThumbTheme"
<Setter Property="BorderThickness" Value="0" /> TargetType="Thumb">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="BorderThickness" Value="3" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate> <ControlTemplate>
<Border Background="{TemplateBinding Background}" <Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="10" /> CornerRadius="{TemplateBinding CornerRadius}" />
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
</Style> </ControlTheme>
<Style Selector="ColorSlider:horizontal"> <ControlTheme x:Key="{x:Type ColorSlider}"
<Setter Property="BorderThickness" Value="0" /> TargetType="ColorSlider">
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Height" Value="20" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorSlider}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid Margin="{TemplateBinding Padding}">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{StaticResource 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"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Horizontal">
<Track.DecreaseButton>
<RepeatButton Name="PART_DecreaseButton"
Background="Transparent"
Focusable="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="FocusTarget"
Background="Transparent"
Margin="0,-10" />
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_IncreaseButton"
Background="Transparent"
Focusable="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="FocusTarget"
Background="Transparent"
Margin="0,-10" />
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.IncreaseButton>
<Thumb Classes="ColorSliderThumbStyle"
Name="ColorSliderThumb"
Margin="0"
Padding="0"
DataContext="{TemplateBinding Value}"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Height}" />
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ColorSlider:vertical"> <Style Selector="^:horizontal">
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="10" /> <Setter Property="CornerRadius" Value="10" />
<Setter Property="Width" Value="20" /> <Setter Property="Height" Value="20" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorSlider}"> <ControlTemplate TargetType="{x:Type ColorSlider}">
<Border BorderThickness="{TemplateBinding BorderThickness}" <Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid Margin="{TemplateBinding Padding}"> <Grid Margin="{TemplateBinding Padding}">
<Rectangle HorizontalAlignment="Stretch" <Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Fill="{StaticResource ColorControlCheckeredBackgroundBrush}" Fill="{StaticResource ColorControlCheckeredBackgroundBrush}"
RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}" RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" /> RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Rectangle HorizontalAlignment="Stretch" <Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Fill="{TemplateBinding Background}" Fill="{TemplateBinding Background}"
RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}" RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" /> RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
<Track Name="PART_Track" <Track Name="PART_Track"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}" Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}" Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Vertical"> Orientation="Horizontal">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton Name="PART_DecreaseButton" <RepeatButton Name="PART_DecreaseButton"
Background="Transparent" Background="Transparent"
Focusable="False" Focusable="False"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"> VerticalAlignment="Stretch">
<RepeatButton.Template> <RepeatButton.Template>
<ControlTemplate> <ControlTemplate>
<Border Name="FocusTarget" <Border Name="FocusTarget"
Background="Transparent" Background="Transparent"
Margin="0,-10" /> Margin="0,-10" />
</ControlTemplate> </ControlTemplate>
</RepeatButton.Template> </RepeatButton.Template>
</RepeatButton> </RepeatButton>
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton Name="PART_IncreaseButton" <RepeatButton Name="PART_IncreaseButton"
Background="Transparent" Background="Transparent"
Focusable="False" Focusable="False"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"> VerticalAlignment="Stretch">
<RepeatButton.Template> <RepeatButton.Template>
<ControlTemplate> <ControlTemplate>
<Border Name="FocusTarget" <Border Name="FocusTarget"
Background="Transparent" Background="Transparent"
Margin="0,-10" /> Margin="0,-10" />
</ControlTemplate> </ControlTemplate>
</RepeatButton.Template> </RepeatButton.Template>
</RepeatButton> </RepeatButton>
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb Classes="ColorSliderThumbStyle" <Thumb Name="ColorSliderThumb"
Name="ColorSliderThumb" Theme="{StaticResource ColorSliderThumbTheme}"
Margin="0" Margin="0"
Padding="0" Padding="0"
DataContext="{TemplateBinding Value}" DataContext="{TemplateBinding Value}"
Height="{TemplateBinding Width}" Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" /> Width="{TemplateBinding Height}" />
</Track> </Track>
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<!-- Normal State --> <Style Selector="^:vertical">
<Style Selector="ColorSlider /template/ Thumb.ColorSliderThumbStyle"> <Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" /> <Setter Property="CornerRadius" Value="10" />
<Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" /> <Setter Property="Width" Value="20" />
<Setter Property="BorderThickness" Value="3" /> <Setter Property="Template">
</Style> <ControlTemplate TargetType="{x:Type ColorSlider}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid Margin="{TemplateBinding Padding}">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{StaticResource 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"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Vertical">
<Track.DecreaseButton>
<RepeatButton Name="PART_DecreaseButton"
Background="Transparent"
Focusable="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="FocusTarget"
Background="Transparent"
Margin="0,-10" />
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_IncreaseButton"
Background="Transparent"
Focusable="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="FocusTarget"
Background="Transparent"
Margin="0,-10" />
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.IncreaseButton>
<Thumb Name="ColorSliderThumb"
Theme="{StaticResource ColorSliderThumbTheme}"
Margin="0"
Padding="0"
DataContext="{TemplateBinding Value}"
Height="{TemplateBinding Width}"
Width="{TemplateBinding Width}" />
</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>
<!-- Selector/Thumb Color --> <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
<Style Selector="ColorSlider:pointerover /template/ Thumb.ColorSliderThumbStyle"> <Setter Property="BorderBrush" Value="Black" />
<Setter Property="Opacity" Value="0.75" /> </Style>
</Style> <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
<Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.ColorSliderThumbStyle"> <Setter Property="BorderBrush" Value="White" />
<Setter Property="Opacity" Value="0.7" /> </Style>
</Style>
<Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.ColorSliderThumbStyle">
<Setter Property="Opacity" Value="0.8" />
</Style>
<Style Selector="ColorSlider:dark-selector /template/ Thumb.ColorSliderThumbStyle"> </ControlTheme>
<Setter Property="BorderBrush" Value="Black" />
</Style>
<Style Selector="ColorSlider:light-selector /template/ Thumb.ColorSliderThumbStyle">
<Setter Property="BorderBrush" Value="White" />
</Style>
</Styles> </ResourceDictionary>

94
src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
View File

@ -1,9 +1,10 @@
<Styles xmlns="https://github.com/avaloniaui" <ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Avalonia.Controls" xmlns:controls="using:Avalonia.Controls"
x:CompileBindings="True"> x:CompileBindings="True">
<Style Selector="ColorSpectrum"> <ControlTheme x:Key="{x:Type ColorSpectrum}"
TargetType="ColorSpectrum">
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="{x:Type ColorSpectrum}"> <ControlTemplate TargetType="{x:Type ColorSpectrum}">
@ -79,50 +80,51 @@
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
</Style>
<!-- Normal --> <!-- Normal -->
<!-- Separating this allows easier customization in applications --> <!-- Separating this allows easier customization in applications -->
<Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse, <Style Selector="^ /template/ Ellipse#BorderEllipse,
ColorSpectrum /template/ Rectangle#BorderRectangle"> ^ /template/ Rectangle#BorderRectangle">
<Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" /> <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
<Setter Property="StrokeThickness" Value="1" /> <Setter Property="StrokeThickness" Value="1" />
</Style> </Style>
<!-- Focus --> <!-- Focus -->
<Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse"> <Style Selector="^ /template/ Ellipse#FocusEllipse">
<Setter Property="IsVisible" Value="False" /> <Setter Property="IsVisible" Value="False" />
</Style> </Style>
<Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse"> <Style Selector="^:focus-visible /template/ Ellipse#FocusEllipse">
<Setter Property="IsVisible" Value="True" /> <Setter Property="IsVisible" Value="True" />
</Style> </Style>
<!-- Selector Color --> <!-- Selector Color -->
<Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse"> <Style Selector="^ /template/ Ellipse#FocusEllipse">
<Setter Property="Stroke" Value="White" /> <Setter Property="Stroke" Value="White" />
</Style> </Style>
<Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse"> <Style Selector="^ /template/ Ellipse#SelectionEllipse">
<Setter Property="Stroke" Value="Black" /> <Setter Property="Stroke" Value="Black" />
</Style> </Style>
<Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse"> <Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
<Setter Property="Stroke" Value="Black" /> <Setter Property="Stroke" Value="Black" />
</Style> </Style>
<Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse"> <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
<Setter Property="Stroke" Value="White" /> <Setter Property="Stroke" Value="White" />
</Style> </Style>
<Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse"> <Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
<Setter Property="Opacity" Value="0.8" /> <Setter Property="Opacity" Value="0.8" />
</Style> </Style>
<!-- Selector Size --> <!-- Selector Size -->
<Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel"> <Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
<Setter Property="Width" Value="16" /> <Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" /> <Setter Property="Height" Value="16" />
</Style> </Style>
<Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel"> <Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
<Setter Property="Width" Value="48" /> <Setter Property="Width" Value="48" />
<Setter Property="Height" Value="48" /> <Setter Property="Height" Value="48" />
</Style> </Style>
</Styles> </ControlTheme>
</ResourceDictionary>

76
src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
View File

@ -3,42 +3,48 @@
xmlns:converters="using:Avalonia.Controls.Converters"> xmlns:converters="using:Avalonia.Controls.Converters">
<Styles.Resources> <Styles.Resources>
<!-- Shared Resources --> <ResourceDictionary>
<VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
TileMode="Tile" <!-- Shared Resources -->
Stretch="Uniform" <VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
DestinationRect="0,0,8,8"> TileMode="Tile"
<VisualBrush.Visual> Stretch="Uniform"
<DrawingPresenter Width="8" DestinationRect="0,0,8,8">
Height="8"> <VisualBrush.Visual>
<DrawingGroup> <DrawingPresenter Width="8"
<GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z" Height="8">
Brush="Transparent" /> <DrawingGroup>
<GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
Brush="#19808080" /> Brush="Transparent" />
</DrawingGroup> <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
</DrawingPresenter> Brush="#19808080" />
</VisualBrush.Visual> </DrawingGroup>
</VisualBrush> </DrawingPresenter>
</VisualBrush.Visual>
<!-- Shared Converters --> </VisualBrush>
<converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
<converters:ToBrushConverter x:Key="ToBrushConverter" /> <!-- Shared Converters -->
<converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/> <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
<converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/> <converters:ToBrushConverter x:Key="ToBrushConverter" />
<converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/> <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
<converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/> <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
<converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" /> <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
<converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" /> <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
</Styles.Resources> <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
<converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
<!-- Primitives --> <ResourceDictionary.MergedDictionaries>
<StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
<StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
<StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
<!-- Controls --> <!-- Primitives -->
<!-- Note the ColorPicker and ColorView are unsupported in the default theme --> <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
<!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. --> <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
<ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
<!-- Controls -->
<!-- Note the ColorPicker and ColorView are unsupported in the default theme -->
<!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. -->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Styles.Resources>
</Styles> </Styles>

20
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
View File

@ -3,9 +3,6 @@
xmlns:controls="using:Avalonia.Controls" xmlns:controls="using:Avalonia.Controls"
x:CompileBindings="True"> x:CompileBindings="True">
<!-- This must follow OverlayCornerRadius -->
<CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
<ControlTheme x:Key="{x:Type ColorPicker}" <ControlTheme x:Key="{x:Type ColorPicker}"
TargetType="ColorPicker"> TargetType="ColorPicker">
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
@ -25,7 +22,7 @@
Padding="0,0,10,0" Padding="0,0,10,0"
UseLayoutRounding="False"> UseLayoutRounding="False">
<DropDownButton.Styles> <DropDownButton.Styles>
<Style Selector="FlyoutPresenter.NoPadding"> <Style Selector="FlyoutPresenter.nopadding">
<Setter Property="Padding" Value="0" /> <Setter Property="Padding" Value="0" />
</Style> </Style>
</DropDownButton.Styles> </DropDownButton.Styles>
@ -45,7 +42,7 @@
</Panel> </Panel>
</DropDownButton.Content> </DropDownButton.Content>
<DropDownButton.Flyout> <DropDownButton.Flyout>
<Flyout FlyoutPresenterClasses="NoPadding"> <Flyout FlyoutPresenterClasses="nopadding">
<ColorView x:Name="FlyoutColorView" <ColorView x:Name="FlyoutColorView"
Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@ -73,7 +70,12 @@
PaletteColors="{TemplateBinding PaletteColors}" PaletteColors="{TemplateBinding PaletteColors}"
PaletteColumnCount="{TemplateBinding PaletteColumnCount}" PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
Palette="{TemplateBinding Palette}" Palette="{TemplateBinding Palette}"
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" /> SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<ColorView.Resources>
<!-- This radius must follow OverlayCornerRadius -->
<CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">5,5,0,0</CornerRadius>
</ColorView.Resources>
</ColorView>
</Flyout> </Flyout>
</DropDownButton.Flyout> </DropDownButton.Flyout>
</DropDownButton> </DropDownButton>
@ -81,10 +83,4 @@
</Setter> </Setter>
</ControlTheme> </ControlTheme>
<!-- Adjust Background within Flyout -->
<!-- Note: This is implemented but there seems to be an issue and the selector can't match across the Flyout -->
<!--<Style Selector="ColorPicker /template/ ColorView#FlyoutColorView /template/ Border#TabBackgroundBorder">
<Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
</Style>-->
</ResourceDictionary> </ResourceDictionary>

4
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
View File

@ -77,6 +77,8 @@
17.7761 14 17.5 14H9.94999ZM7.5 16C6.67157 16 6 15.3284 6 14.5C6 13.6716 6.67157 13 7.5 17.7761 14 17.5 14H9.94999ZM7.5 16C6.67157 16 6 15.3284 6 14.5C6 13.6716 6.67157 13 7.5
13C8.32843 13 9 13.6716 9 14.5C9 15.3284 8.32843 16 7.5 16Z 13C8.32843 13 9 13.6716 9 14.5C9 15.3284 8.32843 16 7.5 16Z
</PathGeometry> </PathGeometry>
<!-- This radius should follow ControlCornerRadius -->
<CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">3</CornerRadius>
<ControlTheme x:Key="{x:Type ColorView}" <ControlTheme x:Key="{x:Type ColorView}"
TargetType="ColorView"> TargetType="ColorView">
@ -97,7 +99,7 @@
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Top" VerticalAlignment="Top"
Background="{DynamicResource SystemControlBackgroundBaseLowBrush}" Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
CornerRadius="{TemplateBinding CornerRadius}" /> CornerRadius="{DynamicResource ColorViewTabBackgroundCornerRadius}" />
<Border x:Name="ContentBackgroundBorder" <Border x:Name="ContentBackgroundBorder"
Grid.Row="0" Grid.Row="0"
Grid.RowSpan="2" Grid.RowSpan="2"

Write Preview
Loading…
Cancel
Save