FlexGrid for SilverlightのColumnを明示的に指定する。

FlexGrid Controls Silverlight

今回は、FlexGridのAutoGenerateColumns機能を使用せず、列を明示的に指定してデータを表示してみます。実行するとこんな感じになります。

C1.Silverlight.FlexGrid.Columnでカラムを設定する。

FlexGridではC1.Silverlight.FlexGrid.Columnクラスを使用してカラム設定を行います。このクラスはSilverlightのDataGridのDataGridTemplateColumnクラスのような働きをします。ざっと見てみたところDataGridTextColumnやDataGridCheckBoxColumn相当のクラスは提供されていないようです。
C1.Silverlight.FlexGrid.Columnの定義例です。CellTemplateで表示時のセルスタイルを、CellEditingTemplateで編集時のセルスタイルをそれぞれ定義します。バイディングソースにNameプロパティを指定しました。

<c1:Column Header="名前" Width="200">

    <!--表示モードにあるセルのためのテンプレート -->
    <c1:Column.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold" />
        </DataTemplate>
    </c1:Column.CellTemplate>

    <!-- 編集モードにあるセルのためのテンプレート -->
    <c1:Column.CellEditingTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Ellipse Width="8" Height="8" Fill="Red" Grid.Column="0" />
                <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" 
                    Foreground="GreenYellow" Background="Transparent" 
                    FontStyle="Italic" FontWeight="Bold" BorderThickness="0" />
            </Grid>
        </DataTemplate>
    </c1:Column.CellEditingTemplate>
</c1:Column>

XAML全体のコードです。

<UserControl x:Class="FlexGridSample2.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"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <c1:C1FlexGrid x:Name="FlexGrid" AutoGenerateColumns="False">
            <c1:C1FlexGrid.Columns>

                <c1:Column Header="名前" Width="200">

                    <!--表示モードにあるセルのためのテンプレート -->
                    <c1:Column.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" 
                                       Foreground="Green" 
                                       FontWeight="Bold" />
                        </DataTemplate>
                    </c1:Column.CellTemplate>

                    <!-- 編集モードにあるセルのためのテンプレート -->
                    <c1:Column.CellEditingTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Ellipse Width="8" 
                                         Height="8"
                                         Fill="Red" 
                                         Grid.Column="0" />
                                <TextBox Text="{Binding Name, Mode=TwoWay}" 
                                         Grid.Column="1" 
                                         Foreground="GreenYellow" 
                                         Background="Transparent" 
                                         FontStyle="Italic"
                                         FontWeight="Bold" 
                                         BorderThickness="0" />
                            </Grid>
                        </DataTemplate>
                    </c1:Column.CellEditingTemplate>
                </c1:Column>
            </c1:C1FlexGrid.Columns>
        </c1:C1FlexGrid>
    </Grid>
</UserControl>

後は、AutoGenerateColumns機能を使用する場合と同じになります。
FlexGridに設定するデータクラスを定義します。

/// <summary>
/// FlexGridのItemsSourceにセットする用のデータクラス
/// </summary>
public class DummyData
{
    /// <summary>サンプルデータを生成します。</summary>
    /// <returns></returns>
    public static IEnumerable<DummyData> CreateSample()
    {
        var result = new List<DummyData>();
        Random r = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new DummyData
            {
                Name = "Name" + i,
                Age = r.Next(0, 100)
            });
        }
        return result;
    }

    public string Name { get; set; }
    public int Age { get; set; }
}

で、FlexGridにデータをセットして実行します。

public MainPage()
{
    InitializeComponent();

    // FlexGridにデータをセット
    this.FlexGrid.ItemsSource = DummyData.CreateSample();
}

関連記事