由于需要,做了一个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>