(四)样式和模板

• 样式

  样式非常有用,它就像是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可以定义数据的表现形式.

1. 定义实体:
   
   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 
          
             }
         
           

    
2. 定义界面:
    
   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
          
            >
         
           

3. 后台代码: 
   
   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
         
           >