カスタムセル

FlexGrid には、セルのコンテンツを完全に制御できる FormatItem プロパティがあります。インラインセルテンプレートを追加することで各列をカスタマイズでき、FlexGrid コントロールでのセルの外観を定義できます。列のセルテンプレートを定義するには、画像、テキスト、アイコンなどの入った任意のタイプのコンテンツを追加します。

次の図は、パフォーマンスを表すセルテンプレートとして XuniGauge を設定したときの FlexGrid を示しています。例では、「フィルタ処理」セクションで追加した Customer という cocoa クラスを使用します。

次のコード例は、FlexGrid コントロールにカスタムセルコンテンツを追加する方法を示します。

C# のコード

C#	コードのコピー
var data = Customer.GetCustomerList(100); grid.ItemsSource = data;

XAML のコード

XAML	コードのコピー
<Grid VerticalOptions="FillAndExpand"> <xuni:FlexGrid x:Name="grid" AutoGenerateColumns="False" IsReadOnly="True"> <xuni:FlexGrid.Columns> <xuni:GridColumn Binding="First"/> <xuni:GridColumn Binding="Last"/> <xuni:GridColumn Binding="Weight" Header="Performance"> <xuni:GridColumn.CellTemplate> <DataTemplate> <gauge:XuniRadialGauge IsAnimated="False" Value="{Binding Weight}" Min="50" Max="100" ShowText="None" ShowRanges="False" WidthRequest="50" HeightRequest="50"> <gauge:XuniRadialGauge.Ranges> <gauge:GaugeRange Min="50" Max="80" Color="Green"/> <gauge:GaugeRange Min="80" Max="90" Color="Yellow"/> <gauge:GaugeRange Min="90" Max="100" Color="Red"/> </gauge:XuniRadialGauge.Ranges> </gauge:XuniRadialGauge> </DataTemplate> </xuni:GridColumn.CellTemplate> </xuni:GridColumn> </xuni:FlexGrid.Columns> </xuni:FlexGrid> </Grid>

XAML

コードのコピー

<Grid VerticalOptions="FillAndExpand">
      <xuni:FlexGrid x:Name="grid" AutoGenerateColumns="False" IsReadOnly="True">
        <xuni:FlexGrid.Columns>
          <xuni:GridColumn Binding="First"/>
          <xuni:GridColumn Binding="Last"/>
          <xuni:GridColumn Binding="Weight" Header="Performance">
            <xuni:GridColumn.CellTemplate>
              <DataTemplate>
                <gauge:XuniRadialGauge IsAnimated="False" Value="{Binding Weight}" Min="50" Max="100" ShowText="None" ShowRanges="False" WidthRequest="50" HeightRequest="50">
                  <gauge:XuniRadialGauge.Ranges>
                    <gauge:GaugeRange Min="50" Max="80" Color="Green"/>
                    <gauge:GaugeRange Min="80" Max="90" Color="Yellow"/>
                    <gauge:GaugeRange Min="90" Max="100" Color="Red"/>
                  </gauge:XuniRadialGauge.Ranges>
                </gauge:XuniRadialGauge>
              </DataTemplate>
            </xuni:GridColumn.CellTemplate>
          </xuni:GridColumn>
        </xuni:FlexGrid.Columns>
      </xuni:FlexGrid>
    </Grid>