silverlight 如何编辑控件模板？以制作圆形按钮为例

编辑控件模板必须了解控件。控件有内外两部分：内在的构成和数据，外在的样式和状态。

如下例代码

View Code

    <Style x:Key="ButtonStyle1" 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"><!--指明这是Button控件模板-->

                        <Grid><!--由此可见任何控件都是复合控件即由简单的几何图形组成-->

                            <VisualStateManager.VisualStateGroups><!--状态组：不同状态不同动画-->

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>

                                            <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>

                                            <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <!--控件构成-->

                            

                                <Grid Margin="1">

                                    <Border x:Name="BackgroundAnimation" Background="white" Opacity="0"/>

                                    <Ellipse Width="100" Height="100"  

                 HorizontalAlignment="Center" 

                 VerticalAlignment="Center"  ><!--椭圆形 -->               

                    <Ellipse.Fill>       <!--填充使用黄色到白色的渐变 --> 

                        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 

                            <GradientStop Color="Black" 

                              Offset="1"/> 

                            <GradientStop Color="White" 

                              Offset="0"/> 

                        </RadialGradientBrush> 

                    </Ellipse.Fill> 

                </Ellipse> 

                                </Grid>

                        

                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>

                            <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>