feat: RepeatButton.

This commit is contained in:
Zhang Dian 2024-07-15 00:33:28 +08:00
parent 0979141f54
commit 1378219b7a
3 changed files with 82 additions and 17 deletions

View File

@ -44,11 +44,6 @@
<Button Classes="Danger">Danger</Button> <Button Classes="Danger">Danger</Button>
<Button Classes="Danger" IsEnabled="False">Disabled</Button> <Button Classes="Danger" IsEnabled="False">Disabled</Button>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary Small">Small</Button>
<Button Classes="Primary">Default</Button>
<Button Classes="Primary Large">Large</Button>
</StackPanel>
<TextBlock>Solid</TextBlock> <TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button> <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
@ -96,6 +91,12 @@
<Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button> <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
<Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button> <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
</StackPanel> </StackPanel>
<TextBlock>Size Classes</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary Small">Small</Button>
<Button Classes="Primary">Default</Button>
<Button Classes="Primary Large">Large</Button>
</StackPanel>
<TextBlock>DropDownButton</TextBlock> <TextBlock>DropDownButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">

View File

@ -33,6 +33,21 @@
Disabled Disabled
</RepeatButton> </RepeatButton>
</StackPanel> </StackPanel>
<TextBlock>Outline</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
<RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
<RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
<RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
<RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource OutlineRepeatButton}">
Disabled
</RepeatButton>
</StackPanel>
<TextBlock>Borderless</TextBlock> <TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton> <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
@ -48,10 +63,18 @@
Disabled Disabled
</RepeatButton> </RepeatButton>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8"> <TextBlock>Disabled</TextBlock>
<StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
<Button IsEnabled="False">Light</Button>
<Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
<Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
<Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
</StackPanel>
<TextBlock>Size Classes</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Small">Small</RepeatButton> <RepeatButton Classes="Small">Small</RepeatButton>
<RepeatButton>Default</RepeatButton> <RepeatButton>Default</RepeatButton>
<RepeatButton Classes="Large">Large</RepeatButton> <RepeatButton Classes="Large">Large</RepeatButton>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

View File

@ -4,17 +4,17 @@
x:CompileBindings="True"> x:CompileBindings="True">
<ControlTheme x:Key="{x:Type RepeatButton}" TargetType="RepeatButton"> <ControlTheme x:Key="{x:Type RepeatButton}" TargetType="RepeatButton">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
<Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" /> <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
<Setter Property="RenderTransform" Value="none" />
<Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="RenderTransform" Value="none" />
<Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" /> <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@ -22,7 +22,7 @@
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="RepeatButton"> <ControlTemplate TargetType="RepeatButton">
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" x:Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
@ -43,7 +43,7 @@
<Style Selector="^:pressed"> <Style Selector="^:pressed">
<Setter Property="RenderTransform" Value="scale(0.98)" /> <Setter Property="RenderTransform" Value="scale(0.98)" />
</Style> </Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" /> <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="Background" Value="{TemplateBinding Background}" /> <Setter Property="Background" Value="{TemplateBinding Background}" />
@ -80,17 +80,16 @@
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style> </Style>
<Style Selector="^.Large"> <Style Selector="^.Large">
<Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
<Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
</Style> </Style>
<Style Selector="^.Small"> <Style Selector="^.Small">
<Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
<Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
@ -103,6 +102,16 @@
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
</Style> </Style>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
</Style>
<Style Selector="^.Primary"> <Style Selector="^.Primary">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
@ -196,7 +205,39 @@
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineRepeatButton"
BasedOn="{StaticResource {x:Type RepeatButton}}"
TargetType="RepeatButton">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
@ -206,8 +247,8 @@
BasedOn="{StaticResource {x:Type RepeatButton}}" BasedOn="{StaticResource {x:Type RepeatButton}}"
TargetType="RepeatButton"> TargetType="RepeatButton">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="RepeatButton.Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="RepeatButton.BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
</Style> </Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />