BUTTON WPF 样式

 


<Application x:Class="AnimatedButton.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>


            <GradientStopCollection x:Key="MyGlassGradientStopsResource">
                <GradientStop Color="WhiteSmoke" Offset="0.2" />
                <GradientStop Color="Transparent" Offset="0.4" />
                <GradientStop Color="WhiteSmoke" Offset="0.5" />
                <GradientStop Color="Transparent" Offset="0.75" />
                <GradientStop Color="WhiteSmoke" Offset="0.9" />
                <GradientStop Color="Transparent" Offset="1" />
            </GradientStopCollection>

            <LinearGradientBrush x:Key="MyGlassBrushResource"
   StartPoint="0,0" EndPoint="1,1" Opacity="0.75"
   GradientStops="{StaticResource MyGlassGradientStopsResource}" />
            <!-- Styles and other resources below here. -->
       

 

        <LinearGradientBrush x:Key="GrayBlueGradientBrush"
    StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="DarkGray" Offset="0" />
            <GradientStop Color="#CCCCFF" Offset="0.5" />
            <GradientStop Color="DarkGray" Offset="1" />
        </LinearGradientBrush>

        <Style TargetType="{x:Type Button}">
            <Setter Property="Background"
      Value="{StaticResource GrayBlueGradientBrush}" />
            <Setter Property="Width" Value="80" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="Template">


                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Width="{TemplateBinding Width}"
      Height="{TemplateBinding Height}" ClipToBounds="True">

                            <!-- Outer Rectangle with rounded corners. -->
                            <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

                            <!-- Inner Rectangle with rounded corners. -->
                            <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch" Stroke="Transparent"
        StrokeThickness="20"
        Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"
      />

                            <!-- Glass Rectangle -->
                            <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
        Fill="{StaticResource MyGlassBrushResource}"
        RenderTransformOrigin="0.5,0.5">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="LightBlue" />
                                            <GradientStop Offset="1.0" Color="Gray" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>

                                <!-- These transforms have no effect as they
             are declared here.
             The reason the transforms are included is to be targets
             for animation (see later). -->
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>

                                <!-- A BevelBitmapEffect is applied to give the button a
               "Beveled" look. -->
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>
                            </Rectangle>

                            <!-- Present Text of the button. -->
                            <DockPanel Name="myContentPresenterDockPanel">
                                <ContentPresenter x:Name="myContentPresenter" Margin="20"
          Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
                            </DockPanel>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <!-- Set properties when mouse pointer is over the button. -->
                            <Trigger Property="IsMouseOver" Value="True">

                                <!-- Below are three property settings that occur when the
         condition is met (user mouses over button).  -->
                                <!-- Change the color of the outer rectangle when user          mouses over it. -->
                                <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

                                <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
                                <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />

                                <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
                                <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
                                    <Setter.Value>
                                        <BlurBitmapEffect Radius="1" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <!-- Set properties when button has focus. -->
                            <Trigger Property="IsFocused" Value="true">
                                <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />
                                <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
                            </Trigger>


                            <!-- Animations that start when mouse enters and leaves button. -->
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                        <Storyboard>

                                            <!-- This animation makes the glass rectangle shrink in the X direction. -->
                                            <DoubleAnimation Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
          By="-0.1" Duration="0:0:0.5" />

                                            <!-- This animation makes the glass rectangle shrink in the Y direction. -->
                                            <DoubleAnimation
        Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
          By="-0.1" Duration="0:0:0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>

                                    <!-- Stopping the storyboard sets all animated properties back to default. -->
                                    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                                </EventTrigger.Actions>
                            </EventTrigger>


                            <!-- Animation fires when button is clicked, causing glass to spin.  -->
                            <EventTrigger RoutedEvent="Button.Click">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
          By="360" Duration="0:0:0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>

 


                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>


            </Setter>

        </Style>  
       
    </Application.Resources>  

</Application>

 

 

WPF button样式

转载于:https://www.cnblogs.com/wangrenzhu/archive/2012/01/17/2766842.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值