WPF之Button控件应用

来源：互联网发布：液晶通用版用编程吗编辑：程序博客网时间：2024/06/06 06:35

　　测试环境: 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>

　　本文来自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>

<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