normalian blog

Let's talk about Microsoft Azure, ASP.NET and Java!

DataGridのAutoGenerateColumns属性 on Silverlight

Silverlight4が出てずいぶんたつ昨今で恐縮だが、久しぶりにSilverlightを使ったらSystem.Windows.Controls.DataGrid(以下はDataGrid)で若干はまってしまった。何時ものような重い記事でなく、備忘録的なTIPSとして記載させていただく。

DataGridについての復習

以下のようなUIを持つコンポーネントであり、業務アプリ等で非常に喜ばれそうなコンポーネントではないだろうか。

当該コンポーネントを利用する場合は、新規に作成したSilverilghtソリューションに対して「参照の追加」でアセンブリを追加する必要がある。詳しい利用方法については、以下のMSDN Code Recipeを参照すると良いだろう。

DataGridを実際につかってみる

新規のSilverlightソリューションを作成し、Visual Studio の 「ツールボックス」ウィンドウからDataGridをすると、以下のXAMLが出力される。MainPage.xamlに含まれる「AutoGenerateColumns="False"」に若干やられたのでメモ。

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid AutoGenerateColumns="False" Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="120" />
    </Grid>
</UserControl>

まず、「MainPage.xaml.cs」を編集してみる。

  • MainPage.xaml.cs(抜粋)
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            dataGrid1.ItemsSource = new List<Person>()
            {
                new Person(){ 名前="割と普通", 備考="非常に普通な Azure と ASP.NET MVC と Silverlight使い"},
                new Person(){ 名前="北兄者", 備考="北海道在住、ナイスパパだがエロゲ魔人"},
                new Person(){ 名前="Shibayan", 備考="金髪ニーソのメイド大好きなASP.NET MVCとSilverlight使い"}
            };
        }
    }

    public class Person
    {
        public string 名前 { get; set; }
        public string 備考 { get; set; }
    }

ホントは「loaded」イベント内でバインドした方が良いと思うけど、割愛。この結果を実行すると以下になる。真っ白で涙目になりそうだ。。。

「AutoGenerateColumns="True" 」にすると、最初に紹介したような形でDataGrid内にデータが表示される。
が、この機能はあくまで開発用だと考えられるので、TIPSとして覚えていただけると幸いだ。

DataGridの表示を細かくカスタマイズする場合は、以下を参照すると良いだろう。