无边框Button(WPF)
由于需要,做了一个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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统