由於需要,做了一個WPF的無邊框的自定義的Button,代碼如下:
運行效果如下:
常態:

當鼠標經過時的狀態:

在這個基礎上,您可以做出更多的效果(仿照這個是360軟件管家右邊欄實現的效果)如:

我自己已經實現了這個種效果,只是加了一點C#后台代碼,輔助控制動畫的,你自己可以嘗試下,挺好玩的哦。。。呵呵
下面是實現效果的代碼:
View Code
<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>
