バージョン

フィールドに画像を表示

xamDataPresenter で、 フィールド に画像を表示したい場合があります。これを実行するには、 CellValuePresenter のテンプレートをオーバーライドする必要があります。

以下の手順は、フィールドに画像を配置したいデータ バインドした xamDataPresenter を持っていることが前提となります。詳細については、 xamDataPresenter をアプリケーションに追加を参照してください。

フィールドに画像を表示するには、次の手順に従ってください。

  1. このトピックは、ロードしたい画像をポイントする属性を持つ、 Products.xml ファイルを実際には使用します。

Note

注: 画像がご使用のマシンで配置される場所を反映するには、Products.xml ファイルを修正して、ロゴのパスを変更します。

  1. グリッドのリソース セクションにある CellValuePresenter クラスをターゲットとするスタイルを作成する必要があります。スタイルに「ProductImage」の Key を提供する必要もあります。スタイルは以下の例のコードのようになります。

XAML の場合:

<Style TargetType="{x:Type igDP:CellValuePresenter}" x:Key="ProductImage">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                    <Image Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

  1. 以下の XAML コードを使用して、XamDataPresenter のインスタンスを作成し名前を指定します。

XAML の場合:

<igDP:XamDataPresenter x:Name="XamDataPresenter1" ... >
  ...
</igDP:XamDataPresenter>

  1. XamDataPresenter タグ内に、以下の XAML コードを配置します。これによってフィールドのレイアウトを行い、さらに「Logo」 FieldSettings を上記で作成したスタイル、 CellValuePresenterStyle に設定します。

Note

注: フィールド レイアウトへの変更は、 View から独立しているため、以下のコードは GridView または CarouselView のいずれかと動作します。

XAML の場合:

<igDP:XamDataPresenter.FieldLayoutSettings>
    <igDP:FieldLayoutSettings AutoGenerateFields="False" />
</igDP:XamDataPresenter.FieldLayoutSettings>
<igDP:XamDataPresenter.FieldLayouts>
    <igDP:FieldLayout>
        <igDP:FieldLayout.Fields>
            <igDP:Field Name="ProductName" Label="Product Name" >
                <igDP:Field.Settings>
                    <igDP:FieldSettings CellMinWidth="200"
                        CellWidth="200" />
                </igDP:Field.Settings>
            </igDP:Field>
            <igDP:Field Name="Logo" Label="Product Logo">
                <igDP:Field.Settings>
                    <igDP:FieldSettings CellMinWidth="200" CellWidth="200"
                        CellValuePresenterStyle="{StaticResource ProductImage}" />
                </igDP:Field.Settings>
            </igDP:Field>
        </igDP:FieldLayout.Fields>
    </igDP:FieldLayout>
</igDP:XamDataPresenter.FieldLayouts>

  1. プロジェクトをビルドして実行します。CarouselView を使用している場合には、以下の画像のようになります。

xamDataPresenter フィールドに画像を表示

関連トピック

データ項目とデータ レコードについて