一步一步学Silverlight 2系列(9):使用控件模板-阿里云开发者社区

开发者社区> 技术小甜> 正文

一步一步学Silverlight 2系列(9):使用控件模板

简介:
+关注继续查看

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。
本文为系列文章第九篇,主要介绍如何使用控件模板定制控件的观感。Silverlight提供了极其强大的功能,允许用户完全定制控件的外观。

定制控件内容

在Silverlight中,WatermarkedTextBox控件可以为用户的输入提供一段提示信息,如果只是简单的一点文字信息,有时候未免显得单调,如果加上相应的图片说明效果会更好,如下图所示的一个简单的用户登录界面:
 
这样看起来界面显的就生动多了,XAML声明如下:
<Canvas Background="#46461F">
    <WatermarkedTextBox x:Name="UserName" Canvas.Top="30" Canvas.Left="50"
                        Width="320" Height="48">
        <WatermarkedTextBox.Watermark>
            <StackPanel Width="320" Height="48" Orientation="Horizontal">
                <Image Source="admin.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="请输入用户名" VerticalAlignment="Center" Foreground="#999999"/>
            </StackPanel>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    
    <WatermarkedTextBox x:Name="Password" Canvas.Top="110" Canvas.Left="50"
                        Width="320" Height="48" HorizontalAlignment="Left">
        <WatermarkedTextBox.Watermark>
            <StackPanel Width="320" Height="48" Orientation="Horizontal">
                <Image Source="lock.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="请输入密码" VerticalAlignment="Center" Foreground="#999999"/>
            </StackPanel>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    
    <Button Canvas.Top="180" Canvas.Left="100"
            Width="120" Height="48">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="apply.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="登 录" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
            </StackPanel>
        </Button.Content>
    </Button>
</Canvas>
很多控件都有Content或者Text属性,我们完全可以充分发挥自己的想象力去进行定制,定制后控件仍然具有原来的功能行为,如上面的示例,当输入用户名控件获得焦点时文字和图片都将消失:
 

使用控件模板定制控件

前面的示例中我们只是定制了控件的内容,Silverlight允许我们完全对控件进行定制,而不仅仅是内容。下面的示例中我们定制一个渐变色的圆角矩形按钮。首先我们在App.xaml中创建一个RoundButton样式,改写按钮的Template属性:
<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>
其中的渐变等内容在Graphics相关内容里将会写到。现在在XAML中使用该样式:
<Canvas Background="#46461F">
    <Button x:Name="button1" Style="{StaticResource RoundButton}"
            Canvas.Top="80" Canvas.Left="150"/>
</Canvas>
运行后就可以看到下面的效果:
 

创建模板

上面的示例中,控件的文字以及控件的大小都是固定的,我们希望在开发人员使用中再设定,可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法来绑定到控件的属性来实现,使用ContentPresenter控件可以灵活的设置各个属性。修改RoundButton样式如下所示:
<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>
这样在使用RoundButton时我们可以设定控件的文本及控件的大小:
<Canvas Background="#46461F">
    <Button x:Name="button1" Style="{StaticResource RoundButton}"
            Canvas.Top="80" Canvas.Left="50"
            Content="提 交" FontSize="26"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            Foreground="White" Width="200" Height="60"/>
    
    <Button x:Name="button2" Style="{StaticResource RoundButton}"
            Canvas.Top="80" Canvas.Left="260"
            Content="取 消" FontSize="26"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            Foreground="White" Width="100" Height="100"/>
</Canvas>
运行时效果如下:
 

结束语

本文简单的介绍了如何定制控件的内容以及通过控件模板完全定制控件,你可以从这里下载本文示例代码。

















本文转自lihuijun51CTO博客,原文链接:http://blog.51cto.com/terrylee/67243 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用highlight.js高亮静态页面的语言代码
  显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串。 不过能使静态的文本能高亮显示,倒更炫酷一点。其实很简单的,引入highlight.js包,可以使用cdn上的静态资源,引入css和js: 将要显示的代码包在标签 之间即可。
1359 0
如何在Silverlight4中使用摄像头
Silverlight4终于支持摄像头和麦克风了,网页上的视频聊天将不再是Flash的专利! 今天在一个老外的网站上看到webCam的使用示例(http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/),非常简单,...
643 0
Silverlight3.0 起步(一)——环境
开发环境:VS2008 sp1 如果要开发silverlight,需要安装3部分: 1 SDK 用来编译和生成所需要的sl控件的工具 2 Tools 3 sl运行时插件,用于在浏览器中浏览sl,即在浏览器中使用silverlight控件   我在安装的过程中,先单独安装了第三部分,即运行时。
801 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7760 0
利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用
原文:利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用 一、MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式,主要目的是为了分离视图(View)和模型(Model)的耦合。
1143 0
利刃 MVVMLight 4:绑定和绑定的各种使用场景
原文:利刃 MVVMLight 4:绑定和绑定的各种使用场景 一、绑定:  主要包含元素绑定和非元素绑定两种。 1、元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性。
631 0
+关注
6323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载