SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight/WPFで使える逆引きTips集

Silverlight/WPFで使える逆引きTips集
――DataGrid機能(Silverlight後編)

(19) DataGridコントロール Silverlight後編

  • X ポスト
  • このエントリーをはてなブックマークに追加

04.並べ替え可能な列を限定する

 既定ではすべてのデータの並べ替えが可能になっています。並べ替え可能な列を限定するには、並べ替えを禁止したい列のCanUserSortプロパティにFalseを設定します。

 下記は並べ替え可能な列を限定する例です。「First Name」「Middle Name」「Last Name」列を除いて並べ替えができないようにしています。

 コードは見やすくするためにいくつかの属性を省略しています。詳細はサンプルコードをダウンロードして参照ください。

並べ替え可能な列を限定する例
並べ替え可能な列を限定する例
XAMLの例
<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として作成するものです。

VBの例
 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
C#の例
 class TitleList : List<string>
{
    public TitleList()
    {
        this.Add("Mr.");
        this.Add("Ms.");
        this.Add("Sr.");
        this.Add("Sra.");
    }
}

リソースの追加

 次にComboBoxに表示するデータ(TitleListクラス)をDataGridのリソースに追加します。

XAMLの例
 <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を設定します。

XAMLの例
<!-- ↓元々あった列は削除する -->
<!--<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で値を選択できるようにする例
ComboBoxで値を選択できるようにする例
ポイント

  列にカスタマイズしたComboBoxを表示するには、<DataGridTemplateColumn>でデータ表示部分とComboBox表示部分の定義を作成する。

次のページ
06.独自の列を追加する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight/WPFで使える逆引きTips集連載記事一覧

もっと読む

この記事の著者

HIRO(ヒロ)

HIRO's.NETのHIROです。とある半導体工場のSEです。VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。最近はBlog でPowerShellについて書いています。2008/07/07にPowerShell from Japan!!というサイトを立ち上げまし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6016 2011/07/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング