WPF 自定义各类按钮样式

WPF 自定义各类按钮样式(Button,ToggleButton,RadioButton)

示例一、对Button控件使用触发器修改样式
一般只修改外观和一些事件触发样式的改变

 <Window.Resources>
        <Style TargetType="Button" x:Key="DefaultButton">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="#336633  "></Setter>
                    <Setter Property="FontSize" Value="18"></Setter>
                </Trigger>
            </Style.Triggers>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Green"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Cursor" Value="Hand"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Width="100" Height="30" Content="测试" Style="{StaticResource DefaultButton}"></Button>
    </Grid>

或者也可以直接这样写:

<Button Content="测试" Width="100" Height="30" Margin="30">
    <Button.Style>
         <Style TargetType="Button">
              <Style.Triggers>
                   <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="#336633  "></Setter>
                        <Setter Property="FontSize" Value="18"></Setter>
                   </Trigger>
              </Style.Triggers>
              <Setter Property="Template">
                   <Setter.Value>
                        <ControlTemplate TargetType="Button">
                             <Border Background="{TemplateBinding Background}">
                                  <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter>
                              </Border>
                         </ControlTemplate>
                   </Setter.Value>
               </Setter>
               <Setter Property="Background" Value="Green"></Setter>
               <Setter Property="Foreground" Value="White"></Setter>
               <Setter Property="Cursor" Value="Hand"></Setter>
           </Style>
     </Button.Style>
</Button>

执行效果:
在这里插入图片描述

二、对Button控件使用控件模板修改样式

<Window.Resources>
        <Style x:Key="BtnInfoStyle" TargetType="Button">
            <Setter Property="Width" Value="70"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="#43a9c7"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value=
  • 6
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值