wpf style入门 - - - 很酷的实现

最新推荐文章于 2025-09-05 04:20:38 发布

成都慢生活

最新推荐文章于 2025-09-05 04:20:38 发布

阅读量864

点赞数

分类专栏：技术文章标签： wpf setter border button image build

技术专栏收录该内容

254 篇文章

订阅专栏

本文介绍了一种使用WPF实现的圆角按钮样式方法。通过自定义样式和ControlTemplate，可以创建具有动态效果（如鼠标悬停时显示光泽）的圆角按钮。文中详细展示了XAML代码，包括按钮的背景渐变、边框效果以及动态动画效果。

我学习和使用的style

http://geekswithblogs.net/cskardon/archive/2008/06/20/roundedbutton-button-style-wpf.aspx

其他

http://www.wiredprairie.us/journal/2006/09/wpf_decorators_build_your_own.html

http://msdn.microsoft.com/zh-cn/library/ms771597.aspx

http://msdn.microsoft.com/zh-cn/library/system.windows.controls.controltemplate.aspx

我的最终代码(XAML) <UserControl.Resources> <Style x:Key="ButtonFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Border> <Rectangle SnapsToDevicePixels="true" Margin="4" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="RoundedButton" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="BorderThickness" Value="3"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="0,0,1,1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <ControlTemplate.Resources> <Storyboard x:Key="ShowShine"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HideShine"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Border CornerRadius="5,5,5,5" BorderThickness="0" RenderTransformOrigin="0.5,0.5" x:Name="border" BorderBrush="#FFFFFFFF"> <Border.RenderTransform> <TransformGroup> <ScaleTransform ScaleX=".9" ScaleY=".9"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Border.RenderTransform> <Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5" x:Name="border1"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.5*"/> <RowDefinition Height="0.5*"/> </Grid.RowDefinitions> <Border Grid.Row="0" CornerRadius="5,5,0,0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#7EFFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Grid.Row="1" Opacity="0" x:Name="Shine" Width="Auto" Height="Auto" CornerRadius="0,0,5,5" Margin="1,0,-1,0" Background="{TemplateBinding BorderBrush}"/> <ContentPresenter VerticalAlignment="Center" Grid.RowSpan="2" HorizontalAlignment="Center" x:Name="contentPresenter"/> </Grid> </Border> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="Gray"></Setter> <Setter Property="Opacity" TargetName="border1" Value="0.9"/> <Setter Property="Opacity" TargetName="border" Value="1"/> <Setter Property="Opacity" TargetName="contentPresenter" Value="0.9"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="RenderTransform" TargetName="border"> <Setter.Value> <TransformGroup> <ScaleTransform ScaleX="0.8" ScaleY="0.8"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="blue"></Setter> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource HideShine}" x:Name="HideShine_BeginStoryboard"/> </Trigger.ExitActions> <Trigger.EnterActions> <BeginStoryboard x:Name="ShowShine_BeginStoryboard" Storyboard="{StaticResource ShowShine}"/> </Trigger.EnterActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid> <Button Name="btn" Style="{DynamicResource RoundedButton}" Background="Transparent" Height="30" Focusable="False"> <Grid> <Image Name="img" Source="../background.png" /> <TextBlock Text="Button" VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontWeight="Bold"></TextBlock> </Grid> </Button> </Grid>