(四)样式和模板

• 样式

  样式非常有用,它就像是html中的CSS.

  如果你要将某一样式应用到某一类型元素实例,那么你应该只设置Style的TargetType属性而不设置Key属性(同时设置将不产生作用).

      <Window.Resources>
          <Style TargetType="Rectangle">
              <Setter Property="Fill">
                  <Setter.Value>
                      <SolidColorBrush Color="Yellow"></SolidColorBrush>
                  </Setter.Value>
              </Setter>
          </Style>
      </Window.Resources>
      <Canvas Name="canvas">
          <Rectangle Name="rect1" Canvas.Left="35" Canvas.Top="29" Height="100" Stroke="Black" Width="200" />
          <Rectangle Name="rect2" Canvas.Left="35" Canvas.Top="135" Height="100" Stroke="Black" Width="200"/>
      </Canvas>

  
  
  
  如果你要将某一样式定制到某一特定元素实例,那么你应该设置Style的x:Key属性,将要使用该样式的元素的Style进行资源引用.

      <Window.Resources>
          <Style x:Key="rectStyle" TargetType="Rectangle">
              <Setter Property="Fill">
                  <Setter.Value>
                      <SolidColorBrush Color="Yellow"></SolidColorBrush>
                  </Setter.Value>
              </Setter>
          </Style>
      </Window.Resources>
      <Canvas Name="canvas">
          <Rectangle Name="rect1" Canvas.Left="35" Canvas.Top="29" Height="100" Stroke="Black" Width="200" Style="{StaticResource ResourceKey=rectStyle}" />
          <Rectangle Name="rect2" Canvas.Left="35" Canvas.Top="135" Height="100" Stroke="Black" Width="200"/>
      </Canvas>

  
  
  
  

数据模板

控件通常需要呈现某些类型的内容,而这些内容通常来自绑定到的数据.在WPF中,使用DataTemplate可以定义数据的表现形式.

1. 定义实体:
   

       public class Person:INotifyPropertyChanged
       {
           private string name;
           private int age;
   
           public event PropertyChangedEventHandler PropertyChanged;
   
           public string Name
           {
               get
               {
                   return this.name;
               }
               set
               {
                   if (this.name!=value)
                   {
                       this.name = value;
                       Notify("Name");
                   }
               }
           }
   
           public int Age
           {
               get
               {
                   return this.age;
               }
               set
               {
                   if (this.age != value)
                   {
                       this.age = value;
                       Notify("Name");
                   }
               }
           }
   
           protected void Notify(string propertyName)
           {
               if (this.PropertyChanged!=null)
               {
                   PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
               }
           }
       }

    
2. 定义界面:
    

       <Window.Resources>
           <DataTemplate x:Key="item" DataType="local:Person">
               <UniformGrid Rows="1" Columns="2">
                   <Label Width="100"  Content="{Binding Path=Name}"/> 
                   <TextBox Width="100" Text="{Binding Path=Age}" />
               </UniformGrid>
           </DataTemplate>
       </Window.Resources>
       <Grid>
           <ListBox ItemTemplate="{StaticResource ResourceKey=item}" ItemsSource="{Binding}">
               
           </ListBox>
       </Grid>

3. 后台代码: 
   

       public partial class DataTemplateWindow : Window
       {
           public DataTemplateWindow()
           {
               InitializeComponent();
               ObservableCollection<Person> persons = new ObservableCollection<Person>();
               persons.Add(new Person() { Name="zhoulq",Age=27});
               persons.Add(new Person() { Name = "peiyf", Age = 22 });
               persons.Add(new Person() { Name = "liuwy", Age = 26 });
               this.DataContext = persons;
           }
       }

    
    

• 控件模板

  控件模板改变控件的外观.

      <Grid>
          <Grid.Resources>
              <ControlTemplate x:Key="btnTemplate" TargetType="Button">
                  <Rectangle Fill="Green"></Rectangle>
              </ControlTemplate>
          </Grid.Resources>
          <Button Width="40" Height="20" Template="{DynamicResource ResourceKey=btnTemplate}"></Button>
      </Grid>

  

• 触发器

      <Window.Resources>
          <Style TargetType="{x:Type TextBox}">
              <Style.Triggers>
                  <MultiTrigger>
                      <MultiTrigger.Conditions>                       
                          <Condition Property="Text" Value="me"/>
                          <Condition Property="IsMouseOver" Value="False"/>
                      </MultiTrigger.Conditions>
                      <Setter Property="Background" Value="Red"></Setter>
                  </MultiTrigger>
              </Style.Triggers>
          </Style>
      </Window.Resources>
      <Grid>
          <TextBox Height="23" HorizontalAlignment="Left" Margin="56,68,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
      </Grid>