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>