博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

wpf中的样式与模板

Posted on 2011-05-17 21:29  linFen  阅读(2827)  评论(0编辑  收藏  举报

1.WPF样式
类似于Web应用程序中的CSS,在WPF中可以为控件定义统一的样式(Style)。样式属于资源的一种,例如为Button定义统一的背景颜色和字体:
 <Window.Resources>
 <Style  TargetType="Button">
 <Setter Property="Background" Value="Yellow" />
</Style>
 </Window.Resources>
<StackPanel>
 <Button>Button A</Button>
</StackPanel>
在Style中定义的属性及值,影响到Window中的所有类型为Button的控件的样式
这种样式,类似于CSS中的类型选择器,为某种类型定义样式。
此外还可以在Style中加入x:Key属性,做为特定的样式(注意,这种也需要定义TargetType);
在第一个样式的基础上创建一个新样式可以达到这一目的,如下所示:<Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman" />
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>
        <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.Background" Value="DarkBlue" />
        </Style>
</Window.Resources>
以编程方式设置样式
若要以编程方式向元素分配命名样式,请从资源集合中获取该样式,然后将其分配给元素的 Style 属性。请注意,资源集合中的项是 Object 类型,因此,将检索到的样式分配给 Style 属性之前,必须将该样式强制转换为 Style。例如,若要对名为 textblock1 的 TextBlock 设置定义的 TitleText 样式,请执行以下操作:
textblock1.style=(style)Resources["TitleText"];
请注意,样式一旦应用,便会密封并且无法更改。如果要动态更改已应用的样式,必须创建一个新样式来替换现有样式。

2.wpf模板
当一个控件的外观不满足要求的时候,我们可以使用“控件模板”的方式更改控件的外观,WPF中的所有控件,只要有视觉外观,就会有Template property,且将此property的值设定为一个ControlTemplate对象。Button之所以看起来像Button就是因为受到了ControlTemplate对象的直接影响。ControlTemplate对象定义了控件的完整外观,且你可以替换此对象。
   抽象的FrameworkTemplate类型只定义了三个property。只读的Boolean property用来标识此模板是否可以被修改。Resources property的类型是ResourceDictionary,让我们定义一些只能够在模板内部使用的资源。第三个property最重要,叫做visualTree,定义组成此控件外观的Element的layout。
     ControlTemplate类型多加了两个property定义:TargetType用来指明,哪个类型的控件,适合应用到该模板;Triggers是Trigger对象的collection。
     所有派生自ContentControl的类型都使用ContentPresenter类型的对象来显示它们的内容。ContentPresenter派生自FrameworkElement,你可以在模板的视觉树内包含一个ContentPresenter对象,用来盛放模板中要放置的内容。ContentPresenter element负责显示所有“派生自ContentControl”控件的内容。ContentPresenter将这个世界分成两类对象:UIElement的后代和非UIElement的后代,对于非UIElement的后代,ContentPresenter会调用对象的ToString方法,用文本来展示该对象。这个功能让“派生自ContentControl”的控件可以用来显示任何种类的内容。
<Window.Resources> 
  <Style TargetType="Button" x:Key="ButtonStyle">
 <!--设置按钮的默认的样式-->
 <Setter Property="FontFamily" Value="Comic Sans MS"/>
   </Setter>
 <!--设置按钮的模板-->
 <Setter Property="Template">
  <Setter.Value>
 <ControlTemplate TargetType="Button">
   <Grid>
  <Ellipse Fill="{TemplateBinding Background}"/>
 <ContentPresenter
    Margin="5"
  HorizontalAlignment="Center"
 VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
 </Setter>
 </Style>
 </Window.Resources>
 <StackPanel>
<Button Margin="5" Style="{StaticResource ButtonStyle}"
 Width="100" Height="100"
  Content="My Button">
 </Button>
 <Button Margin="5" Width="200">Common Button</Button>
</StackPanel>
WPF包含数据模板和控件模板
控件模板又包括ControlTemplate和ItemsPanelTemplate,这里讨论一下ControlTemplate。其实WPF的每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。与Style不同,Style只能改变控件的已有属性值(比如颜色字体)来定制控件,但控件模板可以改变控件的内部结构(VisualTree,视觉树)来完成更为复杂的定制,比如我们可以定制这样的按钮:在它的左办部分显示一个小图标而它的右半部分显示文本。要替换控件的模板,我们只需要声明一个ControlTemplate对象,并对该ControlTemplate对象做相应的配置,然后将该ControlTemplate对象赋值给控件的Template属性就可以了。ControlTemplate包含两个重要的属性:1,VisualTree,该模板的视觉树,其实我们就是使用这个属性来描述控件的外观的2,Triggers,触发器列表,里面包含一些触发器Trigger,我们可以定制这个触发器列表来使控件对外界的刺激发生反应,比如鼠标经过时文本变成粗体等。参考以下代码
<Button>      
 <Button.Template>
          <ControlTemplate>        
   <!--定义视觉树-->        
   <Grid>       
      <Ellipse Name="faceEllipse" Width="{TemplateBinding Button.Width}"
 Height="{TemplateBinding Control.Height}"  Fill="{TemplateBinding Button.Background}"/>   
          <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center"  HorizontalAlignment="Center"
 Text="{TemplateBinding Button.Content}" />  
         </Grid>        
   <!--定义视觉树_end-->   
         </ControlTemplate>
        </Button.Template>  
   </Button>
在上面的代码中,我们修改了Button的Template属性,我们定义了一个ControlTemplate,在<ControlTemplate> ...</ControlTemplate>之间包含的是模板的视觉树,也就是如何显示控件的外观,我们这里使用了一个Ellipse(椭圆)和一个TextBlock(文本块)来定义控件的外观。很容易联想到一个问题:控件(Button)的一些属性,比如高度、宽度、文本等如何在新定义的外观中表现出来呢?我们使用TemplateBinding 将控件的属性与新外观中的元素的属性关联起来Width="{TemplateBinding Button.Width}" ,这样我们就使得椭圆的宽度与按钮的宽度绑定在一起而保持一致,同理我们使用Text="{TemplateBinding Button.Content}"将TextBlock的文本与按钮的Content属性绑定在一起。