vs2010 学习Silverlight学习笔记(7)：控件样式与模板

概要：

终于知道Silverlight——App.xaml是干什么用的了，不仅可以用来封装样式（类似css），还可以制定控件模版。。。好强大的功能啊。

封装：

继续学习《一步一步学Silverlight 2系列（8）：使用样式封装控件观感》。
上面的例子只要照着做很容易就成功了，但是咱们的学会自己来啊，那我就自己试验试试。
App.xaml代码：
<Style x:Key="ell" TargetType="Ellipse">
        <!--Style x:Key="此样式名称" TargetType="样式指定的控件"-->
            <Setter Property="Fill" Value="Orange"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="100"></Setter>
            <!--Setter Property="属性名" Value="属性值"-->
</Style>




MainPage.xaml代码：Style="{StaticResource ell}绑







<Grid x:Name="LayoutRoot" Background="#46461F">
        <Ellipse HorizontalAlignment="Left" Margin="10,10,0,0" 
                 Name="ellipse1" Stroke="Black" StrokeThickness="1" 
                 VerticalAlignment="Top"
                 Style="{StaticResource ell}"/>
</Grid>











很简单吧，如果遇到大量样式复用的时候，这样会很方便的。

控件模版：

第一个制定控件内容的试验不成功，查了一下说是Silverlight版本问题。不过这个例子做的挺漂亮的，个人希望也能做出类似的控件来。
第二个用模版制定控件的试验倒是成功了，可是App.xaml中好多节点我仍然不了解，看来我学东西还停在表面呃。

再把app.xaml贴出来： 　　能看懂，却自己写不出来，真蛋疼。
<Style x:Key="RoundButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <Rectangle Width="200" Height="80" RadiusX="15" RadiusY="15">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0">
                                        <GradientStop Color="#FFFFFF" Offset="0.0" />
                                        <GradientStop Color="#EC04FA" Offset="1.0" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                                <Rectangle.Stroke>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FCB2FD" Offset="0" />
                                        <GradientStop Color="#FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                            </Rectangle>
                            <TextBlock Text="我也做出来了" FontSize="26" Foreground="White"
                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>





第三个是个可以灵活用的例子，不像2中把样式写死了。我以前学过Asp.net自定义控件，这个很容易就看懂了。










<Style x:Key="RoundButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootElement">
                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                               RadiusX="15" RadiusY="15">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0">
                                <GradientStop Color="#FFFFFF" Offset="0.0" />
                                <GradientStop Color="#EC04FA" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                        <Rectangle.Stroke>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#EC04FA" Offset="0" />
                                <GradientStop Color="#FFFFFF" Offset="1" />
                            </LinearGradientBrush>
                        </Rectangle.Stroke>
                    </Rectangle>
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        FontSize="{TemplateBinding FontSize}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        Foreground="{TemplateBinding Foreground}">
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

后记：

　　李老师的代码被我copy的差不多了，但是越到后来越是觉得Silverlight深奥，尽管李老师讲的很精彩，但真正被我学到手能用的越来
越少。现在觉得写笔记给自己复习用真的不错。
总目录
上一篇：vs2010 学习Silverlight学习笔记(6)：全屏模式
下一篇：vs2010 学习Silverlight学习笔记(8)：使用用户控件