wpf 中DataGrid 控制元件的樣式設定及使用
阿新 • • 發佈：2018-12-12
本次要實現的效果為： 這個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> 建議：樣式程式碼比較多，最好是先複製到自己專案中看效果，然後再細看樣式的實現。 在此，內容已介紹完，如有疑問請留言。