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>

 

 

 建议:样式代码比较多,最好是先复制到自己项目中看效果,然后再细看样式的实现。 在此,内容已介绍完,如有疑问请留言。

 

转自:https://www.cnblogs.com/zqhxl/p/3851220.html

猜你喜欢

转载自blog.csdn.net/milijiangjun/article/details/82858934