概述 Silverlight 2 Beta 1版本发布了
无论从Runtime还是Tools都给我们带来了很多
惊喜如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython对JSON、Web Service、WCF以及Sockets支持等
系列新特性
步步学Silverlight 2系列
文章带您快速进入Silverlight 2开发本文为系列文章第 9篇
主要介绍如何使用Control控件模板定制Control控件观感Silverlight提供了极其强大功能允许用户完全定制Control控件外观定制Control控件内容 在Silverlight中
WatermarkedTextBoxControl控件可以为用户输入提供段提示信息如果只是简单点文字信息有时候未免显得单调如果加上相应图片介绍说明效果会更好如下图所示个简单用户登录界面:
这样看起来界面显
就生动多了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> 很多Control控件都有Content或者Text属性我们完全可以充分发挥自己想象力去进行定制定制后Control控件仍然具有原来功能行为如上面举例当输入用户名Control控件获得焦点时文字和图片都将消失:
使用Control控件模板定制Control控件 前面
举例中我们只是定制了Control控件内容Silverlight允许我们完全对Control控件进行定制而不仅仅是内容下面举例中我们定制个渐变色圆角矩形按钮首先我们在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 StartPo
="0,0">
<GradientStop Color="#FFFFFF" Off
="0.0" />
<GradientStop Color="#EC04FA" Off="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPo="0.5,1" StartPo="0.5,0">
<GradientStop Color="#FCB2FD" Off="0" />
<GradientStop Color="#FFFFFF" Off="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> 运行后就可以看到下面效果:
创建模板 上面
举例中Control控件文字以及Control控件大小都是固定我们希望在开发人员使用中再设定可以在Control控件模板中通过使用 {TemplateBinding ControlProperty} 标识扩展句法来绑定到Control控件属性来实现使用ContentPresenterControl控件可以灵活设置各个属性修改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 StartPo="0,0">
<GradientStop Color="#FFFFFF" Off="0.0" />
<GradientStop Color="#EC04FA" Off="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPo="0.5,1" StartPo="0.5,0">
<GradientStop Color="#EC04FA" Off="0" />
<GradientStop Color="#FFFFFF" Off="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时我们可以设定Control控件文本及Control控件大小:<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> 运行时效果如下:
结束语 本文简单
介绍了如何定制Control控件内容以及通过Control控件模板完全定制Control控件你可以从下载本文举例代码
最新评论