Button 按钮

ButtonBaseStyle : ButtonBaseBaseStyle

按钮默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。

所有继承此样式的按钮都可以使用IconElement中定义的附加属性来控制按钮中几何图形的属性。

所有继承此样式的按钮都可以使用BorderElement.CornerRadius附加属性来控制按钮的圆角大小。

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Content="这是一个按钮"/>
<Button Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonBaseStyle

ButtonPrimary : ButtonBaseStyle

主要按钮

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonPrimary

ButtonSuccess : ButtonBaseStyle

成功按钮

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonSuccess

ButtonInfo : ButtonBaseStyle

信息按钮

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonInfo

ButtonWarning : ButtonBaseStyle

警告按钮

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonWarning

ButtonDanger : ButtonBaseStyle

危险操作按钮

用例:

1
2
3
4
5
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
<Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>

ButtonDanger

ButtonIcon : ButtonBaseStyle

如果只想显示几何图形按钮,则推荐使用此样式。

用例:

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

ButtonIcon

ButtonCustom

如果想完全自定义按钮的内容,则推荐使用此样式。ButtonCustom中的内容完全由你自己决定,另外,可以通过BackgroundSwitchElement中的附加属性切换背景:

用例:

1
<Button Height="30" Padding="10,0" Background="Black" Foreground="White" Content="这是一个按钮" Style="{StaticResource ButtonCustom}" controls:BackgroundSwitchElement.MouseHoverBackground="Red" controls:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>

ButtonCustom