Skip to content

Button zh CN

末城via edited this page Jun 17, 2023 · 3 revisions

Button 按钮

返回目录

适用于:   v1.11.0 或更新的版本

概述

辅助类名:    ButtonHelper
命名空间:    Panuon.WPF.UI
位于:    SharedResources/Panuon.WPF.UI/Helpers/ButtonHelper.cs
全局资源字典:    pack://application:,,,/Panuon.WPF.UI;component/Styles/Button.xaml
独立资源字典:    pack://application:,,,/Panuon.WPF.UI;component/Styles/ButtonStyle.xaml
独立资源样式键:    pu:StyleKeys.ButtonStyle
静态类

提供一系列属性和方法, 用于自定义 Button 按钮 的样式。 此类型仅可以在 Button 按钮 上使用。

滚动至示例


备注

属性间的相互作用

IsEnabled 属性的值设为 False 时, Opacity 的属性值将与 GlobalSettings.Setting.DisabledOpacity 属性的值绑定(它的默认值为 0.4)。有关全局设置的更多内容, 请查看GlobalSettings 辅助类

自定义样式提示

HoverBackgroundClickBackground 属性的默认值会设置成比 Background 属性更浅的颜色(如果后者为 System.Media.SolidColorBrush 类型),如果不需要显示悬浮背景色和点击背景色,可以将其设置为 Null (在Xaml中为 {x:Null} )。
BorderThickness 属性的默认值为 0,0,0,0Padding 属性的默认值为 5,0,5,0IconHelper.Margin 属性的默认值为 0,0,5,0
若要更改通过 Icon 属性定义的图标的其他属性, 请查看IconHelper 辅助类
若要更改通过 ShadowColor 属性定义的阴影效果的详细数值, 请查看ShadowHelper 辅助类

注意

IsPending 属性为True时,按钮不会被禁用。使用该属性时,你可能需要编写额外的代码来防止重复触发按钮事件,或在样式的触发器中将 IsEnabled 属性置为False


附加属性

Icon

类型:    System.Object
默认值:    {Null}
获取或设置按钮的图标,图标显示的位置可以使用 IconPlacement 属性控制。若要更改图标的间距、字体等属性,请查看IconHelper 辅助类

IconPlacement

类型:    Panuon.WPF.UI.IconPlacement
默认值:    [Left] / Top / Right / Bottom
获取或设置图标相对于内容的位置。Left 表示显示在内容的左侧,Top 表示显示在内容的上方,Right 表示显示在内容的右侧,Bottom 表示显示在内容的下方。

CornerRadius

类型:    System.Windows.CornerRadius
默认值:    0,0,0,0
获取或设置按钮的圆角大小。

IsPending

类型:    System.Object
默认值:    False
获取或设置按钮是否处于等待状态,等待状态下按钮的左侧将显示一个 Spin 控件,控件的样式可以使用 PendingSpinStyle 属性控制。
与旧版本不同,当 IsPending=True 时,按钮不会被禁用。若要实现该效果,可以通过在Style中添加Trigger的方式来实现。

PendingSpinStyle

类型:    System.Windows.Style
默认值:    [见资源键[PendingSpinStyle](#PendingSpinStyle)]
获取或设置按钮处于等待状态时,显示的 Spin 控件的样式。有关此属性的使用方式,请查看示例2

ShadowColor

类型:    System.Media.Color ?
默认值:    {Null}
获取或设置按钮的阴影颜色。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。若要更改阴影的模糊半径、深度等属性,请查看ShadowHelper 辅助类

HoverBackground

类型:    System.Media.Brush
默认值:    (相较于Background属性较深的颜色)
获取或设置按钮悬浮时的背景色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

HoverForeground

类型:    System.Media.Brush
默认值:    {Null}
获取或设置按钮悬浮时的前景色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

HoverBorderBrush

类型:    System.Media.Brush
默认值:    {Null}
获取或设置按钮悬浮时的边框色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

HoverBorderThickness

类型:    System.Windows.Thickness ?
默认值:    {Null}
获取或设置按钮悬浮时的边框粗细画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

HoverCornerRadius

类型:    System.Windows.Thickness ?
默认值:    {Null}
获取或设置按钮悬浮时的圆角。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

HoverShadowColor

类型:    System.Media.Color ?
默认值:    {Null}
获取或设置按钮悬浮时的阴影颜色。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。若要更改阴影的模糊半径、深度等属性,请查看ShadowHelper 辅助类

ClickBackground

类型:    System.Media.Brush
默认值:    (相较于Background属性更深的颜色)
获取或设置按钮点击时的背景色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

ClickForeground

类型:    System.Media.Brush
默认值:    {Null}
获取或设置按钮点击时的前景色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

ClickBorderBrush

类型:    System.Media.Brush
默认值:    {Null}
获取或设置按钮点击时的边框色彩画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

ClickBorderThickness

类型:    System.Windows.Thickness ?
默认值:    {Null}
获取或设置按钮点击时的边框粗细画刷。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

ClickCornerRadius

类型:    System.Windows.Thickness ?
默认值:    {Null}
获取或设置按钮点击时的圆角。此属性可以通过设置为 Null (在Xaml中为 {x:Null})来取消效果。

ClickEffect

类型:    Panuon.WPF.UI.ClickEffect
默认值:    [None] / Sink / Shake
获取或设置按钮的点击特效。None 表示没有点击特效,Sink 表示点击时下沉,Shake 表示点击时抖动。

ClassName


公开的资源键

有关如何使用资源键的更多内容, 请查看命名与约定-资源键
一些无法从外部访问的属性已被隐去。

`PendingSpinStyle_

样式资源:     {StaticResource {x:Static pu:ButtonHelper.PendingSpinStyleKey}}

等待时 Spin 控件的样式。

<Style x:Key="{ComponentResourceKey ResourceId=PendingSpinStyleKey, TypeInTargetAssembly={x:Type pu:ButtonHelper}}"
       TargetType="local:Spin">
    <Setter Property="Margin"
            Value="0,0,5,0" />
    <Setter Property="GlyphBrush"
            Value="{Binding Path=(i:VisualStateHelper.Foreground), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
    <Setter Property="Width"
            Value="{Binding FontSize, Converter={StaticResource {x:Static rs:ConverterKeys.DoublePlusConverter}}, ConverterParameter=6, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
    <Setter Property="Height"
            Value="{Binding FontSize, Converter={StaticResource {x:Static rs:ConverterKeys.DoublePlusConverter}}, ConverterParameter=6, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
</Style>

示例

示例1

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<Button Height="40"
        Width="170"
        Content="Button"
        Background="#36AAF7"
        Foreground="#FFFFFF"
        pu:IconHelper.FontFamily="{StaticResource PanuonIconFont}"
        pu:IconHelper.Margin="0,0,10,0"
        pu:ButtonHelper.Icon="&#xe939;"
        pu:ButtonHelper.CornerRadius="4"
        pu:ButtonHelper.ShadowColor="#36AAF7"
        pu:ShadowHelper.BlurRadius="15"
        pu:ShadowHelper.ShadowDepth="5" />

示例2

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<Button Height="40"
        Width="170"
        Content="Button"
        Background="#36AAF7"
        Foreground="#FFFFFF"
        pu:ButtonHelper.IsPending="True"
        pu:ButtonHelper.CornerRadius="4"
        pu:ButtonHelper.ClickEffect="Shake">
    <pu:ButtonHelper.PendingSpinStyle>
        <Style TargetType="pu:Spin"
               BasedOn="{StaticResource {x:Static pu:ButtonHelper.PendingSpinStyleKey}}">
            <Setter Property="Margin"
                    Value="0,0,10,0" />
            <Setter Property="SpinStyle"
                    Value="Ring2" />
        </Style>
    </pu:ButtonHelper.PendingSpinStyle>
</Button>

示例3

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<Button Height="100"
        Width="100"
        Content="Scan"
        Background="#FF6B81"
        Foreground="#FFFFFF"
        pu:IconHelper.FontFamily="{StaticResource PanuonIconFont}"
        pu:IconHelper.FontSize="30"
        pu:IconHelper.Margin="0,0,0,7"
        pu:ButtonHelper.Icon="&#xe959;"
        pu:ButtonHelper.IconPlacement="Top"
        pu:ButtonHelper.CornerRadius="50" />

示例4

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<Button Height="40"
        Width="40"
        Content="&#xe966;"
        Background="#FFA46B"
        Foreground="#FFFFFF"
        FontFamily="{StaticResource PanuonIconFont}"
        FontSize="16"
        pu:ButtonHelper.CornerRadius="5" />