[原] Silverlight 2自定义Button样式

最新推荐文章于 2017-11-14 16:37:00 发布
最新推荐文章于 2017-11-14 16:37:00 发布
阅读量84 收藏
点赞数
原文链接：http://www.cnblogs.com/think8848/archive/2008/12/01/1345144.html
版权

第一步：开启Expression Blend2 SP1

第二步：新建一个项目。

第三步：拖一个Button控件至美工板（这个名字真奇怪）上。

第四步：使用美工板顶部的痕迹导航栏（这个名字更奇怪）来创建按钮模板的副本。

第五步：定义Style名称和位置。

 第六步：把App.xaml中原Button样式不需要的部分屏蔽掉。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<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">配置节，使其如下代码所示。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<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加入如下代码。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<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

转载于:https://www.cnblogs.com/think8848/archive/2008/12/01/1345144.html

weixin_30896825
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Silverlight漂亮清爽的按钮样式
02-29
Silverlight漂亮清爽的按钮样式
一个自定义Silverlight鼠标样式代码
07-18
在本文中，我们将深入探讨如何使用Xaml在Silverlight中创建自定义鼠标样式。Silverlight是一种轻量级的Web应用程序框架，它允许开发者构建富媒体和交互式用户体验。自定义鼠标样式是提升用户界面（UI）独特性和用户...
Silverlight中样式的用法
weixin_30528371的博客
08-06 86
Silverlight中的样式写法与普通的CSS有异曲同工之处，分为内联样式和全局样式。 内联样式是在XAML中定义控件样式，唯一不方便。eg： <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"> ...
Silverlight button样式
weixin_30678349的博客
03-12 114
Silverlight玻璃边框样式的按钮 <Style x:Key="GlassBorderStyle" TargetType="Border"> <Setter Property="BorderThickness" Value="2"/> <Setter Property="Padding"...
WPF Silverlight Button样式
cjwix2012的专栏
12-05 589
<!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}
silverlight 关于按钮样式
straw hat in the wind
05-19 447
概述 请想象这样一个场景，小型企业通过自己的站点可以让更多的顾客了解到您的产品。在许多商业领域，公司都会有自己的站点来宣传自己。现在，越来越多的 商业客户希望将自己的站点升级到Web 2.0，其中，许多客户选择了Silverlight。客户同时希望将自己的后端系统集成到Web站点中。类似这样的场景我们会始终贯穿整本书。 在本章，我们将： 我们将在现有站点中添加一个使用Silverlight...
Silverlight 控件自定义样式
crystal的专栏
09-01 1011
<br /><Style  x:Key="PopupTextBoxStyle"  TargetType="Grid"><br />            <Setter Property="Width" Value="200"/><br />            <Setter Property="Template"><br />                <Setter.Value><br />                    <ControlTemplate TargetType="Grid
Silverlight之Button控件简单自定义
weixin_33814685的博客
11-14 91
Silverlight给我们提供的控件数量是非常有限的，不能够满足我们在实践项目中开发需求。所以我们就需要通过自定义控件的方式来解决这个问题。 一：Silverlight控件应用样式。 我们大家都知道，我们可以通过使用属性语法来设置UI对象。这种方法能够有效地使对象外观发生浅层次的改变，但是我们可以想象如果我们在一个应用程序中需要大量相同的元素...
silverlight之自定义控件
u014319138的专栏
02-10 674
全后台代码封装的自定义控件
关于在silverlight 中自定义按钮的问题
jjp837661103的专栏
12-26 837
在自定义按钮中，我们主要使用的是style 中设置ControlTemplate中相关内容来完成的。实例代码如下：             ButtonStyle1" TargetType="Button">
SilverlightApplication1 button
01-04
6. **样式和模板**：Silverlight提供了丰富的样式和模板机制，允许开发者自定义按钮的外观。你可以在资源字典中定义按钮的样式，并通过`Style`属性应用到按钮上，改变其颜色、形状、动画等视觉效果。 7. **交互性和...
为Silverlight 2.0开发自定义控件
04-11
2. **C#在Silverlight中的作用**： - **代码-behind**：C#用于编写控件的逻辑代码，处理事件、计算属性和执行业务逻辑。C# 3.0引入的特性，如匿名方法、Lambda表达式和对象初始化，使得代码更加简洁。 - **数据...
简单的Silverlight 自定义控件源码
03-18
在本文中，我们将深入探讨如何创建一个简单的Silverlight自定义控件，这将基于提供的"MediaButton_src"压缩包中的源代码。Silverlight是微软推出的一种富互联网应用程序（RIA）平台，它允许开发者构建交互性强、用户...
Silverlight 自定义控件 模板化控件 （一）属性
06-01
在本文中，我们将深入探讨Silverlight自定义控件的模板化设计，特别是关注其中的属性。Silverlight是一种强大的RIA（富互联网应用）开发框架，它允许开发者创建具有丰富交互性和视觉效果的应用。自定义控件是提升...
Silverlight的RadioButton样式--记录
Qiustion的专栏
09-25 991
SL的RadioButton样式
计组P1 单周期MIPS处理器
最新发布
08-12
实验报告+项目 Verilog语言
Spring Boot原创歌曲分享平台.zip
08-12
该平台严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本平台具有以下优点： 该平台具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该平台。 平台将用户权限进行划分，管理员和用户都能看到及操作的信息不一样，两者具备不同的操作权限。 该平台操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 平台过于简单，显示的信息有限。 不能添加多个管理员账号，如果可以则将利于发展原创歌曲分享规模，便于原创歌曲分享信息集中管理。 不能实时预约接待消息，容易被忽视，不利于管理员服务用户。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值