WPF Button样式(按钮按下显示不同图片样式)

最新推荐文章于 2025-11-13 16:09:25 发布

原创最新推荐文章于 2025-11-13 16:09:25 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #前端 #c#

c# 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在WPF中通过样式和模板来定制Button控件的样式，使其在按下时产生视觉变化。通过设置不同的Uid值，可以切换Button的三种不同样式。同时，当Button被按下、鼠标悬停或禁用时，样式也会相应调整。示例代码展示了如何定义和应用这些样式。

做控件时，有时候需要button按下后button自身样式有变化，可对style做如下

<Style x:Key="Style_Button_ChangeStateButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#FF595959"/>
        <Setter Property="BorderBrush" Value="#363636"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="white"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Width" Value="24"/>
        <Setter Property="Height" Value="24"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <Border x:Name="Border" CornerRadius="4" Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="btnContent" RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"  
                                              HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}"/>
                        </Border>
                        <Image x:Name="state1" Width="24" Height="24" Stretch="Uniform" Visibility="Collapsed"
                               Source="{DynamicResource Picture0}"/>
                        <Image x:Name="state2" Width="24" Height="24" Stretch="Uniform" Visibility="Collapsed"
                               Source="{DynamicResource Picture1}"/>
                        <Image x:Name="state3" Width="24" Height="24" Stretch="Uniform" Visibility="Collapsed"
                               Source="{DynamicResource Picture2}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Uid" Value="Style_0">
                            <Setter Property="Visibility" TargetName="state1" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="state2" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="state3" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="Uid" Value="Style_1">
                            <Setter Property="Visibility" TargetName="state1" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="state2" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="state3" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="Uid" Value="Style_2">
                            <Setter Property="Visibility" TargetName="state1" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="state2" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="state3" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true"/>
                        <Trigger Property="IsMouseOver" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="btnContent" Value="0.4"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 <Button Style="{DynamicResource Style_Button_Common_ModeChangeLayerStateButton}" 
          Uid="{Binding Style, Converter={StaticResource }}">
 </Button>

使用时对Uid传递不同的值即可更改button样式