`
jiasongmao
  • 浏览: 648089 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

wpf仿vista得玻璃效果按钮

    博客分类:
  • WPF
阅读更多
仿vista玻璃效果的按钮样式:

<Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="GlassButtonStyle" 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="BorderBrush" Value="{x:Static Microsoft_Windows_Themes:ClassicBorderDecorator.ClassicBorderBrush}"/>
            <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="Timeline1">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Timeline2">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grow" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#00FFFFFF"/>
                                </ColorAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Border Background="#4C000000" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                            <Border Background="#7F000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.5*"/>
                                        <RowDefinition Height="0.5*"/>
                                    </Grid.RowDefinitions>
                                    <Border Opacity="0" Margin="0,0,0,0" x:Name="grow" CornerRadius="4,4,4,4" Grid.RowSpan="2">
                                        <Border.Background>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="1.995" ScaleY="3.322"/>
                                                        <SkewTransform AngleX="0" AngleY="0"/>
                                                        <RotateTransform Angle="0"/>
                                                        <TranslateTransform X="-0.453" Y="0.1"/>
                                                    </TransformGroup>
                                                </RadialGradientBrush.RelativeTransform>
                                                <GradientStop Color="#FF26ECCD" Offset="0.249"/>
                                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                                            </RadialGradientBrush>
                                        </Border.Background>
                                    </Border>
                                    <Border x:Name="shine" CornerRadius="4,4,0,0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,2.167" StartPoint="0.5,-3.167">
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                                                <GradientStop Color="#7DFFFFFF" Offset="0.335"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                    <ContentPresenter HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.RowSpan="2"/>
                                </Grid>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Visibility" TargetName="grow" Value="Hidden"/>
                                <Setter Property="Opacity" TargetName="shine" Value="0"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true"/>
                            <Trigger Property="IsDefaulted" Value="true"/>
                            <Trigger Property="IsPressed" Value="true"/>
                            <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="Timeline1_BeginStoryboard" Storyboard="{StaticResource Timeline1}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


<Style x:Key="GlassButton" TargetType="Button">
            <Setter Property="Background" Value="#FF1F3B53"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">

                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#CC000000"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="shine" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" 
												Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <!-- <Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
												<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard> -->
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <!--<Storyboard>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
												<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>-->
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="0.507*"/>
                                            <RowDefinition Height="0.493*"/>
                                        </Grid.RowDefinitions>
                                        <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                                            <Border.Background>
                                                <RadialGradientBrush>
                                                    <RadialGradientBrush.RelativeTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                                                            <SkewTransform AngleX="0" AngleY="0"/>
                                                            <RotateTransform Angle="0"/>
                                                            <TranslateTransform X="-0.368" Y="-0.152"/>
                                                        </TransformGroup>
                                                    </RadialGradientBrush.RelativeTransform>
                                                    <GradientStop Color="#B28DBDFF" Offset="0"/>
                                                    <GradientStop Color="#008DBDFF" Offset="1"/>
                                                </RadialGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                                        <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
                                                    <GradientStop Color="#99FFFFFF" Offset="0"/>
                                                    <GradientStop Color="#33FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Border>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



使用方法:
<Button HorizontalAlignment="Right" Margin="0,31,56,0" Style="{DynamicResource GlassButtonStyle}" VerticalAlignment="Top" Width="136" Height="40" Content="Button" Foreground="#FFFFFFFF"/>

注意要添加PresentationFreamwork.Classic引用。

对于第二个样式,需要引入xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics