WPF 控件专题 Button控件详解

1、Button介绍

    Button（按钮）：表示 Windows 按钮控件，该按钮对 Click 事件做出反应。

**************************************************************************************************************

2、常用属性介绍    Background：元素的背景色；    Foreground：前景色；    Width/Height：宽度/高度；
    
    BorderBrush：元素边框颜色；    BorderThickness：元素边框宽度；
    
    Command：获取或设置在按下按钮时调用的命令。
    
    CommandBindings：获取与此元素关联的 CommandBinding 对象的集合。 CommandBinding 为此元素启用命令处理，并声明命令、命令的事件和由此元素附加的处理程序之间的链接。
    
    CommandParameter：获取或设置要传递给 Command 属性的参数。
    
    Content：获取或设置 ContentControl 的内容。
    
    ContentStringFormat：获取或设置一个撰写字符串，该字符串指定如果 Content 属性显示为字符串，应如何设置该属性的格式。
    
    ContentTemplate    ：获取或设置用于显示 ContentControl 内容的数据模板。
    
    FontFamily：字体名称；    FontSize：字体大小；    FontStretch：字体在屏幕上紧缩或加宽的程度；    FontWeight：字体粗细；
    
    ClickMode：获取或设置 Click 事件何时发生。ClikMode值有如下三种，具体解析如下：
        Release：指定当按下和释放按钮时应引发Click 事件。
        Press：指定当按下按钮时应引发Click 事件。
        Hover：指定当鼠标悬停在控件上时应引发Click 事件。

**************************************************************************************************************

3、具体示例代码

<StackPanel Margin="10">
	<!--悬停：当用户将鼠标悬停在按钮上时，第一个按钮将更改颜色，ClickMode为Hover-->
	<Button Name="btn1" Background="Pink" Margin="10" Width="150" Height="35" BorderBrush="Black" BorderThickness="1" 
			Click="OnClick1" ClickMode="Hover"> ClickMe1 </Button>
	<!--按：第二个按钮要求在鼠标指针位于按钮上方时按下鼠标，ClickMode为Press-->
	<Button Name="btn2" Background="BlueViolet" Margin="10" Width="150"  Height="35" BorderBrush="Black" BorderThickness="1"  
			Click="OnClick2" ClickMode="Press"> ClickMe2</Button>
	<!--释放：在按下并释放按钮之前，第三个按钮不会重置按钮的背景色，ClickMode为Release-->
	<Button Name="btn3" Click="OnClick3" Margin="10" Width="150" Height="35"
			ClickMode="Release">Reset</Button>
</StackPanel>

    后台逻辑代码

private void OnClick1(object sender, RoutedEventArgs e)
{
	btn1.Background = Brushes.YellowGreen;
}

private void OnClick2(object sender, RoutedEventArgs e)
{
	btn2.Background = Brushes.Pink;
}

private void OnClick3(object sender, RoutedEventArgs e)
{
	btn1.Background = Brushes.Pink;
	btn2.Background = Brushes.LightBlue;
}

private void btn1_MouseEnter(object sender, MouseEventArgs e)
{
	btn1.Background = Brushes.Red;
}

**************************************************************************************************************

4、示例代码效果图：左侧图未触发Click事件的；右侧为前两个按钮触发Click事件的。

  

**************************************************************************************************************

5、自定义按钮

<Style x:Key="btnStyle" TargetType="{x:Type Button}">
	<Setter Property="MinHeight" Value="50"/>
	<Setter Property="MinWidth" Value="50"/>
	<Setter Property="FontSize" Value="15"/>
	<Setter Property="HorizontalAlignment" Value="Center"/>
	<Setter Property="VerticalAlignment" Value="Center"/>
	<Setter Property="Background" Value="#FFC8C8C8"/>
	<Setter Property="BorderBrush" Value="#FF0099FF"/>
	<Setter Property="Foreground" Value="#FF0E8BD2"/>
	<Setter Property="BorderThickness" Value="1"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type Button}">
				<Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="5" MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}"
							SnapsToDevicePixels="True" Margin="{TemplateBinding Margin}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
					<TextBlock x:Name="lab" FontSize="18" Text="{TemplateBinding Content}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"/>
				</Border>
				<ControlTemplate.Triggers>
					<Trigger Property="IsMouseOver" Value="True">
						<Setter TargetName="Bd" Property="Background" Value="#FF0E8BD2" />
						<Setter Property="Foreground" Value="White" />
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

<!--使用样式-->
<Button Style="{StaticResource btnStyle}" Margin="10" FontSize="15" Click="Button_Click">+</Button>

效果图为

**************************************************************************************************************

6、总结和扩展

    Button是没有属性直接设置圆角的，但是我们可以通过改写其模板来实现，使用Border可以实现圆角的功能；当然我们也可以在Button中Background中添加图片；总的来说，通过改写模板可达到你想要的界面效果。

**************************************************************************************************************