Displaying an Image in a Field

In your xamDataPresenter™, you may want a Field to display an image. To do this, you need to override the CellValuePresenter's template.

The following procedure assumes you have a data bound xamDataPresenter where you want to place an image in a field. For more information, see Adding xamDataPresenter to Your Application.

To display an image in a field:

This topic actually uses the Products.xml file, which has an attribute pointing to the images that we want to load.

Note

Note

To reflect where the images are located on your machine, you must modify the Products.xml file to change the path for Logo.

You will need to create a Style that targets the CellValuePresenter class in the Grid’s resource section. You will also need to give the style a Key of "ProductImage". The style should look similar to the following example code.

In 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>

Use the following XAML code to create an instance of XamDataPresenter and names it.

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

Inside the XamDataPresenter tags, place the following XAML code. This lays out the fields and also sets the "Logo" FieldSettings to the CellValuePresenterStyle to the Style created above.

Note	Note Changes to the field layout are View independent, and therefore the code below will work with either GridView or CarouselView.

In 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>

Build and run the project. If you are using the CarouselView you should see something similar to the following image.

WPF | Help Topics

Displaying an Image in a Field

Related Topics