FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Material Design Toolkit】 DataGrid

 Material Design ToolkitではDataGridのスタイルは「MaterialDesignDataGrid」の1つだけです。
 このスタイルは規定のスタイルに設定されているためDataGridを使用する際にStyleを指定する必要はありません。
 スタイルで見た目を変えているだけなので通常のDataGridと使い方は全く同じです。
 以下のコードはCheckBox、TextBox、ComboBoxを使用したDataGridのサンプルです。
 ViewModelのコードはデータバインディング用のプロパティを持っているだけなので省略します。
<Window x:Class="DataGridDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:DataGridDemo.Views"
        xmlns:vm="clr-namespace:DataGridDemo.ViewModels"
        Title="MainWindow" Height="350" Width="525"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <DataGrid ItemsSource="{Binding InfoList}" Margin="5,10" AutoGenerateColumns="False" CanUserAddRows="False"
              materialDesign:DataGridAssist.CellPadding="10,5,5,5"
              materialDesign:DataGridAssist.ColumnHeaderPadding="10">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn Header="選択" Binding="{Binding IsSelected}"
                                    ElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnStyle}"
                                    EditingElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnEditingStyle}"/>

            <!-- 通常のTextColumnを使用する場合 -->
            <DataGridTextColumn Header="名前" Binding="{Binding Name}"
                                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"/>

            <!-- MaterialDesignのTextColumnを使用して入力時にPopUpを表示する -->
            <materialDesign:MaterialDataGridTextColumn Header="年齢" Binding="{Binding Age}"
                                                       EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />

            <!-- MaterialDesignのTextColumnを使用して入力文字数を表示する -->
            <materialDesign:MaterialDataGridTextColumn Header="メールアドレス" Binding="{Binding MailAddress}"
                                                       MaxLength="50"
                                                       EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />

            <materialDesign:MaterialDataGridComboBoxColumn Header="都道府県"
                                                           ItemsSourceBinding="{Binding PrefectureList}"
                                                           SelectedValueBinding="{Binding Prefecture}"/>
        </DataGrid.Columns>
    </DataGrid>
</Window>
 このコードを実行すると以下の様なDataGridが表示されます。
MaterialDesignDataGrid1.png
 DataGrid定義時にmaterialDesign:DataGridAssist.CellPaddingを使用することでセルのPaddingを指定することができます。
 同様に、materialDesign:DataGridAssist.ColumnHeaderPaddingを使用することでヘッダーのPaddingを指定することができます。

 DataGridの最初のカラムにはDataGridCheckBoxColumnを使用してbool型のプロパティを表示しています。
 ElementStyel, EditingElementStyleを省略してもエラーにはなりませんがWPFデフォルトのCheckBoxが表示されてしまいます。

 2つめのカラムにはDataGridTextColumnを使用して文字列のプロパティを表示しています。
 テキスト編集時の見た目はEditingElementStyleに準じます。

 3つめと4つめのカラムにはmaterialDesign:MaterialDataGridTextColumnを使用して入力をポップアップ表示させています。
 EdigingElementStyleにはポップアップ入力用スタイルMaterialDesignDataGridTextColumnPopupEditingStyleを指定します。
 4つ目のカラムではMaxLengthを指定することで編集時に入力されている文字数が表示されます。
 文字列編集時には以下の様になります。
MaterialDesignDataGrid2.png
 最後のカラムにはmaterialDesign:MaterialDataGridComboBoxColumnを使用しています。
 DataGridComboBoxColumnを使わないのはComboBoxのスタイルをMaterial Design Toolkitに合わせるためです。
   
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
09 | 2018/10 | 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。