[Silverlight] Mac OS 风格按钮 Style 实现的更新版-陈荣

 

[Silverlight] Mac OS 风格按钮 Style 实现的更新版（针对 Silverlight 2 RTW)

作者：陈荣

在 Silverlight 2 beta 2 时，我曾经写了一篇帖子实现了苹果风格的按钮样式（ Silverlight 下苹果 (Mac OS)风格按钮的实现）。

而现在 Silverlight 2 终于发布了，也给之前的代码带来了很多问题，导致无法继续使用。

经过一阵探索，我终于成功修改了这个代码，现在在正式版下也能工作正常了。其关键点如下：

1. 在 beta 2 时，需要采用 <vsm:Setter> 和 <vsm:Style> 的语法编写样式。其中 vsm 是个名称空间引用：
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
而正式版下直接用 <Style> 和 <Setter> 表签即可。
这个问题如果不修改，程序可以编译通过，但是运行时会报一个莫名其妙的 “ AG_E_PARSER_PROPERTY_NOT_FOUND ”错误。

2. ContentPresenter 和 ContentControl 控件删除了如下属性：
Textdecorations,
textwrapping,
TextAlignment.

因此，现在必须在 template 中将 ContentPresenter 的定位改用容器 Button 的 HorizontalContentAlignment 和 VerticalContentAlignment 属性来控制。代码如下：

  
  

<ContentPresenter Margin="4,5,4,4" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
  
  

修改成功后的 Style 全部代码如下：

  
  

<UserControl
   
   
    x:Class="UserControl"

   
   
    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"

   
   
    mc:Ignorable="d"

   
   
    d:DesignWidth="640" d:DesignHeight="480">
   
   
 
   
   
    <UserControl.Resources>
   
   
        <Style x:Key="MyButton" targettype="Button">
   
   
            <Setter Property="IsEnabled" Value="true"/>
   
   
            <Setter Property="IsTabStop" Value="true"/>
   
   
            <Setter Property="Background" Value="#FF003255"/>
   
   
            <Setter Property="Foreground" Value="#FF313131"/>
   
   
            <Setter Property="MinWidth" Value="5"/>
   
   
            <Setter Property="MinHeight" Value="5"/>
   
   
            <Setter Property="Margin" Value="0"/>
   
   
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
   
   
            <Setter Property="VerticalContentAlignment" Value="Center"/>
   
   
            <Setter Property="Cursor" Value="Arrow"/>
   
   
            <Setter Property="FontSize" Value="11" />
   
   
            <Setter Property="Template">
   
   
                <Setter.Value>
   
   
                    <ControlTemplate targettype="Button">
   
   
                        <Grid>
   
   
                            <Grid.Resources>
   
   
                                <Color x:Key="LinearBevelLightStartColor">#FFFFFFFF</Color>
   
   
                                <Color x:Key="LinearBevelLightEndColor">#F4E2E0E0</Color>
   
   
                                <Color x:Key="LinearBevelDarkStartColor">#E0E5E5E5</Color>
   
   
                                <Color x:Key="LinearBevelDarkEndColor">#B2FFFFFF</Color>
   
   
                                <Color x:Key="MouSEOverLinearBevelDarkEndColor">#7FFC1717</Color>
   
   
                                <Color x:Key="HoverLinearBevelLightStartColor">#FCFFFFFF</Color>
   
   
                                <Color x:Key="HoverLinearBevelLightEndColor">#EAFFFFFF</Color>
   
   
                                <Color x:Key="HoverLinearBevelDarkStartColor">#D8FFFFFF</Color>
   
   
                                <Color x:Key="HoverLinearBevelDarkEndColor">#4CFFFFFF</Color>
   
   
                                <Color x:Key="CurvedBevelFillStartColor">#B3FFFFFF</Color>
   
   
                                <Color x:Key="CurvedBevelFillEndColor">#3CFFFFFF</Color>
   
   
                                <SolidColorBrush x:Key="BorderBrush" Color="#FF5E5E5E"/>
   
   
                                <SolidColorBrush x:Key="AccentBrush" Color="#FF000000"/>
   
   
                                <SolidColorBrush x:Key="disabledBrush" Color="#A5FFFFFF"/>
   
   
                                <LinearGradientBrush x:Key="FocusedstrokeBrush" EndPoint="0.5,1" StartPoint="0.5,0">
   
   
                                    <GradientStop Color="#B2FFFFFF" Offset="0"/>
   
   
                                    <GradientStop Color="#51FFFFFF" Offset="1"/>
   
   
                                    <GradientStop Color="#66FFFFFF" Offset="0.325"/>
   
   
                                    <GradientStop Color="#1EFFFFFF" Offset="0.325"/>
   
   
                                </LinearGradientBrush>
   
   
                            </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>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#c8d5ed" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#97c2ee" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#6eadee" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#aff9ff" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                        </Storyboard>
   
   
                                    </VisualState>
   
   
                                    <VisualState x:Name="pressed">
   
   
                                        <Storyboard>
   
   
                                            <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
   
   
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".2"/>
   
   
                                            </DoubleAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#bac5e8" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#7bb2e9" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#4d9ae7" />
   
   
                                            </ColorAnimationUsingKeyFrames>
   
   
                                            <ColorAnimationUsingKeyFrames 
   
   
                                                Duration="0" 
   
   
                                                Storyboard.TargetName="BackgroundGradient" 
   
   
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
   
   
                                                <SplineColorKeyFrame KeyTime="0" Value="#85eaff" />
   
   
                                            </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>
   
   
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
   
   
                                                <discreteObjectKeyFrame KeyTime="0">
   
   
                                                    <discreteObjectKeyFrame.Value>
   
   
                                                        <Visibility>Visible</Visibility>
   
   
                                                    </discreteObjectKeyFrame.Value>
   
   
                                                </discreteObjectKeyFrame>
   
   
                                            </ObjectAnimationUsingKeyFrames>
   
   
                                        </Storyboard>
   
   
                                    </VisualState>
   
   
                                    <VisualState x:Name="Unfocused">
   
   
                                        <Storyboard/>
   
   
                                    </VisualState>
   
   
                                </VisualStateGroup>
   
   
                            </visualstatemanager.VisualStateGroups>
   
   
                            <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" RadiusX="11" RadiusY="11"/>
   
   
                            <Rectangle x:Name="BackgroundGradient" stroke="{StaticResource BorderBrush}" strokeThickness="1" RadiusX="11" RadiusY="11" Margin="-1,-1,-1">
   
   
                                <Rectangle.Fill>
   
   
                                    <LinearGradientBrush EndPoint="0.7,1" StartPoint="0.7,0">
   
   
                                        <GradientStop Color="{StaticResource LinearBevelLightStartColor}" Offset="0"/>
   
   
                                        <GradientStop Color="{StaticResource LinearBevelLightEndColor}" Offset="0.326"/>
   
   
                                        <GradientStop Color="{StaticResource LinearBevelDarkStartColor}" Offset="0.344"/>
   
   
                                        <GradientStop Color="#FFFFFFFF" Offset="0.786"/>
   
   
                                    </LinearGradientBrush>
   
   
                                </Rectangle.Fill>
   
   
                            </Rectangle>
   
   
                            <Grid x:Name="FocusVisual" Visibility="Collapsed">
   
   
                                <Rectangle Margin="-2,1,-2,-2" stroke="{StaticResource AccentBrush}" strokeThickness="1" strokeDashArray="1.5 1.5" RadiusX="3" RadiusY="3" />
   
   
                            </Grid>
   
   
                            <ContentPresenter Margin="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="11" RadiusY="11" Margin="-1,-1"/>
   
   
                        </Grid>
   
   
                    </ControlTemplate>
   
   
                </Setter.Value>
   
   
            </Setter>
   
   
        </Style>
   
   
    </UserControl.Resources>
   
   
 
   
   
    <Grid x:Name="LayoutRoot" Background="White" >
   
   
        <Button Height="35" HorizontalAlignment="Stretch" Margin="198,132,262,0" Style="{StaticResource MyButton}" VerticalAlignment="Top" Content="Button"/>
   
   
    </Grid>
   
   
</UserControl>