极品分享

C# WPF 中DataGrid 控件的样式设置及使用

本次要实现的效果为:

1-171449495996156.jpg



这个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"   表示两行交替显示背景色。如果不设置此属性则显示效果为:

2-171510290374236.jpg


AutoGenerateColumns="False"   表示不让DataGrid自动生成列。如果设置成true,则效果如下: 多出了不需要的列

3-171514219909133.jpg


HeadersVisibility="Column" 设置此属性为只显示列标题单元格,行标题不显示。如果不设置此属性则效果为:


4-171521074904318.jpg


到此为止还没有真正为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>



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

2017-03-15 0 /
NET学习
/
标签: 

评论回复

回到顶部