WPF自定义样式系列(一)——Button按钮样式

2017-09-25 20:03:15来源:CSDN作者:qq_36663276人点击

分享

普通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="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.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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台