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>