1. 程式人生 > 其它 >DataGridColumn普通樣式和編輯樣式

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>