DataGridColumn普通樣式和編輯樣式
一般情況下DataGridBoundColumn和DataGridComboBoxColumn足以滿足多數列的樣式,如果需要自定義列樣式,則可以使用DataGridTemplateColumn型別。
在設定列編輯樣式之前,我們先建立一個簡單的DataGrid,分別顯示名稱(用預設的DataGridTextColumn),和分數(使用DataGridTemplateColumn來定義自定義模板:一個ProgressBar):
<DataGrid Name="dataGrid" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="*"> </DataGridTextColumn> <DataGridTemplateColumn Header="分數" Width="2*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ProgressBar Value="{Binding Score}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
背後資料程式碼是這樣:
dataGrid.ItemsSource = new people[] {new people(){ Name = "王", Score = 100 }, new people(){ Name = "劉", Score = 30 }, new people(){ Name = "李", Score = 86 }, new people(){ Name = "趙", Score = 50 } }; //people類就不用再說了,兩個屬性:Name和Score
結果就是:
第一列預設是可以編輯的(由於使用預設的DataGridTextColumn),而第二列我們只定義了顯示的模板,無法實現編輯。
1:設定DataGridBoundColumn
從上面型別樹上可以看到,DataGridBoundColumn是DataGridTextColumn,DataGridHyperlinkColumn和DataGridCheckBoxColumn的父類。作為父類,DataGridBoundColumn定義了兩個屬性來設定這些子類的普通樣式和編輯樣式。分別是ElementStyle和EditingElementStyle。它們都是Style物件(WPF中的樣式)。這個Style的TargetType根據列的型別所變化。比如DataGridTextColumn,普通樣式是針對TextBlock的。而編輯樣式則應該針對TextBox。而DataGridCheckBoxColumn得普通樣式和編輯樣式都應該針對CheckBox的。
所以把上面的XAML中的第一個列這樣設定:
<DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="*"> <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock"> <Setter Property="Foreground" Value="Red"/> <Setter Property="TextAlignment" Value="Center"/> </Style> </DataGridTextColumn.ElementStyle> <DataGridTextColumn.EditingElementStyle> <Style TargetType="TextBox"> <Setter Property="Foreground" Value="White"/> <Setter Property="Background" Value="Gray"/> <Setter Property="BorderBrush" Value="Navy"/> <Setter Property="BorderThickness" Value="2"/> </Style> </DataGridTextColumn.EditingElementStyle> </DataGridTextColumn>
結果:
2:設定DataGridComboBoxColumn
OK,雖然DataGridComboBoxColumn沒有繼承與DataGridBoundColumn,但是它和DataGridBoundColumn一樣,同樣有ElementStyle和EditingElementStyle這兩個屬性。當然對於DataGridComboBoxColumn,顯然樣式都要針對ComboBox的,使用上則和上面講的的一樣。
3:設定DataGridTemplateColumn
對於DataGridTemplateColumn,顯然CellTemplate就是該列的普通顯示樣式了。對於編輯樣式則可以使用EditingCellTemplate屬性。
再重新定義下XAML:
<DataGridTemplateColumn Header="分數" Width="2*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ProgressBar Value="{Binding Score}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Score}" TextAlignment="Center"/> <Slider Value="{Binding Score,UpdateSourceTrigger=PropertyChanged}" Maximum="100"/> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn>