WPF 按钮样式
2011-11-02 09:24
459 查看
项目中用到的WPF 按钮样式,,,
按钮样式
APP
<!--定义按钮样式--> <Style TargetType="Button"> <Setter Property="Foreground" Value="Black"/> <!--修改模板属性--> <Setter Property="Template"> <Setter.Value> <!--控件模板--> <ControlTemplate TargetType="Button"> <!--背景色--> <Border x:Name="back" Opacity="0.8" CornerRadius="3"> <Border.BitmapEffect> <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}"/> </Border.BitmapEffect> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5"> <GradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/> <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/> <GradientStop Color="#FFF" Offset="1"/> </GradientStopCollection> </GradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> <!--前景色及边框--> <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="#6FFF" Offset="0.5"/> <GradientStop Color="#1111" Offset="0.51"/> </GradientStopCollection> </GradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> <!--按钮内容--> <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"> <ContentPresenter.BitmapEffect> <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3"/> </ContentPresenter.BitmapEffect> </ContentPresenter> </Border> </Border> <!--触发器--> <ControlTemplate.Triggers> <!--鼠标移入移出--> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <!--按钮按下弹起--> <Trigger Property="IsPressed" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <!--按钮失效--> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#B444"/> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)"/> <DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)"/> <ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)"/> <ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/> <ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)"/> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--定义按钮样式--> <Style x:Key="buttonTemplate" TargetType="Button"> <!--修改模板属性--> <Setter Property="Template"> <Setter.Value> <!--控件模板--> <ControlTemplate TargetType="Button"> <!--只有Grid才能装下这么多Child--> <Grid> <!--带特效的底层背景--> <Border x:Name="back" Opacity="0.8" CornerRadius="2"> <Border.BitmapEffect> <OuterGlowBitmapEffect Opacity="0.8" GlowSize="0" GlowColor="Red"/> </Border.BitmapEffect> <Ellipse Width="49" Height="49"> <Ellipse.Fill> Red </Ellipse.Fill> </Ellipse> <!--按钮呈圆形--> </Border> <Ellipse x:Name="outerCircle" Width="50" Height="50"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="DarkOliveGreen"/> <GradientStop Offset="1" Color="Azure"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Width="40" Height="40"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="White"/> <GradientStop Offset="1" Color="Transparent"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!--按钮内容--> <Border> <TextBlock x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"> </TextBlock> </Border> </Grid> <!--触发器--> <ControlTemplate.Triggers> <Trigger Property="Button.IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation To="#4FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/> <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <Trigger Property="Button.IsPressed" Value="True"> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX=".9" ScaleY=".9"/> </Setter.Value> </Setter> <Setter Property="RenderTransformOrigin" Value=".5,.5"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
按钮样式
APP
<Application x:Class="AgingLife.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:AgingLife.ViewModel" xmlns:v="clr-namespace:AgingLife.View" mc:Ignorable="d" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="style/ALListBoxStyle.xaml"/> <ResourceDictionary Source="style/ALTabControlStyle.xaml"/> <ResourceDictionary Source="style/ALButtonStyle.xaml"/> </ResourceDictionary.MergedDictionaries> <!--Global View Model Locator--> <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True"/> <DataTemplate DataType="{x:Type vm:AllocationViewModel}"> <v:AllocationView></v:AllocationView> </DataTemplate> <DataTemplate DataType="{x:Type vm:CoolingConViewModel}"> <v:CoolingConView></v:CoolingConView> </DataTemplate> <DataTemplate DataType="{x:Type vm:HardwareconViewModel}"> <v:HardwareconView></v:HardwareconView> </DataTemplate> <DataTemplate DataType="{x:Type vm:TemperatureBoxViewModel}"> <v:TemperatureBoxView></v:TemperatureBoxView> </DataTemplate> </ResourceDictionary> </Application.Resources> </Application>
<ResourceDictionary Source="style/ALButtonStyle.xaml"/> 为引用样式文件...
相关文章推荐
- WPF界面设计技巧(2)—自定义漂亮的按钮样式
- 清空WPF按钮的自带样式,以及透明化按钮
- WPF按钮清空自带样式,以及透明按钮时,Grid的Background属性设置引起"点击"问题.
- 清空WPF自带样式,以及透明按钮
- WPF微信聊天和通讯录按钮样式代码分享
- WPF - 自定义按钮样式
- [WPF] 自定义按钮样式
- WPF 按钮的控件的样式转换(1)
- WPF自定义控件与样式(2)-自定义按钮FButton
- wpf自定义按钮样式
- WPF按钮样式
- BLEND技术改按钮样式 应用到WPF
- WPF 设置button样式,鼠标经过按钮字体变大
- WPF界面设计技巧(2)—自定义漂亮的按钮样式
- WPF自定义漂亮的按钮样式
- [wpf]如果根据其他控件改变按钮的Path样式
- C# WPF button样式清空以及关闭 最小化 按钮重置
- WPF 按钮样式只触发器(3)
- WPF自定义控件和样式之自定义按钮(Button)
- wpf textblock 会覆盖 button里面字体样式的解决方法 还有button的style覆盖。。datepicker里面的按钮的style