Ghost1372

everything can be handy

Button

ButtonBaseStyle : ButtonBaseBaseStyle

The default style of the button is not recommended for direct use and should always be used by other styles in the BasedOn mode.

All buttons that inherit this style can use the additional properties defined in IconElement to control the properties of the geometry in the button.

All buttons that inherit this style can use the BorderElement.CornerRadius attached property to control the fillet size of the button.

Example:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
  <Button Content="This is a button"/>
  <Button Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
  <Button Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonBaseStyle

ButtonPrimary : ButtonBaseStyle

Main Button

Example:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
   <Button Style="{StaticResource ButtonPrimary}" Content="This is a button"/>
   <Button Style="{StaticResource ButtonPrimary}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
   <Button Style="{StaticResource ButtonPrimary}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonPrimary

ButtonSuccess : ButtonBaseStyle

Success button

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
   <Button Style="{StaticResource ButtonSuccess}" Content="This is a button"/>
   <Button Style="{StaticResource ButtonSuccess}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
   <Button Style="{StaticResource ButtonSuccess}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonSuccess

ButtonInfo : ButtonBaseStyle

Information button

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
  <Button Style="{StaticResource ButtonInfo}" Content="This is a button"/>
  <Button Style="{StaticResource ButtonInfo}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
  <Button Style="{StaticResource ButtonInfo}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonInfo

ButtonWarning : ButtonBaseStyle

Warning button

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonWarning}" Content="This is a button"/>
    <Button Style="{StaticResource ButtonWarning}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
    <Button Style="{StaticResource ButtonWarning}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonWarning

ButtonDanger : ButtonBaseStyle

Danger button

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonDanger}" Content="This is a button"/>
    <Button Style="{StaticResource ButtonDanger}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
    <Button Style="{StaticResource ButtonDanger}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonDanger

ButtonDefault : ButtonBaseStyle

Default button

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonDefault}" Content="This is a button"/>
    <Button Style="{StaticResource ButtonDefault}" Content="This is a button" Margin="10,0,0,0" hc:BorderElement.CornerRadius="15"/>
    <Button Style="{StaticResource ButtonDefault}" Content="This is a button" Margin="10,0,0,0" hc:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonIcon : ButtonBaseStyle

This style is recommended if you only want to display the geometry button.

Example：

1
2
3
4
5
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonIcon}" Foreground="{DynamicResource PrimaryTextBrush}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
    <Button Style="{StaticResource ButtonIcon}" Background="Black" Foreground="White" hc:BorderElement.CornerRadius="15" hc:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
    <Button Style="{StaticResource ButtonIcon}" BorderThickness="1" BorderBrush="Black" Foreground="{DynamicResource PrimaryTextBrush}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
</StackPanel>

ButtonIcon

ButtonCustom

This style is recommended if you want to fully customize the content of the button. The content in ButtonCustom is entirely up to you. In addition, you can switch the background with additional properties in BackgroundSwitchElement:

Example：

1
<Button Height="30" Padding="10,0" Background="Black" Foreground="White" Content="This is a button" Style="{StaticResource ButtonCustom}" hc:BackgroundSwitchElement.MouseHoverBackground="Red" hc:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>

ButtonCustom

Styles

Style
ButtonPrimary
ButtonInfo
ButtonDanger
ButtonWarning
ButtonDefault
ButtonSuccess
ButtonIcon
ButtonIconCircular
ButtonDashed
ButtonDashedPrimary
ButtonDashedSuccess
ButtonDashedInfo
ButtonDashedWarning
ButtonDashedDanger
ButtonCustom
ButtonGroupItemDefault
ButtonGroupItemHorizontalFirst
ButtonGroupItemHorizontalLast
ButtonGroupItemSingle
ButtonGroupItemVerticalFirst
ButtonGroupItemVerticalLast
ButtonDefault.Small
ButtonPrimary.Small
ButtonInfo.Small
ButtonDanger.Small
ButtonWarning.Small
ButtonSuccess.Small
ButtonIcon.Small
ButtonIconCircular.Small
ButtonDashed.Small
ButtonDashedPrimary.Small
ButtonDashedSuccess.Small
ButtonDashedInfo.Small
ButtonDashedWarning.Small
ButtonDashedDanger.Small
0%