WPF之Button控件应用

 测试环境: Windows xp + Microsoft Visual Studio 2010 + Microsoft Expression Blend4 + .Net4.0

具体应用:

1. 创建透明的Button  

<Image Source="back.bmp" Grid.Row="0" Stretch="UniformToFill" />
<Button x:Name="TranButton" Content="透明Button" Margin="3" Grid.Row="0">
	<Button.OpacityMask>
		<LinearGradientBrush StartPoint="0,70" EndPoint="3,0">
			<GradientStop Offset="0" Color="Black"/>
        		<GradientStop Offset="1" Color="Transparent"/>
		</LinearGradientBrush>
	</Button.OpacityMask>
</Button>

2. 创建带图片的按钮

<Button x:Name="ImageButton" Margin="3" Grid.Row="1" HorizontalAlignment="Left">
	<StackPanel Margin="1" Orientation="Horizontal" Width="620">
		<Image Source="back.bmp" Stretch="UniformToFill" Width="160"/>
		<TextBlock Width="130" />
		<TextBlock Text="图片按钮" Margin="1,15,1,1"/>
	</StackPanel>
</Button>

3. 鼠标移动变色的按钮

    1) 首先设置鼠标的样式

<Style x:Key="ButtonFocusVisual">
	<Setter Property="Control.Template">
		<Setter.Value>
			<ControlTemplate>
				<Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
	<GradientStop Color="#FFFFFFFF" Offset="0"/>
	<GradientStop Color="#FFF0F0EA" Offset="0.9"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>
<Style x:Key="MouseButtonStyle" TargetType="{x:Type Button}">
	<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
	<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
	<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
	<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
	<Setter Property="HorizontalContentAlignment" Value="Center"/>
	<Setter Property="VerticalContentAlignment" Value="Center"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type Button}">
				<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" 
				 	Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" 
				 	RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}"
				 	SnapsToDevicePixels="true" ThemeColor="NormalColor">
				       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
					     Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
					     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
				             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
				</Microsoft_Windows_Themes:ButtonChrome>
   				        <ControlTemplate.Triggers>
						<Trigger Property="IsKeyboardFocused" Value="true">
							<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
						</Trigger>
						<Trigger Property="ToggleButton.IsChecked" Value="true">
							<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
						</Trigger>									
						<Trigger Property="IsMouseOver" Value="true">						
							<Setter Property="Background" Value="Blue" />						
						</Trigger>			
					</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

    2)设置Button 按钮

<Button x:Name="MouseButton" Margin="3" Grid.Row="2" Content="鼠标移动变色按钮" Style="{DynamicResource MouseButtonStyle}"/>

4. 创建有倒影的Button

<StackPanel Orientation="Vertical" Margin="3" Grid.Row="5" >
	<Button x:Name="ReflectionButton" Content="具有倒影的按钮"  Height="35" Margin="3" />		
	<Rectangle RenderTransformOrigin="1,0.5" Height="40">
	      <Rectangle.Fill>
  	              <VisualBrush Visual="{Binding ElementName=ReflectionButton}"></VisualBrush>
	      </Rectangle.Fill>
		      <Rectangle.OpacityMask>
		           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
		                <GradientStop Offset="0.3" Color="Transparent"></GradientStop>
		                <GradientStop Offset="1" Color="Red"></GradientStop>
		            </LinearGradientBrush>
		      </Rectangle.OpacityMask>
		      <Rectangle.RenderTransform>
		            <ScaleTransform ScaleY="-1"></ScaleTransform>
		      </Rectangle.RenderTransform>
	    </Rectangle>
</StackPanel>

5. 改变Button显示的外观

<Button x:Name="TypeButton" Margin="3" Grid.Row="3" Content="改变鼠标形状按钮">
       <Button.Clip>
               <EllipseGeometry RadiusX="90" RadiusY="132" Center="310,135"></EllipseGeometry>                                      
       </Button.Clip>
</Button> 

6. 创建有下拉按钮的Button

<Button x:Name="TwoButton" Margin="3" Grid.Row="4" HorizontalAlignment="Left">
	<Button.Content>
		<StackPanel Orientation="Horizontal" Margin="1">
			<TextBlock Width="250"/>
			<TextBlock Text="可以点击下拉框的按钮"/>
			<TextBlock Width="218"/>
			<Polygon Stroke="Black" StrokeThickness="1" Points="0,0,15,20,30,0,0,0" Fill="Black"/>
		</StackPanel>
	</Button.Content>
</Button>