04.並べ替え可能な列を限定する
既定ではすべてのデータの並べ替えが可能になっています。並べ替え可能な列を限定するには、並べ替えを禁止したい列のCanUserSortプロパティにFalseを設定します。
下記は並べ替え可能な列を限定する例です。「First Name」「Middle Name」「Last Name」列を除いて並べ替えができないようにしています。
コードは見やすくするためにいくつかの属性を省略しています。詳細はサンプルコードをダウンロードして参照ください。
<sdk:DataGrid> <sdk:DataGrid.Columns> <sdk:DataGridTextColumn x:Name="CustomerIDColumn" CanUserSort="False"/> <sdk:DataGridCheckBoxColumn x:Name="NameStyleColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="TitleColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="FirstNameColumn" CanUserSort="True"/> <sdk:DataGridTextColumn x:Name="MiddleNameColumn" CanUserSort="True"/> <sdk:DataGridTextColumn x:Name="LastNameColumn" CanUserSort="True"/> <sdk:DataGridTextColumn x:Name="SuffixColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="CompanyNameColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="SalesPersonColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="EmailAddressColumn" CanUserSort="False"/> <sdk:DataGridTextColumn x:Name="PhoneColumn" CanUserSort="False"/> <sdk:DataGridTemplateColumn x:Name="ModifiedDateColumn" CanUserSort="False"> <sdk:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <sdk:DatePicker /> </DataTemplate> </sdk:DataGridTemplateColumn.CellEditingTemplate> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Path=ModifiedDate, StringFormat=\{0:d\}}" /> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> </sdk:DataGrid.Columns> </sdk:DataGrid>
並べ替え可能な列を限定するには、並べ替えを禁止したい列のCanUserSortプロパティにFalseを設定する。
05.ComboBoxで値を選択できるようにする
このTipsではDataGridにCustomerテーブルを表示させ、Title列にComboBoxを表示して値を選択できるようにする例を紹介します。
ComboBoxに表示するアイテム用クラスを作成する
最初にComboBoxに表示するアイテムを作成します。
プロジェクトにTitleListというクラスを追加します。このクラスはTitle列に表示させるデータ「Mr.」「Ms.」「Sr.」「Sra.」をListとして作成するものです。
Public Class TitleList Inherits List(Of String) Public Sub New() Me.Add("Mr.") Me.Add("Ms.") Me.Add("Sr.") Me.Add("Sra.") End Sub End Class
class TitleList : List<string> { public TitleList() { this.Add("Mr."); this.Add("Ms."); this.Add("Sr."); this.Add("Sra."); } }
リソースの追加
次にComboBoxに表示するデータ(TitleListクラス)をDataGridのリソースに追加します。
<sdk:DataGrid> <sdk:DataGrid.Resources> <!--★★★リソースとしてTitleListを追加★★★--> <my1:TitleList x:Key="TitleList" /> </sdk:DataGrid.Resources> :省略 </sdk:DataGrid>
Title列をComboBox列に変更し、作成したリストとデータをバインドする
もともとあったTitle列を削除し、XAMLを下記のように変更します。
まず<DataGridTemplateColumn>タグを準備します。その中にデータ表示用の<DataGridTemplateColumn.CellTemplate>、データを選択させるComboBoxを表示する<DataGridTemplateColumn.CellEditingTemplate>タグを配置します。このとき、ComboBoxにはリソースに準備していたTitleListが表示されるようにItemSourceを設定します。
<!-- ↓元々あった列は削除する --> <!--<sdk:DataGridTextColumn x:Name="TitleColumn" Binding="{Binding Path=Title}" Header="Title" Width="SizeToHeader" CanUserSort="False"/>--> <!--★★★ComboBox列にする ここから★★★--> <sdk:DataGridTemplateColumn Header="Title"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Title}" /> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> <sdk:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <ComboBox ItemsSource="{StaticResource TitleList}" SelectedItem="{Binding Path=Title, Mode=TwoWay}"></ComboBox> </DataTemplate> </sdk:DataGridTemplateColumn.CellEditingTemplate> </sdk:DataGridTemplateColumn> <!--★★★ComboBox列にする ここまで★★★-->
列にカスタマイズしたComboBoxを表示するには、<DataGridTemplateColumn>でデータ表示部分とComboBox表示部分の定義を作成する。