第一步:开启Expression Blend2 SP1
第二步:新建一个项目。
第三步:拖一个Button控件至美工板(这个名字真奇怪)上。
第四步:使用美工板顶部的痕迹导航栏(这个名字更奇怪)来创建按钮模板的副本。
第五步:定义Style名称和位置。
第六步:把App.xaml中原Button样式不需要的部分屏蔽掉。
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Cinlap.App" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Application.Resources>
<!-- Resources scoped at the Application level should be defined here. -->
<Style x:Key="ButtonXStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<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 Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<!--<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
</ColorAnimationUsingKeyFrames>-->
</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 Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>-->
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!--<Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Grid Margin="1" Background="{TemplateBinding Background}">
<Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
<Rectangle x:Name="BackgroundGradient">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>-->
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<!--<Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3"/>
<Rectangle Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2"/>-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
第七步:在App.xaml的适当位置添加一个Grid,命名为NormalState,并把这个图层置于contentPresenter图层之上。
第八步:程序员们最头疼的了,使用钢笔工具,绘制一个右下角是R角的矩形(F4键可以使工作区域变大些)。
靠,火死了,Blend挂了,重启中...
兄弟们,存盘是多么重要的一件事呀,任何时候千万别忘了存盘,尤其在绘图的时候,血的教训啊!
第九步:修改该Path的一些属性。
名称-->OutterBorder
外观-->StrokeThickness = 0
画笔-->Fill = null
画笔-->Stroke = null
布局-->Margin = 0,0,0,0
第十步:将右下角修改为R角,没有美工基础的兄弟有的郁闷了。
i.先选取工具
ii.修改OutterBorder的右下角
第十一步:复制OutterBorder,粘贴两次,并修改各图层属性如下图。顺便将InnerBorder的Margin属性设置为1,Body的Margin属性设置为2
第十二步:修改新建的Path的背景色,最终按钮显示如下效果。
第十三步:新建一个Grid,名称为MouseOverState,再复制刚才的三个图层到MouseOverState内部,如果隐藏NormalState,则会显示如下效果。
第十四步:复制MOBody图层,复制两次,分别命名为MOBodyUpShade和MOBodyDownShade(名字起的也不怎么样)记得把这两个新图层的Margin属性都设置2,然后把MOBodyDownShade拖拽成原高度的1/2(偷懒了,嘿嘿),设置其背景画刷,使其看起来如下所示。
OK,本来想把Buton的所有状态都绘制出来,但无奈,绘画功底实在太差,很吃力,所以就先画这两个吧,接下来我们把VisualState加上去。
第十五步:将MouseOverState的Opacity属性设置为0。修改<vsm:VisualState x:Name="MouseOver">配置节,使其如下代码所示。
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames><!--
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
</ColorAnimationUsingKeyFrames>-->
</Storyboard>
</vsm:VisualState>
大功告成,让我们现在打开VS2008 SP1 + Silverlight 2 Tools
第十六步:随便新建一个Silverlight应用项目,然后在Page.xaml加入如下代码。
<UserControl.Resources>
<Style x:Key="ButtonXStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<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 Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<!--
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
</ColorAnimationUsingKeyFrames>-->
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<!--<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
</ColorAnimationUsingKeyFrames>-->
</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 Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>-->
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!--<Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Grid Margin="1" Background="{TemplateBinding Background}">
<Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
<Rectangle x:Name="BackgroundGradient">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>-->
<Grid x:Name="NormalState" >
<Path Margin="0,0,0,0" x:Name="OutterBorder" Fill="#FF000000" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z"/>
<Path Margin="1" x:Name="InnerBorder" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBAC3D7"/>
<GradientStop Color="#FFC2D3DB" Offset="1"/>
<GradientStop Color="#FF464B50" Offset="0.062"/>
<GradientStop Color="#FF4E6875" Offset="0.455"/>
<GradientStop Color="#FF6D8590" Offset="0.518"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="Body" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="2">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF222222"/>
<GradientStop Color="#FF030303" Offset="0.5"/>
<GradientStop Color="#FF3A3A3A" Offset="0.55"/>
<GradientStop Color="#FF696969" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
<Grid x:Name="MouseOverState" Opacity="0">
<Path x:Name="MOOutterBorder" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="0">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF222222"/>
<GradientStop Color="#FF030303" Offset="0.5"/>
<GradientStop Color="#FF3A3A3A" Offset="0.55"/>
<GradientStop Color="#FF696969" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="MOInnerBorder" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="1">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA6A6A6"/>
<GradientStop Color="#FF656564" Offset="0.062"/>
<GradientStop Color="#FF969696" Offset="0.482"/>
<GradientStop Color="#FFAEAEAE" Offset="0.504"/>
<GradientStop Color="#FFBFBFBF" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="MOBody" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="2">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBD1616"/>
<GradientStop Color="#FF900808" Offset="0.5"/>
<GradientStop Color="#FFBF4129" Offset="0.55"/>
<GradientStop Color="#FFED735C" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="MOBodyUpShade" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="2">
<Path.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.451"/>
<SkewTransform CenterX="0.5" CenterY="0.5"/>
<RotateTransform CenterX="0.5" CenterY="0.5"/>
<TranslateTransform Y="-0.50"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#009A2525" Offset="1"/>
<GradientStop Color="#7FDFFF00" Offset="0"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="MOBodyDownShade" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" Data="M123.99999,-2.9802322E-08 L123.99999,29.224953 C123.99999,30.983027 121.1353,33.90276 119.3373,33.88763 C117.53931,33.872501 45.532879,33.88763 8.6306658,33.88763 L8.6306658,0.022965571 z" Margin="2,20,2,0" VerticalAlignment="Top" Height="16">
<Path.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.451"/>
<SkewTransform CenterX="0.5" CenterY="0.5"/>
<RotateTransform CenterX="0.5" CenterY="0.5"/>
<TranslateTransform Y="0.50"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00880808" Offset="1"/>
<GradientStop Color="#7FFCF900" Offset="0"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<!--<Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3"/>
<Rectangle Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2"/>-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Button Width="86" Height="32" VerticalAlignment="Top" HorizontalAlignment="Left" Style="{StaticResource ButtonXStyle}" Margin="0">
<TextBlock Text="think8848" Foreground="White" FontSize="10"/>
</Button>
</Grid>
第十七步:F5运行。
i.正常情况下按钮显示效果如下:
ii.鼠标悬停(MouseOver)时的显示效果如下:
OK,现在一个简单的Demo就做完了,需要源代码的朋友可以在这里下载。
QQ:166156888