Silverlight2 边学边练 之六 设定风格
本篇的内容较为简单,主要针对Style进行一个练习。Style简要的说就是一些属性值的集合,
作用和CSS比较像。在Silverlight2中定义Style只能同用于同种类型的Element。如下代码:
<Style x:Key="ButtonStyleTwo" TargetType="Button"> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontSize" Value="40" /> <Setter Property="Foreground" Value="Blue" /> <Setter Property="Background"></Style>
这就是一个定义好的Style,它只能用于Button组件,看看它如何产生作用,将Style直接嵌入Button:
<Button Content="Button"> <Button.Style> <Style TargetType="Button"> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontSize" Value="40" /> <Setter Property="Foreground" Value="Blue" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush> <GradientStop Color="Green" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="1"></GradientStop> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Button.Style></Button>
当然也可以通过Resource的方式来设置Style,分别设置了两个Style:ButtonStyleOne、ButtonStyleTwo,
ButtonStyleOne设置为默认Style,ButtonStyleTwo用于在点击Button后切换Style。
XAML Code:
<UserControl x:Class="SilverlightTest.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"> <UserControl.Resources> <Style x:Key="ButtonStyleOne" TargetType="Button"> <Setter Property="FontFamily" Value="Georgia" /> <Setter Property="FontSize" Value="40" /> <Setter Property="Foreground" Value="SlateGray" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0"></GradientStop> <GradientStop Color="Yellow" Offset="1"></GradientStop> </LinearGradientBrush> </Setter.Value> </Setter> </Style> <Style x:Key="ButtonStyleTwo" TargetType="Button"> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontSize" Value="40" /> <Setter Property="Foreground" Value="Pink" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush> <GradientStop Color="Green" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="1"></GradientStop> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </UserControl.Resources> <StackPanel x:Name="LayoutRoot" Background="White"> <Button x:Name="TestButton" Content="A Customized Button"
Style="{StaticResource ButtonStyleOne}" Click="Button_Click"></Button> </StackPanel> </UserControl>
用C#来切换Sytle,如下代码:
private void Button_Click(object sender, RoutedEventArgs e) { //切换Style:ButtonStyleTwo TestButton.Style = this.Resources["ButtonStyleTwo"] as Style; //修改Button文字
TestButton.Content = "Style Changed"; }
实例Demo效果(感谢GWPBrian指导SL嵌入cnblogs方法):
本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 11 ■ STYLES, TEMPLATES, AND CUSTOM CONTROLS
作者:李敬然(Gnie)
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。