返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

WPF自定义控件和样式之自定义按钮（Button）

2019-12-30 19:18:10于海丽

先看效果：

wpf,自定义button,自定义按钮,button,样式

Button样式的代码和扁平化Button差不多，只是把TextBlock控件替换成了Image控件，另外需要设置Button默认的背景色为透明。废话不多说看代码：


<Style x:Key="BtnImageStyle1" TargetType="Button">
   <Setter Property="Cursor" Value="Hand"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
       <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/button1.png" Stretch="None"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

这里的button1.png需要自己准备图片资源，IsMouseOver和IsPressed的图片资源可自己替换，替换之后能有更丰富的效果呈现。

2.3 图标文字混合按钮

效果：

wpf,自定义button,自定义按钮,button,样式

实现代码：


<Style x:Key="BtnImgTxtStyle1" TargetType="Button">
  <Setter Property="Foreground" Value="#555"/>
  <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border>
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Image Source="Images/adshut.png" Stretch="None"/>
        <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </StackPanel>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="#333333" TargetName="Txt"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
相关文章 大家在看