拼吾爱程序人生.Net编程Silverlight 一步一步学Silverlight 2系列(9):使用控件模板

1  /  1  页   1 跳转 查看:1047

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

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

文/Terrylee  出处/博客园

概述

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" Horiz></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" Horiz>
        <WatermarkedTextBox.Watermark>
            <StackPanel Width="320" Height="48" Orientation="Horizontal">
                <Image Source="lock.png" Horiz></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" Horiz></Image>
                <TextBlock Text="登 录" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
            </StackPanel>
        </Button.Content>
    </Button>
</Canvas>


很多控件都有Content或者Text属性,我们完全可以充分发挥自己的想象力去进行定制,定制后控件仍然具有原来的功能行为,如上面的示例,当输入用户名控件获得焦点时文字和图片都将消失:

 附件: 您所在的用户组无法下载或查看附件

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [Silverlight] 的这些文章也感兴趣:

微软将Silverlight 1.1更名为Silverlight 2.0,并公布其特性
Silverlight 2中的视觉状态管理 Part1
SnipperImages(Silverlight DEMO)控件设计之--CheckBox
Silverlight 2.0 beta1 堆栈
在Silverlight 2 beta1中使用IronPython等动态语言
简单的Silverlight音乐播放器Widget
Silverlight技巧/诀窍: 创建和使用Silverlight和WPF 用户控件
一步一步学Silverlight 2系列(6):键盘事件处理
Silverlight 2学习教程(五):JavaScript与Silverlight托管代码相互调用
一步一步学Silverlight 2系列(10):使用用户控件
 

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

使用控件模板定制控件

前面的示例中我们只是定制了控件的内容,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="提 交" F Foreground="White"
                              Horiz 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>


运行后就可以看到下面的效果:

 附件: 您所在的用户组无法下载或查看附件
 

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

创建模板

上面的示例中,控件的文字以及控件的大小都是固定的,我们希望在开发人员使用中再设定,可以在控件模板中通过使用 {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
                        C
                        F
                        HorizontalC
                        VerticalC
                        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"
            C F
            HorizontalC
            VerticalC
            Foreground="White" Width="200" Height="60"/>
   
    <Button x:Name="button2" Style="{StaticResource RoundButton}"
            Canvas.Top="80" Canvas.Left="260"
            C F
            HorizontalC
            VerticalC
            Foreground="White" Width="100" Height="100"/>
</Canvas>


运行时效果如下:

 附件: 您所在的用户组无法下载或查看附件


结束语

本文简单的介绍了如何定制控件的内容以及通过控件模板完全定制控件,你可以从这里下载本文示例代码:
 附件: 您所在的用户组无法下载或查看附件
 
1  /  1  页   1 跳转

快速回复帖子

标题
禁用 URL 识别
禁用表情
禁用 Discuz!NT 代码
使用个人签名
  [完成后可按 Ctrl+Enter 无刷新发布]  

版权所有 拼吾爱程序人生    

Powered by Discuz!NT 2.1.202   Copyright © 2001-2008 Comsenz Inc. 鄂ICP备07500843号
返顶部