1. 程式人生 > >wpf 中DataGrid 控制元件的樣式設定及使用

wpf 中DataGrid 控制元件的樣式設定及使用

本次要實現的效果為:



這個DataGrid需要繫結一個集合物件,所以要先定義一個Experience類,包含三個欄位

   /// <summary>  

   /// 定義工作經歷類  

   /// </summary>  

   public class Experience

   {    

        /// <summary>  

       /// 獲取或設定工作的起始時間  

       /// </summary>

       public string Start { get; set; }

       /// <summary>    

       /// 獲取或設定工作的結束時間   

       /// </summary>       

      public string End { get; set; }

       /// <summary>     

       /// 獲取或設定工作地點  

      /// </summary>      

       public string Location { get; set; }

    }

接下來在 Window_Loaded(object sender, RoutedEventArgs e) 時間中設定DataGrid的資料來源

 private void Window_Loaded(object sender, RoutedEventArgs e)
{
            List<Experience> list = new List<Experience>() 
            {
                new Experience(){ Start="1990-01-01", End="1991-01-01", Location="北京"},
                new Experience(){ Start="1991-01-01", End="1992-01-01", Location="鄭州"},
                new Experience(){ Start="1992-01-01", End="1993-01-01", Location="上海"},
                new Experience(){ Start="1993-01-01", End="1994-01-01", Location="洛陽"},
                new Experience(){ Start="1994-01-01", End="1995-01-01", Location="天津"},
                new Experience(){ Start="1995-01-01", End="1996-01-01", Location="大連"},
            };
          

            //把XAML中DataGrid的ItemSource繫結到List物件上去
            this.grid_user.ItemsSource = list;    
        
}

接下來看一下XAML中是怎樣建立DataGrid

                <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Label Background="#82c772"
                               Content="個人經歷"
                               Padding="20,5,0,0"
                               FontSize="14"
                               Foreground="White" />
                        <DataGrid Name="grid_saffer"
                                  Grid.Row="1"
                                  IsReadOnly="True"
                                  AlternationCount="2"
                                  AutoGenerateColumns="true" >
                            <DataGrid.Columns>
                                <DataGridTextColumn Header="開始時間"
                                                    Width="1*"
                                                    Binding="{Binding start}" />
                                <DataGridTextColumn Header="結束時間"
                                                    Width="1*"
                                                    Binding="{Binding end}" />
                                <DataGridTextColumn Header="地點"
                                                    Width="1*"
                                                    Binding="{Binding location}" />
                            </DataGrid.Columns>
                        </DataGrid>
                    </Grid>

這裡有幾個屬性需要說一下

AlternationCount="2"   表示兩行交替顯示背景色。如果不設定此屬性則顯示效果為:



 

AutoGenerateColumns="False"   表示不讓DataGrid自動生成列。如果設定成true,則效果如下: 多出了不需要的列



 

HeadersVisibility="Column" 設定此屬性為只顯示列標題單元格,行標題不顯示。如果不設定此屬性則效果為:



 

 

到此為止還沒有真正為DataGrid新增任何樣式,接下來展示樣式程式碼

 

<Application x:Class="ListviewStyle.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     

 xmlns:location="clr-namespace:ListviewStyle"  StartupUri="MainWindow.xaml">

    <Application.Resources>     

            <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    

                  <Style TargetType="DataGrid">    

                    <!--網格線顏色-->        

                      <Setter Property="CanUserResizeColumns"   Value="false" />     //該屬性指示是否允許使用者調整列寬度   

                     <Setter Property="Background"   Value="#E6DBBB" />

                <Setter Property="BorderBrush"    Value="#d6c79b" />

                <Setter Property="HorizontalGridLinesBrush">    

                 <Setter.Value>       

                  <SolidColorBrush Color="#d6c79b" />  

                   </Setter.Value>   

              </Setter>        

         <Setter Property="VerticalGridLinesBrush">

                    <Setter.Value>         

                <SolidColorBrush Color="#d6c79b" />      

               </Setter.Value>             

    </Setter>      

       </Style>

            <!--標題欄樣式-->          

   <!--<Style  TargetType="DataGridColumnHeader" >

        <Setter Property="Width" Value="50"/>  

       <Setter Property="Height" Value="30"/>     

    <Setter Property="FontSize" Value="14" />    

     <Setter Property="Background" Value="White" />    

     <Setter  Property="FontWeight"  Value="Bold"/>   

  </Style>-->

            <Style TargetType="DataGridColumnHeader">   

              <Setter Property="SnapsToDevicePixels"   Value="True" />  

               <Setter Property="MinWidth"   Value="0" />   

              <Setter Property="MinHeight"   Value="28" />  

               <Setter Property="Foreground"    Value="#323433" />   

              <Setter Property="FontSize"   Value="14" />  

               <Setter Property="Cursor"     Value="Hand" />

                <Setter Property="Template">       

              <Setter.Value>      

                   <ControlTemplate TargetType="DataGridColumnHeader">   

                          <Border x:Name="BackgroundBorder"    BorderThickness="0,1,0,1"   BorderBrush="#e6dbba"  Width="Auto">

                                <Grid>                            

         <Grid.ColumnDefinitions>                      

                   <ColumnDefinition Width="*" />              

                       </Grid.ColumnDefinitions>            

                         <ContentPresenter  Margin="0,0,0,0"  VerticalAlignment="Center"  HorizontalAlignment="Center" />

                                    <Path x:Name="SortArrow"  Visibility="Collapsed"   Data="M0,0 L1,0 0.5,1 z"  Stretch="Fill"    Grid.Column="2"    

                                       Width="8"  

                                         Height="6"  

                                         Fill="White"

                                          Margin="0,0,50,0"    

                                       VerticalAlignment="Center"     

                                      RenderTransformOrigin="1,1" />   

                                  <Rectangle Width="1"   

                                             Fill="#d6c79b"

                                               HorizontalAlignment="Right"  

                                              Grid.ColumnSpan="1" />   

                                  <!--<TextBlock  Background="Red">  

                           <ContentPresenter></ContentPresenter></TextBlock>-->   

                              </Grid>   

                          </Border>             

            </ControlTemplate>         

            </Setter.Value>    

             </Setter>        

         <Setter Property="Height"

                        Value="25" />      

       </Style>       

      <!--行樣式觸發-->   

          <!--背景色改變必須先設定cellStyle 因為cellStyle會覆蓋rowStyle樣式-->

            <Style  TargetType="DataGridRow">         

        <Setter Property="Background"   

                      Value="#F2F2F2" />     

            <Setter Property="Height"  

                       Value="25" />      

           <Setter Property="Foreground"      

                   Value="Black" />        

         <Style.Triggers>              

       <!--隔行換色-->          

           <Trigger Property="AlternationIndex"     

                         Value="0">      

                   <Setter Property="Background"   

                              Value="#e7e7e7" />    

                 </Trigger>            

         <Trigger Property="AlternationIndex"   

                           Value="1">    

                     <Setter Property="Background"

                                Value="#f2f2f2" />       

              </Trigger>

                    <Trigger Property="IsMouseOver"  

                            Value="True">       

                  <Setter Property="Background"

                                Value="#fbe178" />     

                    <!--<Setter Property="Foreground" Value="White"/>-->

                    </Trigger>

                    <Trigger Property="IsSelected"

                             Value="True">      

                   <Setter Property="Foreground"   

                              Value="Black" />

                    </Trigger>    

             </Style.Triggers>   

          </Style>

            <!--單元格樣式觸發-->  

           <Style TargetType="DataGridCell">

                <Setter Property="Template">   

                  <Setter.Value>   

                      <ControlTemplate TargetType="DataGridCell">

                            <TextBlock TextAlignment="Center"    

                                    VerticalAlignment="Center">    

                        <ContentPresenter />         

                    </TextBlock>            

             </ControlTemplate>   

                  </Setter.Value>    

             </Setter>              

   <Style.Triggers>              

       <Trigger Property="IsSelected"   

                           Value="True">     

                    <!--<Setter Property="Background" Value="White"/>

                <Setter Property="BorderThickness" Value="0"/>-->   

                      <Setter Property="Foreground"                

                 Value="Black" />            

         </Trigger>    

             </Style.Triggers>   

          </Style>     

    </ResourceDictionary>    

</Application.Resources>

</Application>

 

 

 建議:樣式程式碼比較多,最好是先複製到自己專案中看效果,然後再細看樣式的實現。 在此,內容已介紹完,如有疑問請留言。