フィールドに画像を表示

xamDataGrid™ の Field に画像を表示できます。これを実行するには、CellValuePresenter のテンプレートをオーバーライドする必要があります。

以下の手順を実行するには、xamDataGrid をページに追加する必要があります。詳細は、xamDataGrid をページに追加のトピックを参照してください。

次の手順に従ってフィールドに画像を表示します。

アプリケーションで以下のコンテンツを含む Products.xml ファイルを作成します。読み込む画像を参照する "Logo" 属性を定義します。

Note

注:

ご使用のシステムで画像を配置する場所を反映するには、ファイルのコンテンツを修正して、ロゴ画像のパスを変更します。
データソースとして使用される XmlDataProvider をページのリソースセクションで作成します。

XAML の場合:
```
<XmlDataProvider x:Key="ProductsData" Source="/WpfApplication1;component/Data/Products.xml" XPath="/Products" />
```
Note

注:

上記の定義でアプリケーションの固有パスに基づいてリソースパスおよび XPath 値を変更します。

ページのリソースセクションにある 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>

以下の XAML コードで XamDataGrid のインスタンスを作成してデータソースを設定します。

XAML の場合:
```
<igDP:XamDataGrid DataSource="{Binding Source={StaticResource ProductsData}, XPath=Product}">
    ...
</igDP:XamDataGrid>
```

XamDataGrid タグ内に以下の XAML コードを追加します。これによってフィールドをレイアウトし、CellValuePresenterStyle の "Logo" FieldSettings を上記で作成したスタイルに設定します。

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>

プロジェクトをビルドして実行すると以下の画像のようになります。

WPF | ヘルプトピック

フィールドに画像を表示

関連トピック

WPF | ヘルプ トピック

フィールドに画像を表示

関連トピック

WPF | ヘルプトピック