(四)样式和模板

样式

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

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

Code

 1     <Window.Resources>
 2         <Style TargetType="Rectangle">
 3             <Setter Property="Fill">
 4                 <Setter.Value>
 5                     <SolidColorBrush Color="Yellow"></SolidColorBrush>
 6                 </Setter.Value>
 7             </Setter>
 8         </Style>
 9     </Window.Resources>
10     <Canvas Name="canvas">
11         <Rectangle Name="rect1" Canvas.Left="35" Canvas.Top="29" Height="100" Stroke="Black" Width="200" />
12         <Rectangle Name="rect2" Canvas.Left="35" Canvas.Top="135" Height="100" Stroke="Black" Width="200"/>
13     </Canvas>

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

Code

 1     <Window.Resources>
 2         <Style x:Key="rectStyle" TargetType="Rectangle">
 3             <Setter Property="Fill">
 4                 <Setter.Value>
 5                     <SolidColorBrush Color="Yellow"></SolidColorBrush>
 6                 </Setter.Value>
 7             </Setter>
 8         </Style>
 9     </Window.Resources>
10     <Canvas Name="canvas">
11         <Rectangle Name="rect1" Canvas.Left="35" Canvas.Top="29" Height="100" Stroke="Black" Width="200" Style="{StaticResource ResourceKey=rectStyle}" />
12         <Rectangle Name="rect2" Canvas.Left="35" Canvas.Top="135" Height="100" Stroke="Black" Width="200"/>
13     </Canvas>

数据模板

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

定义实体:

Code

 1     public class Person:INotifyPropertyChanged
 2     {
 3         private string name;
 4         private int age;
 5 
 6         public event PropertyChangedEventHandler PropertyChanged;
 7 
 8         public string Name
 9         {
10             get
11             {
12                 return this.name;
13             }
14             set
15             {
16                 if (this.name!=value)
17                 {
18                     this.name = value;
19                     Notify("Name");
20                 }
21             }
22         }
23 
24         public int Age
25         {
26             get
27             {
28                 return this.age;
29             }
30             set
31             {
32                 if (this.age != value)
33                 {
34                     this.age = value;
35                     Notify("Name");
36                 }
37             }
38         }
39 
40         protected void Notify(string propertyName)
41         {
42             if (this.PropertyChanged!=null)
43             {
44                 PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
45             }
46         }
47     }

定义界面:

Code

 1     <Window.Resources>
 2         <DataTemplate x:Key="item" DataType="local:Person">
 3             <UniformGrid Rows="1" Columns="2">
 4                 <Label Width="100"  Content="{Binding Path=Name}"/> 
 5                 <TextBox Width="100" Text="{Binding Path=Age}" />
 6             </UniformGrid>
 7         </DataTemplate>
 8     </Window.Resources>
 9     <Grid>
10         <ListBox ItemTemplate="{StaticResource ResourceKey=item}" ItemsSource="{Binding}">
11             
12         </ListBox>
13     </Grid>

后台代码:

Code

 1     public partial class DataTemplateWindow : Window
 2     {
 3         public DataTemplateWindow()
 4         {
 5             InitializeComponent();
 6             ObservableCollection<Person> persons = new ObservableCollection<Person>();
 7             persons.Add(new Person() { Name="zhoulq",Age=27});
 8             persons.Add(new Person() { Name = "peiyf", Age = 22 });
 9             persons.Add(new Person() { Name = "liuwy", Age = 26 });
10             this.DataContext = persons;
11         }
12     }

控件模板

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

Code

1     <Grid>
2         <Grid.Resources>
3             <ControlTemplate x:Key="btnTemplate" TargetType="Button">
4                 <Rectangle Fill="Green"></Rectangle>
5             </ControlTemplate>
6         </Grid.Resources>
7         <Button Width="40" Height="20" Template="{DynamicResource ResourceKey=btnTemplate}"></Button>
8     </Grid>

触发器

Code

 1     <Window.Resources>
 2         <Style TargetType="{x:Type TextBox}">
 3             <Style.Triggers>
 4                 <MultiTrigger>
 5                     <MultiTrigger.Conditions>                       
 6                         <Condition Property="Text" Value="me"/>
 7                         <Condition Property="IsMouseOver" Value="False"/>
 8                     </MultiTrigger.Conditions>
 9                     <Setter Property="Background" Value="Red"></Setter>
10                 </MultiTrigger>
11             </Style.Triggers>
12         </Style>
13     </Window.Resources>
14     <Grid>
15         <TextBox Height="23" HorizontalAlignment="Left" Margin="56,68,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
16     </Grid>