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

Tweaked Expander ControlTheme. 

And added "Rounded" option to ControlCatalog for testing.
pull/8479/head
Steven Kirk 4 years ago
parent
6f797a9c56
commit
4f3fafc9df
4 changed files with 72 additions and 43 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. 15
      samples/ControlCatalog/Pages/ExpanderPage.xaml
  2. 2
      samples/ControlCatalog/Pages/ExpanderPage.xaml.cs
  3. 27
      samples/ControlCatalog/ViewModels/ExpanderPageViewModel.cs
  4. 71
      src/Avalonia.Themes.Fluent/Controls/Expander.xaml

15
samples/ControlCatalog/Pages/ExpanderPage.xaml
View File

@ -8,26 +8,31 @@
Margin="0,16,0,0"
HorizontalAlignment="Center"
Spacing="16">
<Expander Header="Expand Up" ExpandDirection="Up">
<Expander Header="Expand Up" ExpandDirection="Up"
CornerRadius="{Binding CornerRadius}">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander Header="Expand Down" ExpandDirection="Down">
<Expander Header="Expand Down" ExpandDirection="Down"
CornerRadius="{Binding CornerRadius}">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander Header="Expand Left" ExpandDirection="Left">
<Expander Header="Expand Left" ExpandDirection="Left"
CornerRadius="{Binding CornerRadius}">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander Header="Expand Right" ExpandDirection="Right">
<Expander Header="Expand Right" ExpandDirection="Right"
CornerRadius="{Binding CornerRadius}">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
</StackPanel>
<CheckBox IsChecked="{Binding Rounded}">Rounded</CheckBox>
</StackPanel>
</StackPanel>
</UserControl>

2
samples/ControlCatalog/Pages/ExpanderPage.xaml.cs
View File

@ -1,5 +1,6 @@
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using ControlCatalog.ViewModels;
namespace ControlCatalog.Pages
{
@ -8,6 +9,7 @@ namespace ControlCatalog.Pages
public ExpanderPage()
{
this.InitializeComponent();
DataContext = new ExpanderPageViewModel();
}
private void InitializeComponent()

27
samples/ControlCatalog/ViewModels/ExpanderPageViewModel.cs
View File

@ -0,0 +1,27 @@
using Avalonia;
using MiniMvvm;
namespace ControlCatalog.ViewModels
{
public class ExpanderPageViewModel : ViewModelBase
{
private CornerRadius _cornerRadius;
private bool _rounded;
public CornerRadius CornerRadius
{
get => _cornerRadius;
private set => RaiseAndSetIfChanged(ref _cornerRadius, value);
}
public bool Rounded
{
get => _rounded;
set
{
if (RaiseAndSetIfChanged(ref _rounded, value))
CornerRadius = _rounded ? new CornerRadius(25) : default;
}
}
}
}

71
src/Avalonia.Themes.Fluent/Controls/Expander.xaml
View File

@ -3,29 +3,39 @@
x:CompileBindings="True">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Orientation="Vertical" Spacing="20" Width="350">
<Expander ExpandDirection="Up" Header="Expand Up" CornerRadius="25">
<Expander.Header>
<Grid ColumnDefinitions="*, Auto">
<TextBlock Grid.Column="0" Text="Expand" />
<TextBlock Grid.Column="1" Text="Up" />
</Grid>
</Expander.Header>
<StackPanel Orientation="Vertical" Spacing="20" Width="350" Height="600">
<Expander ExpandDirection="Up" Header="Expand Up">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander ExpandDirection="Down" Header="Expand Down" CornerRadius="25">
<Expander ExpandDirection="Down" Header="Expand Down">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander ExpandDirection="Left" Header="Expand Left" CornerRadius="25">
<Expander ExpandDirection="Left" Header="Expand Left">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander ExpandDirection="Right" Header="Expand Right" CornerRadius="25">
<Expander ExpandDirection="Right" Header="Expand Right">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander ExpandDirection="Up">
<Expander.Header>
<Grid ColumnDefinitions="*, Auto">
<TextBlock Grid.Column="0" Text="Control" />
<TextBlock Grid.Column="1" Text="Header" />
</Grid>
</Expander.Header>
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
</Expander>
<Expander ExpandDirection="Up" Header="Rounded" CornerRadius="25">
<StackPanel>
<TextBlock>Expanded content</TextBlock>
</StackPanel>
@ -36,25 +46,19 @@
<Thickness x:Key="ExpanderHeaderPadding">16</Thickness>
<Thickness x:Key="ExpanderContentPadding">16</Thickness>
<Thickness x:Key="ExpanderBorderThickness">1</Thickness>
<Thickness x:Key="ExpanderDropdownLeftBorderThickness">1,1,0,1</Thickness>
<Thickness x:Key="ExpanderDropdownUpBorderThickness">1,1,1,0</Thickness>
<Thickness x:Key="ExpanderDropdownRightBorderThickness">0,1,1,1</Thickness>
<Thickness x:Key="ExpanderDropdownDownBorderThickness">1,0,1,1</Thickness>
<SolidColorBrush x:Key="ExpanderBackground" Color="{DynamicResource SystemAltMediumHighColor}" />
<SolidColorBrush x:Key="ExpanderBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
<SolidColorBrush x:Key="ExpanderDropDownBackground" Color="{DynamicResource SystemChromeMediumLowColor}" />
<SolidColorBrush x:Key="ExpanderDropDownBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
<SolidColorBrush x:Key="ExpanderForeground" Color="{DynamicResource SystemBaseHighColor}" />
<SolidColorBrush x:Key="ExpanderChevronForeground" Color="{DynamicResource SystemBaseHighColor}" />
<ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton">
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="ToggleButtonBackground"
@ -94,7 +98,7 @@
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[Tag=Expanded] /template/ Border#ExpandCollapseChevronBorder">
<Style Selector="^:checked /template/ Border#ExpandCollapseChevronBorder">
<Style.Animations>
<Animation FillMode="Both" Duration="0:0:0.0625">
<KeyFrame Cue="100%">
@ -103,7 +107,7 @@
</Animation>
</Style.Animations>
</Style>
<Style Selector="^[Tag=NotExpanded] /template/ Border#ExpandCollapseChevronBorder">
<Style Selector="^:not(:checked) /template/ Border#ExpandCollapseChevronBorder">
<Style.Animations>
<Animation FillMode="Both" Duration="0:0:0.0625">
<KeyFrame Cue="0%">
@ -173,7 +177,7 @@
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
<Setter Property="RenderTransform" Value="{x:Null}" />
</Style>
@ -186,28 +190,28 @@
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
</Style>
<Style Selector="^:expanded:up /template/ ToggleButton#ExpanderHeader">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:up /template/ Border#ExpanderContent">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:down /template/ ToggleButton#ExpanderHeader">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:down /template/ Border#ExpanderContent">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:left /template/ ToggleButton#ExpanderHeader">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:left /template/ Border#ExpanderContent">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:right /template/ ToggleButton#ExpanderHeader">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:expanded:right /template/ Border#ExpanderContent">
<Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
</Style>
<Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
@ -223,14 +227,6 @@
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style Selector="^:expanded /template/ ToggleButton#ExpanderHeader">
<Setter Property="Tag" Value="Expanded"/>
</Style>
<Style Selector="^:not(:expanded) /template/ ToggleButton#ExpanderHeader">
<Setter Property="Tag" Value="NotExpanded"/>
</Style>
<Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
<Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonLeftTheme}" />
</Style>
@ -244,7 +240,6 @@
<Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonDownTheme}" />
</Style>
<Style Selector="^:left /template/ Border#ExpanderContent">
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownLeftBorderThickness}" />
</Style>

Write Preview
Loading…
Cancel
Save