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

Improve ColorPreviewer margins with drop shadow 

This sets ClipToBounds to false for the control which allows the drop shadow to fully draw above/below the control itself. Doing this removes the need to adjust margins in almost all places. This is a big simplification to margin calculation and removes strange negative values.
pull/11264/head
robloo 3 years ago
parent
0b952ea5e0
commit
31a1e514fa
7 changed files with 20 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      samples/ControlCatalog/Pages/ColorPickerPage.xaml
  2. 4
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
  3. 13
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
  4. 4
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
  5. 4
      src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
  6. 13
      src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml
  7. 4
      src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml

3
samples/ControlCatalog/Pages/ColorPickerPage.xaml
View File

@ -103,7 +103,8 @@
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />-->
<ColorPreviewer Grid.Row="8"
IsAccentColorsVisible="False"
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}"
Margin="0,2,0,0" />
</Grid>
</Grid>
</UserControl>

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

@ -490,11 +490,11 @@
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<!-- Note that the drop shadow is allowed to extend past the control bounds -->
<primitives:ColorPreviewer Grid.Row="1"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
Margin="12,-5,12,7"
Margin="12,0,12,12"
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
</Grid>
</Flyout>

13
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
View File

@ -8,7 +8,9 @@
<ControlTheme x:Key="{x:Type ColorPreviewer}"
TargetType="ColorPreviewer">
<Setter Property="Height" Value="70" />
<Setter Property="Height" Value="50" />
<!-- The preview color drop shadow is allowed to extend outside the control bounds -->
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorPreviewer}">
@ -21,7 +23,6 @@
Height="{StaticResource ColorPreviewerAccentSectionHeight}"
Width="{StaticResource ColorPreviewerAccentSectionWidth}"
ColumnDefinitions="*,*"
Margin="0,0,-10,0"
VerticalAlignment="Center">
<Border Grid.Column="0"
Grid.ColumnSpan="2"
@ -43,7 +44,6 @@
Height="{StaticResource ColorPreviewerAccentSectionHeight}"
Width="{StaticResource ColorPreviewerAccentSectionWidth}"
ColumnDefinitions="*,*"
Margin="-10,0,0,0"
VerticalAlignment="Center">
<Border Grid.Column="0"
Grid.ColumnSpan="2"
@ -64,10 +64,8 @@
<Border Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
BoxShadow="0 0 10 2 #BF000000"
CornerRadius="{TemplateBinding CornerRadius}"
Margin="10">
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
@ -82,8 +80,7 @@
<Border CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,10">
VerticalAlignment="Stretch">
<Panel>
<Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />

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

@ -737,11 +737,11 @@
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<!-- Note that the drop shadow is allowed to extend past the control bounds -->
<primitives:ColorPreviewer Grid.Row="1"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
Margin="12,-5,12,7"
Margin="12,0,12,12"
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
</Grid>
</ControlTemplate>

4
src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
View File

@ -489,11 +489,11 @@
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<!-- Note that the drop shadow is allowed to extend past the control bounds -->
<primitives:ColorPreviewer Grid.Row="1"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
Margin="12,-5,12,7"
Margin="12,0,12,12"
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
</Grid>
</Flyout>

13
src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml
View File

@ -8,7 +8,9 @@
<ControlTheme x:Key="{x:Type ColorPreviewer}"
TargetType="ColorPreviewer">
<Setter Property="Height" Value="70" />
<Setter Property="Height" Value="50" />
<!-- The preview color drop shadow is allowed to extend outside the control bounds -->
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type ColorPreviewer}">
@ -21,7 +23,6 @@
Height="{StaticResource ColorPreviewerAccentSectionHeight}"
Width="{StaticResource ColorPreviewerAccentSectionWidth}"
ColumnDefinitions="*,*"
Margin="0,0,-10,0"
VerticalAlignment="Center">
<Border Grid.Column="0"
Grid.ColumnSpan="2"
@ -43,7 +44,6 @@
Height="{StaticResource ColorPreviewerAccentSectionHeight}"
Width="{StaticResource ColorPreviewerAccentSectionWidth}"
ColumnDefinitions="*,*"
Margin="-10,0,0,0"
VerticalAlignment="Center">
<Border Grid.Column="0"
Grid.ColumnSpan="2"
@ -64,10 +64,8 @@
<Border Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
BoxShadow="0 0 10 2 #BF000000"
CornerRadius="{TemplateBinding CornerRadius}"
Margin="10">
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
@ -82,8 +80,7 @@
<Border CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,10">
VerticalAlignment="Stretch">
<Panel>
<Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />

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

@ -699,11 +699,11 @@
</TabItem>
</TabControl>
<!-- Previewer -->
<!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
<!-- Note that the drop shadow is allowed to extend past the control bounds -->
<primitives:ColorPreviewer Grid.Row="1"
HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
Margin="12,-5,12,7"
Margin="12,0,12,12"
IsVisible="{TemplateBinding IsColorPreviewVisible}" />
</Grid>
</ControlTemplate>

Write Preview
Loading…
Cancel
Save