feat: add template for repeat button and button spinner, WIP.

This commit is contained in:
rabbitism 2023-01-21 01:24:38 +08:00
parent 91aa3380aa
commit 337e46e202
3 changed files with 96 additions and 1 deletions

View File

@ -7,7 +7,10 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel>
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<ButtonSpinner
Height="30"
AllowSpin="{Binding #allowSpinCheck.IsChecked}"

View File

@ -1,5 +1,95 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20" Spacing="20">
<ButtonSpinner Content="Hello World" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
<Setter Property="RepeatButton.Template">
<ControlTemplate>
<ContentPresenter
x:Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPointerOver}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPressed}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundDisabled}" />
<Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundDisabled}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
<Setter Property="ButtonSpinner.BorderBrush" Value="LightGray" />
<Setter Property="ButtonSpinner.CornerRadius" Value="3" />
<Setter Property="ButtonSpinner.BorderThickness" Value="0" />
<Setter Property="ButtonSpinner.MinWidth" Value="300" />
<!-- Add Resource -->
<Setter Property="ButtonSpinner.Template">
<ControlTemplate TargetType="ButtonSpinner">
<Grid ColumnDefinitions="Auto, *, Auto">
<Border
Grid.Column="1"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
<Border
Grid.Column="2"
MinWidth="16"
Margin="4,0,0,0"
BorderBrush="LightGray"
BorderThickness="1"
CornerRadius="3">
<Grid RowDefinitions="*, *">
<RepeatButton
Name="PART_IncreaseButton"
Grid.Row="0"
Padding="0"
Theme="{StaticResource ButtonSpinnerRepeatButton}">
<PathIcon
Width="8"
Height="8"
Data="{DynamicResource ButtonSpinnerIncreaseButtonGlyph}"
Foreground="DarkGray" />
</RepeatButton>
<RepeatButton
Name="PART_DecreaseButton"
Grid.Row="1"
Padding="0"
Foreground="Black"
Theme="{StaticResource ButtonSpinnerRepeatButton}">
<PathIcon
Width="8"
Height="8"
Data="{DynamicResource ButtonSpinnerDecreaseButtonGlyph}"
Foreground="DarkGray" />
</RepeatButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

View File

@ -1,3 +1,5 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<PathGeometry x:Key="ButtonSpinnerIncreaseButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</PathGeometry>
<PathGeometry x:Key="ButtonSpinnerDecreaseButtonGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
</ResourceDictionary>