无边框Button(WPF)

50 篇文章 2 订阅
28 篇文章 0 订阅
由于需要,做了一个WPF的无边框的自定义的Button,代码如下:

  运行效果如下:

常态:

当鼠标经过时的状态:

在这个基础上,您可以做出更多的效果(仿照这个是360软件管家右边栏实现的效果)如:

我自己已经实现了这个种效果,只是加了一点C#后台代码,辅助控制动画的,你自己可以尝试下,挺好玩的哦。。。呵呵

下面是实现效果的代码:

<Style x:Key="MainButtonStyle" TargetType="Button"
            BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Grid.Resources>
                            <Color x:Key="LinearBevelLightStartColor">Transparent</Color>
                            <Color x:Key="LinearBevelLightEndColor">Transparent</Color>
                            <Color x:Key="LinearBevelDarkStartColor">Transparent</Color>
                            <Color x:Key="LinearBevelDarkEndColor">Transparent</Color>
                            <Color x:Key="PressedEndColor">#1932D4</Color>
                            <SolidColorBrush x:Key="BorderBrush"
                                    Color="#FF5E5E5E" />
                            <SolidColorBrush x:Key="AccentBrush"
                                    Color="#FF000000" />
                            <SolidColorBrush x:Key="DisabledBrush"
                                    Color="#A5FFFFFF" />
                        </Grid.Resources>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition
                                            GeneratedDuration="00:00:00.2000000"
                                            To="MouseOver" />
                                    <VisualTransition
                                            GeneratedDuration="0:0:0.1"
                                            To="Pressed" />
                                    <VisualTransition
                                            GeneratedDuration="00:00:00.2000000"
                                            From="Normal" To="MouseOver" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal">
                                    <Storyboard />
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <!--<Storyboard />-->
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames
                                                Duration="0"
                                                Storyboard.TargetName="BackgroundGradient"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <SplineColorKeyFrame KeyTime="0"
                                                    Value="#42FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                                Duration="0"
                                                Storyboard.TargetName="BackgroundGradient"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <SplineColorKeyFrame KeyTime="0"
                                                    Value="#42FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                                Duration="0"
                                                Storyboard.TargetName="BackgroundGradient"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                            <SplineColorKeyFrame KeyTime="0"
                                                    Value="#42FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                                Duration="0"
                                                Storyboard.TargetName="BackgroundGradient"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                            <SplineColorKeyFrame KeyTime="0"
                                                    Value="#42FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                                Duration="0"
                                                Storyboard.TargetName="DisabledVisual"
                                                Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                    Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard />
                                </VisualState>
                                <VisualState x:Name="Unfocused">
                                    <Storyboard />
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="Background"
                                Fill="{TemplateBinding Background}" />
                        <Rectangle x:Name="BackgroundGradient"
                                Stroke="{StaticResource BorderBrush}"
                                StrokeThickness="0" Margin="0" RadiusX="5" RadiusY="5">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="1,1"
                                        StartPoint="0,0">
                                    <GradientStop
                                            Color="{StaticResource LinearBevelLightStartColor}"
                                            Offset="0" />
                                    <GradientStop
                                            Color="{StaticResource LinearBevelLightEndColor}"
                                            Offset="0.326" />
                                    <GradientStop
                                            Color="{StaticResource LinearBevelDarkStartColor}"
                                            Offset="0.5" />
                                    <GradientStop Color="Transparent" Offset="0.7" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Grid x:Name="FocusVisual" Visibility="Collapsed">
                            <Rectangle Margin="-2,1,-2,-2"
                                    Stroke="{StaticResource AccentBrush}"
                                    StrokeThickness="0"
                                    StrokeDashArray="1.5 1.5" />
                        </Grid>
                        <ContentPresenter Margin="4,5,4,4"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        <Rectangle x:Name="DisabledVisual"
                                IsHitTestVisible="false" Opacity="0"
                                Fill="{StaticResource DisabledBrush}"
                                RadiusX="0" RadiusY="0" Margin="-1,-1,-1,-1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值