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

Inline Fluent ButtonSpinner

pull/4118/head
Max Katz 6 years ago
parent
7b05670f31
commit
db7b159c0c
1 changed files with 118 additions and 82 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. 200
      src/Avalonia.Themes.Fluent/ButtonSpinner.xaml

200
src/Avalonia.Themes.Fluent/ButtonSpinner.xaml
View File

@ -1,104 +1,140 @@
<Styles xmlns="https://github.com/avaloniaui"> <Styles xmlns="https://github.com/avaloniaui"
<Style Selector="ButtonSpinner"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<Setter Property="Background" Value="Transparent"/> xmlns:sys="clr-namespace:System;assembly=netstandard"
<Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/> xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
<Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/> <Design.PreviewWith>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Border Padding="20"
<Setter Property="VerticalContentAlignment" Value="Center"/> Background="Black">
<StackPanel Spacing="20">
<ButtonSpinner ButtonSpinnerLocation="Right"
Content="Right disabled inline spinner"
AllowSpin="False" />
<ButtonSpinner ButtonSpinnerLocation="Left"
Content="Left spinner" />
<ButtonSpinner ShowButtonSpinner="False"
Content="Hide spinner" />
</StackPanel>
</Border>
</Design.PreviewWith>
<Styles.Resources>
<converters:MarginMultiplierConverter x:Key="ButtonSpinner_OnlyLeftThinknessConverter"
Indent="1"
Left="True" />
<converters:MarginMultiplierConverter x:Key="ButtonSpinner_OnlyRightThinknessConverter"
Indent="1"
Right="True" />
<StreamGeometry x:Key="ButtonSpinnerIncreaseButtonIcon">M0,9 L10,0 20,9 19,10 10,2 1,10 z</StreamGeometry>
<StreamGeometry x:Key="ButtonSpinnerDecreaseButtonIcon">M0,1 L10,10 20,1 19,0 10,8 1,0 z</StreamGeometry>
</Styles.Resources>
<!-- RepeatButton.ButtonSpinnerRepeatButton -->
<Style Selector="RepeatButton.ButtonSpinnerRepeatButton">
<Setter Property="MinWidth" Value="34" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style> </Style>
<Style Selector="ButtonSpinner /template/ RepeatButton">
<Setter Property="Background" Value="Transparent"/> <Style Selector="RepeatButton.ButtonSpinnerRepeatButton /template/ ContentPresenter">
<Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="CornerRadius" Value="0" />
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
</Style> </Style>
<Style Selector="ButtonSpinner /template/ RepeatButton:pointerover"> <Style Selector="RepeatButton.ButtonSpinnerRepeatButton:disabled">
<Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}"/> <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
</Style> </Style>
<Style Selector="ButtonSpinner /template/ RepeatButton#PART_IncreaseButton"> <Style Selector="RepeatButton.ButtonSpinnerRepeatButton:disabled > Path">
<Setter Property="Content"> <Setter Property="Fill" Value="{DynamicResource RepeatButtonForegroundDisabled}" />
<Template>
<Path Fill="{DynamicResource ThemeForegroundBrush}"
Width="8"
Height="4"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z"/>
</Template>
</Setter>
</Style> </Style>
<Style Selector="ButtonSpinner /template/ RepeatButton#PART_DecreaseButton">
<Setter Property="Content"> <!-- ButtonSpinner -->
<Template> <Style Selector="ButtonSpinner">
<Path Fill="{DynamicResource ThemeForegroundBrush}" <Setter Property="Background" Value="Transparent" />
Width="8" <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
Height="4" <Setter Property="Padding" Value="10, 0" />
Stretch="Uniform" <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
HorizontalAlignment="Center" <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
VerticalAlignment="Center" <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
Data="M0,0 L3,0 4.5,1.5 6,0 9,0 4.5,4.5 z"/> <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
</Template> <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
</Setter> <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
</Style> <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Style Selector="ButtonSpinner:right"> <Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Border Name="border" <Border Background="{TemplateBinding Background}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Padding}" CornerRadius="{DynamicResource ControlCornerRadius}">
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" <Grid ColumnDefinitions="Auto,*,Auto">
VerticalAlignment="{TemplateBinding VerticalAlignment}"> <ContentPresenter Name="PART_ContentPresenter"
<Grid ColumnDefinitions="*,Auto"> Grid.Column="1"
<ContentPresenter Name="PART_ContentPresenter" Grid.Column="0"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}"/> Padding="{TemplateBinding Padding}" />
<Grid Grid.Column="1" RowDefinitions="*,*" IsVisible="{TemplateBinding ShowButtonSpinner}">
<RepeatButton Grid.Row="0" Name="PART_IncreaseButton"/> <StackPanel Name="PART_SpinnerPanel"
<RepeatButton Grid.Row="1" Name="PART_DecreaseButton"/> Orientation="Horizontal"
</Grid> IsVisible="{TemplateBinding ShowButtonSpinner}">
<RepeatButton Name="PART_IncreaseButton"
Classes="ButtonSpinnerRepeatButton"
VerticalContentAlignment="Center"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
</RepeatButton>
<RepeatButton Name="PART_DecreaseButton"
Classes="ButtonSpinnerRepeatButton"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalContentAlignment="Center"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
</RepeatButton>
</StackPanel>
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<Style Selector="ButtonSpinner:left">
<Setter Property="Template"> <!-- ButtonSpinnerLocation=Right -->
<ControlTemplate> <Style Selector="ButtonSpinner:right /template/ StackPanel#PART_SpinnerPanel">
<Border Name="border" <Setter Property="Grid.Column" Value="2" />
Background="{TemplateBinding Background}" </Style>
BorderBrush="{TemplateBinding BorderBrush}" <Style Selector="ButtonSpinner:right /template/ RepeatButton.ButtonSpinnerRepeatButton">
BorderThickness="{TemplateBinding BorderThickness}" <Setter Property="BorderThickness" Value="{Binding $parent[ButtonSpinner].BorderThickness, Converter={StaticResource ButtonSpinner_OnlyLeftThinknessConverter}}" />
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid ColumnDefinitions="Auto,*">
<Grid Grid.Column="0" RowDefinitions="*,*" IsVisible="{TemplateBinding ShowButtonSpinner}">
<RepeatButton Grid.Row="0" Name="PART_IncreaseButton"/>
<RepeatButton Grid.Row="1" Name="PART_DecreaseButton"/>
</Grid>
<ContentPresenter Name="PART_ContentPresenter" Grid.Column="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style> </Style>
<Style Selector="ButtonSpinner:pointerover /template/ Border#border">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}"/> <!-- ButtonSpinnerLocation=Left -->
<Style Selector="ButtonSpinner:left /template/ StackPanel#PART_SpinnerPanel">
<Setter Property="Grid.Column" Value="0" />
</Style> </Style>
<Style Selector="ButtonSpinner:focus /template/ Border#border"> <Style Selector="ButtonSpinner:left /template/ RepeatButton.ButtonSpinnerRepeatButton">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}"/> <Setter Property="BorderThickness" Value="{Binding $parent[ButtonSpinner].BorderThickness, Converter={StaticResource ButtonSpinner_OnlyRightThinknessConverter}}" />
</Style> </Style>
<Style Selector="ButtonSpinner:error /template/ Border#border">
<Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}"/> <!-- Error state -->
<Style Selector="ButtonSpinner:error">
<Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}" />
</Style> </Style>
</Styles> </Styles>

Write Preview
Loading…
Cancel
Save