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

posted @ 2009-08-02 21:22  Gnie  阅读(2849)  评论(6编辑  收藏  举报
Copyright © 2010 Gnie