WPF之Button控件应用

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

　　具体应用:

　　1. 创建透明的Button

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

　　2. 创建带图片的按钮

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

　　3. 鼠标移动变色的按钮

　　1) 首先设置鼠标的样式

1. <Style x:Key="ButtonFocusVisual">  
2.     <Setter Property="Control.Template">  
3.         <Setter.Value>  
4.             <ControlTemplate>  
5.                 <Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
    StrokeThickness="1" StrokeDashArray="1 2"/>  
6.             </ControlTemplate>  
7.         </Setter.Value>  
8.     </Setter>  
9. </Style>  
10. <LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">  
11.     <GradientStop Color="#FFFFFFFF" Offset="0"/>  
12.     <GradientStop Color="#FFF0F0EA" Offset="0.9"/>  
13. </LinearGradientBrush>  
14. <SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>  
15. <Style x:Key="MouseButtonStyle" TargetType="{x:Type Button}">  
16.     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>  
17.     <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>  
18.     <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>  
19.     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>  
20.     <Setter Property="HorizontalContentAlignment" Value="Center"/>  
21.     <Setter Property="VerticalContentAlignment" Value="Center"/>  
22.     <Setter Property="Template">  
23.         <Setter.Value>  
24.             <ControlTemplate TargetType="{x:Type Button}">  
25.                 <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}"   
26.                     Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}"   
27.                     RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}"  
28.                     SnapsToDevicePixels="true" ThemeColor="NormalColor">  
29.                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
30.                          Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"   
31.                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"   
32.                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>  
33.                 </Microsoft_Windows_Themes:ButtonChrome>  
34.                           <ControlTemplate.Triggers>  
35.                         <Trigger Property="IsKeyboardFocused" Value="true">  
36.                             <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>  
37.                         </Trigger>  
38.                         <Trigger Property="ToggleButton.IsChecked" Value="true">  
39.                             <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>  
40.                         </Trigger>  
41.                         <Trigger Property="IsEnabled" Value="false">  
42.                             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>  
43.                         </Trigger>                                      
44.                         <Trigger Property="IsMouseOver" Value="true">                       
45.                             <Setter Property="Background" Value="Blue" />                       
46.                         </Trigger>              
47.                     </ControlTemplate.Triggers>  
48.             </ControlTemplate>  
49.         </Setter.Value>  
50.     </Setter>  
51. </Style>  

　　2)设置Button 按钮

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

　　4. 创建有倒影的Button

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

　　5. 改变Button显示的外观

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

　　6. 创建有下拉按钮的Button

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

　　本文来自wangyong0921的博客，原文地址：http://blog.csdn.net/wangyong0921/article/details/6948026

 

 

 

Button 透明效果

<Window x:Class="ControlTest2.ButtonGlassTest"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="ButtonGlassTest"Height="480"Width="640">

<Window.Resources>

<ControlTemplate x:Key="GlassButton"TargetType="{x:Type Button}">

<ControlTemplate.Resources>

<Storyboard x:Key="Timeline1">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Storyboard.TargetName="glow"Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Key="Timeline2">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Storyboard.TargetName="glow"Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</ControlTemplate.Resources>

<Border BorderBrush="#FFFFFFFF"BorderThickness="1,1,1,1"CornerRadius="4,4,4,4">

<Border x:Name="border"Background="#7F000000"BorderBrush="#FF000000"BorderThickness="1,1,1,1"CornerRadius="4,4,4,4">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="0.507*"/>

<RowDefinition Height="0.493*"/>

</Grid.RowDefinitions>

<Border Opacity="0"HorizontalAlignment="Stretch"x:Name="glow"Width="Auto"Grid.RowSpan="2"CornerRadius="4,4,4,4">

<Border.Background>

<RadialGradientBrush>

<RadialGradientBrush.RelativeTransform>

<TransformGroup>

<ScaleTransform ScaleX="1.702"ScaleY="2.243"/>

<SkewTransform AngleX="0"AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="-0.368"Y="-0.152"/>

</TransformGroup>

</RadialGradientBrush.RelativeTransform>

<GradientStop Color="#B28DBDFF"Offset="0"/>

<GradientStop Color="#008DBDFF"Offset="1"/>

</RadialGradientBrush>

</Border.Background>

</Border>

<ContentPresenter HorizontalAlignment="Center"VerticalAlignment="Center"Width="Auto"Grid.RowSpan="2"/>

<Border HorizontalAlignment="Stretch"Margin="0,0,0,0"x:Name="shine"Width="Auto"CornerRadius="4,4,0,0">

<Border.Background>

<LinearGradientBrush EndPoint="0.494,0.889"StartPoint="0.494,0.028">

<GradientStop Color="#99FFFFFF"Offset="0"/>

<GradientStop Color="#33FFFFFF"Offset="1"/>

</LinearGradientBrush>

</Border.Background>

</Border>

</Grid>

</Border>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsPressed"Value="True">

<Setter Property="Opacity"TargetName="shine"Value="0.4"/>

<Setter Property="Background"TargetName="border"Value="#CC000000"/>

<Setter Property="Visibility"TargetName="glow"Value="Hidden"/>

</Trigger>

<Trigger Property="IsMouseOver"Value="True">

<Trigger.EnterActions>

<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard x:Name="Timeline2_BeginStoryboard"Storyboard="{StaticResource Timeline2}"/>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<Grid>

<Grid.Background>

<LinearGradientBrush EndPoint="0.486,0.986"StartPoint="0.486,0">

<GradientStop Color="#FF000000"Offset="0"/>

<GradientStop Color="#FFD0D0D0"Offset="1"/>

<GradientStop Color="#FF8D8D8D"Offset="0.558"/>

<GradientStop Color="#FF8D8D8D"Offset="0.76"/>

<GradientStop Color="#FF747474"Offset="0.615"/>

</LinearGradientBrush>

</Grid.Background>

<Button HorizontalAlignment="Left"Margin="31,0,0,182"VerticalAlignment="Bottom"Width="176"Height="34"Content="Button"Foreground="#FFFFFFFF"

Template="{DynamicResource GlassButton}"/>

<Image  Margin="221,89,27.001,73"Source="Aero_Grass.jpg"Stretch="Fill">

<Image.OpacityMask>

<RadialGradientBrush>

<GradientStop Color="#FF000000"Offset="0"/>

<GradientStop Color="#00FFFFFF"Offset="1"/>

</RadialGradientBrush>

</Image.OpacityMask>

</Image>

<Button HorizontalAlignment="Right"Margin="0,0,120,158"VerticalAlignment="Bottom"Width="179"Height="34"Content="My New Glass Button"

Foreground="#FFFFFFFF"Template="{DynamicResource GlassButton}"/>

<Button Width="179"Foreground="#FFFFFFFF"Template="{DynamicResource GlassButton}"HorizontalAlignment="Right"Margin="0,192,120,218">

<StackPanel HorizontalAlignment="Left"Width="Auto"Height="Auto"Orientation="Horizontal">

<Image Width="20"Height="20"Source="Aero_Grass.jpg"Stretch="Fill"/>

<TextBlock Margin="5,0,50,0"VerticalAlignment="Center"FontSize="12"Text="Internet Explorer"TextWrapping="Wrap"/>

</StackPanel>

</Button>

</Grid>

</Window>

　　本文来自work hard work smart的博客，原文地址：http://www.cnblogs.com/linlf03/archive/2011/11/08/2241135.html