WPF自定义样式系列（一）——Button按钮样式

普通Button

悬浮前：

悬浮时：

<!--资源样式-->        <Style x:Key="BUTTON" TargetType="{x:Type Button}">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="Button">                        <Border Name="bdr" CornerRadius="3" Opacity="0.5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">                            <!--可使用ContentPresenter代替-->                            <!--Foreground的值White可以替换为{TemplateBinding Foreground}-->                            <Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Foreground="White" Content="{TemplateBinding Content}"/>                        </Border>                        <ControlTemplate.Triggers>                            <Trigger Property="IsMouseOver" Value="True">                                <Trigger.EnterActions>                                    <BeginStoryboard >                                        <Storyboard>                                            <DoubleAnimation To="0.7"  Duration="0:0:0.2" Storyboard.TargetName="bdr" Storyboard.TargetProperty="Opacity" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.EnterActions>                                <Trigger.ExitActions>                                    <BeginStoryboard >                                        <Storyboard>                                            <DoubleAnimation To="0.5"  Duration="0:0:0.2" Storyboard.TargetName="bdr"  Storyboard.TargetProperty="Opacity" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.ExitActions>                            </Trigger>                        </ControlTemplate.Triggers>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

使用方法：

 <Button Content="hello" Style="{StaticResource BUTTON}" Background="#FF2FB09E" Width="100" BorderBrush="{x:Null}" Margin="100,100,0,0" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" />

透明缩放Button

中心图片是自己的图标文件。悬浮时会出现半透明背景，并且图片会动画放大。
悬浮前和悬浮时（左和右）

<Style x:Key="BUTTON" TargetType="Button">        <Setter Property="VerticalAlignment" Value="Top"/>        <Setter Property="HorizontalAlignment" Value="Right"/>        <Setter Property="Template">                <Setter.Value>                <ControlTemplate TargetType="{x:Type Button}">                    <Grid  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">                        <Grid Name="g" Opacity="0" Background="LightGray"/>                        <Grid Name="grd" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" >                            <Grid.RenderTransform>                                <TransformGroup>                                    <!--悬浮时旋转图片-->                                    <!--<RotateTransform x:Name="rotate" Angle="0"-->                                    <ScaleTransform x:Name="scale" ScaleX="0.8" ScaleY="0.8"/>                                </TransformGroup>                            </Grid.RenderTransform>                        </Grid>                        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />                    </Grid>                    <ControlTemplate.Triggers>                        <Trigger Property="IsMouseOver" Value="True">                            <Trigger.EnterActions>                                <BeginStoryboard >                                    <Storyboard>                                        <DoubleAnimation To="0.2"  Duration="0:0:0.2" Storyboard.TargetName="g" Storyboard.TargetProperty="Opacity" />                                        <!--<DoubleAnimation To="90"  Duration="0:0:0.5" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />-->                                        <DoubleAnimation To="1"  Duration="0:0:0.2" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" />                                        <DoubleAnimation To="1"  Duration="0:0:0.2" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" />                                    </Storyboard>                                </BeginStoryboard>                            </Trigger.EnterActions>                            <Trigger.ExitActions>                                <BeginStoryboard >                                    <Storyboard>                                        <DoubleAnimation To="0"  Duration="0:0:0.2" Storyboard.TargetName="g" Storyboard.TargetProperty="Opacity" />                                        <!--<DoubleAnimation To="0"  Duration="0:0:0.5" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />-->                                        <DoubleAnimation To="0.8"  Duration="0:0:0.2" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" />                                        <DoubleAnimation To="0.8"  Duration="0:0:0.2" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" />                                    </Storyboard>                                </BeginStoryboard>                            </Trigger.ExitActions>                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

使用方法：

<Button Width="30" Height="30" ToolTip="设置" Style="{StaticResource BUTTON}" Margin="100,100,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" >    <Button.Background>            <ImageBrush ImageSource="pack://application:,,,/Resources/Pictures/TITLEBUTTON/white_setting.png"/>    </Button.Background></Button>

更多按钮下载：
http://download.csdn.net/download/qq_36663276/10003377
资源介绍内有预览。