グリッドの作成

次に、C1FlexGrid を定義する XAML を示します。

XAML for WPF

	コードのコピー
<!-- FlexGrid に曲を表示します --> <c1:C1FlexGrid x:Name="_flexiTunes" Grid.Row="2" Style="{StaticResource gridStyle}" IsReadOnly="true" AreRowGroupHeadersFrozen="False" HeadersVisibility="Column" GridLinesVisibility="None" Background="White" RowBackground="White" AlternatingRowBackground="White" GroupRowBackground="White" MinColumnWidth="30" SelectionMode="ListBox" SelectionBackground="#a0eaeff4" CursorBackground="#ffeaeff4" AutoGenerateColumns="False" > <c1:C1FlexGrid.Columns> <c1:Column Binding="{Binding Name}" Header="Title" AllowDragging="False" Width="300" /> <c1:Column Binding="{Binding Duration}" HorizontalAlignment="Right" /> <c1:Column Binding="{Binding Size}" HorizontalAlignment="Right" /> <c1:Column Binding="{Binding Rating, Mode=TwoWay}" HorizontalAlignment="Left" Width="200" /> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid>

コードのコピー

<!-- FlexGrid に曲を表示します -->
<c1:C1FlexGrid x:Name="_flexiTunes" Grid.Row="2"
    Style="{StaticResource gridStyle}"
    IsReadOnly="true"
    AreRowGroupHeadersFrozen="False"
    HeadersVisibility="Column"
    GridLinesVisibility="None"
    Background="White"
    RowBackground="White"
    AlternatingRowBackground="White"
    GroupRowBackground="White"
    MinColumnWidth="30"
    SelectionMode="ListBox"
    SelectionBackground="#a0eaeff4"
    CursorBackground="#ffeaeff4"
    AutoGenerateColumns="False" >
    <c1:C1FlexGrid.Columns>
        <c1:Column Binding="{Binding Name}" Header="Title" AllowDragging="False" Width="300" />
        <c1:Column Binding="{Binding Duration}" HorizontalAlignment="Right" />
        <c1:Column Binding="{Binding Size}" HorizontalAlignment="Right" />
        <c1:Column Binding="{Binding Rating, Mode=TwoWay}" HorizontalAlignment="Left" Width="200" />
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

XAML でスタイルに関するプロパティをいくつか設定します。グリッドではいくつかのプロパティが公開されているため、カスタムセルや XAML テンプレートを使用しなくても外観のかなりの部分をカスタマイズできることを認識してください。

コードでは、AutoGenerateColumns プロパティを False に設定し、列を明示的に定義していることにも注意してください。これにより、列の外観と動作をさらに制御することができます。

最後に、この XAML コードは AreRowGroupHeadersFrozen プロパティを False に設定します。通常の場合、グループ行は水平方向にスクロールしません。そのため、グループ情報は常に表示されています。しかし、このミュージックライブラリアプリケーションでは、グループ行のすべての列に関する情報が表示されるので、他のすべての行と同様にこの行も水平方向にスクロールできるようにする必要があります。それには、AreRowGroupHeadersFrozen プロパティを False に設定します。