2013年09月25日

WPFサンプル:プロパティ値を変更してDataGridの見た目と動作を変更する

   このエントリーをはてなブックマークに追加 Clip to Evernote
DataGridには、さまざまなプロパティが用意されていて、これらのプロパティ値を変更することで、DataGridの見た目や動作を簡単にカスタマイズすることができます。
前回「DataGridのサンプルプログラム(1)」で示したXAMLをベースに、いくつかのプロパティの値を変更してみました。

まずは、スクリーンショットを。

DataGrid21

XAMLは次のとおりです。

<Window x:Class="DataGrid2Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:DataGrid2Sample"
        Title="MainWindow" Height="350" Width="420">
    <Window.DataContext>
        <my:UserList x:Name="userList"/>
    </Window.DataContext>
    <Grid x:Name="LayoutRoot" Background="White" >
        <!-- プロパティ値変更だけでできる簡易カスタマイズ -->
        <DataGrid AutoGenerateColumns="False" Margin="5,5,5,8" Name="dataGrid2"
                      ItemsSource="{Binding Path=Users}"
                      GridLinesVisibility="Vertical"
                      VerticalGridLinesBrush="LightSteelBlue"
                      HeadersVisibility="All" RowHeaderWidth="20"
                      HorizontalScrollBarVisibility="Hidden"
                      VerticalScrollBarVisibility="Visible"
                      RowBackground="LightYellow"
                      AlternatingRowBackground="#f0f0f0"
                      SelectionMode="Single"
                      SelectionUnit="CellOrRowHeader"
                      Width="383" RowHeight="26" IsReadOnly="True">
            <DataGrid.Columns>
                <DataGridTextColumn
                        Binding="{Binding Path=Nickname}" CanUserReorder="True"
                        CanUserResize="True"
                        CanUserSort="True" Header="ユーザ名" Width="70" />
                <DataGridTextColumn
                        Binding="{Binding Path=Name}" CanUserReorder="True"
                        CanUserResize="True"
                        CanUserSort="True" Header="氏名" Width="90" />
                <DataGridTextColumn
                        Binding="{Binding Path=Birthplace}" CanUserReorder="True"
                        CanUserResize="True"
                        CanUserSort="True" Header="出身地" Width="60" />
                <DataGridTextColumn
                        Binding="{Binding Path=Age}" CanUserReorder="True"
                        CanUserResize="True"
                        CanUserSort="True" Header="年齢" Width="45" />
                <DataGridTextColumn
                        Binding="{Binding Path=Birthday, StringFormat=\{0:yyyy/MM/dd\}}"
                        CanUserReorder="True" CanUserResize="True" CanUserSort="True"
                        Header="生年月日" Width="Auto" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

以下、このサンプルで利用しているプロパティについての簡単な説明です。
  • GridLinesVisibility
  • どのグリッド線を表示するかを指定します。指定できるのは、All, Horizontal, Verical, None の4つです。 Allが規定値です。
  • VerticalGridLinesBrush
  • 垂直グリッド線の描画に使用するブラシを指定します。同様に、HorizontalGridLinesBrush プロパティで、水平グリッド線を指定できます。
  • HeadersVisibility
  • 行と列ヘッダーの表示有無を指定します。指定できるのは、All, Column, Row, None の4つです。 既定値は Allです。
  • RowHeaderWidth
  • 行見出しの列の幅を設定します。
  • HorizontalScrollBarVisibility, VerticalScrollBarVisibility
  • 水平/垂直スクロール バーの表示方法を指定します。Auto Disabled Hidden Visibleの4つから指定します。既定値は Autoです。Disabled Hiddenの違いが分かっていません (T T)
  • RowBackground
  • 行の背景のブラシを指定します。
  • AlternatingRowBackground
  • 1行おきの背景色のブラシを指定します。 なお、AlternationCount のプロパティを3に設定すれば、3行おきに背景色を変えられます。
  • SelectionMode
  • Singleの場合、ユーザーは一つの項目を選択できます。 Extendedの場合、複数の項目を選択できます。 規定値は Extendedです。
  • SelectionUnit
  • 行を選択できるのか、セルが選択できるのか、またはその両方なのかを指定します。 FullRow, Cell, CellOrRowHeader のいづれかを指定します。 規定値は FullRowです。
  • IsReadOnly
  • 読み取り専用の場合trueを、編集可ならな falseを指定します。 既定値は falseです。

いちおう、C#のコードも載せておきますね。
ちなみに、コードビハインドへの追加コードはありません。

using System;
using System.Collections.ObjectModel;
namespace DataGrid2Sample {
    public class User {
        public string Nickname { get; set; }
        public string Name { get; set; }
        public DateTime Birthday { get; set; }
        public string Birthplace { get; set; }
        public int Age {
            get {
                DateTime today = DateTime.Today;
                int age = today.Year - Birthday.Year;
                if (today.Month < Birthday.Month)
                    age--;
                else if (today.Month == Birthday.Month && today.Day < Birthday.Day)
                    age--;
                return age;
            }
        }
    }
    public class UserList {
        public ObservableCollection<User> Users { get; set; }
        public UserList() {
            Users = new ObservableCollection<User> {
                new User { Name="芥川 隆乃輔", Nickname="ryu",
                           Birthday= new DateTime(1950,3,6), Birthplace="東京"},
                new User { Name="名都目 漱石", Nickname="natsu",
                           Birthday= new DateTime(1982,11,13), Birthplace="神奈川"},
                new User { Name="宮沢 健治", Nickname="miya",
                           Birthday= new DateTime(1964,7,24), Birthplace="宮城"},
                new User { Name="島咲 藤村", Nickname="saki",
                           Birthday= new DateTime(1971,2,5), Birthplace="長野"},
                new User { Name="紀久地 寛", Nickname="kan",
                           Birthday= new DateTime(1963,12,15), Birthplace="長崎"},
            };
        }
    }
}



WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52334459