Browse Source

Adjust ColorPicker tab background corner radius

pull/8633/head
robloo 4 years ago
parent
commit
bdd451cdf9
  1. 15
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
  2. 8
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

15
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml

@ -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,8 +42,10 @@
</Panel> </Panel>
</DropDownButton.Content> </DropDownButton.Content>
<DropDownButton.Flyout> <DropDownButton.Flyout>
<Flyout FlyoutPresenterClasses="NoPadding"> <Flyout FlyoutPresenterClasses="nopadding"
Placement="Bottom">
<ColorView x:Name="FlyoutColorView" <ColorView x:Name="FlyoutColorView"
Classes="topoverlay"
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}"
ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}" ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
@ -81,10 +80,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>

8
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

@ -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 must follow OverlayCornerRadius -->
<CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
<ControlTheme x:Key="{x:Type ColorView}" <ControlTheme x:Key="{x:Type ColorView}"
TargetType="ColorView"> TargetType="ColorView">
@ -644,6 +646,12 @@
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<!-- Special style used to customize the top tab area corner radius -->
<Style Selector="^.topoverlay /template/ Border#TabBackgroundBorder">
<Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
</Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

Loading…
Cancel
Save