Configuring Image Field (XamDataGrid)

Purpose

This topic describes how to create a field to display an image using an ImageField in the XamDataGrid control.

Required Background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
Terms and Concepts	This section defines the major elements that constitute the controls that make up The Data Presenter Family.
Adding XamDataGrid to Your Page	This topic describes how to add a XamDataGrid control to your page.
Generating Fields Manually Versus Automatically	This topic describes how to specify manually FieldLayouts and Fields in the XamDataGrid control.

In this Topic

This topic contains the following sections:

Image Field Configuration Summary
Code Example: Using an Image Field
Related Topics

Image Field Configuration Summary

An ImageField can be associated with a property on an underlying data item whose value represents any of the following types:

An ImageSource instance.
A Uri instance that describes the location of a local or remote image resource.
A string that represents a properly formatted Uri that describes the location of a local or remote image resource.
A byte array (byte[]) that represents a BitmapImage.

The ImageField’s associated editor is an element of the type ImageEditor. This editor is always read-only and was designed to render images. As such, it can never enter edit mode.

The following table briefly details the configurable aspects and properties of the ImageField that control the way the image is rendered:

Property Name	Property Type	Description
BaseUri	`Uri`	Gets or sets the base Uri to use for locating the image. This value will be used to construct a fully resolved Uri when a cell’s bound data contains a Uri or UriString.
ImageHeight	`double`	Returns or sets the height that the editor should use to render the image. If set to double.NaN (the default value) the image will be rendered using its intrinsic height.
ImageWidth	`double`	Returns or sets the width that the editor should use to render the image. If set to double.NaN (the default value) the image will be rendered using its intrinsic width.
Stretch	`Stretch`	Returns or sets a value that describes how the rendered image should be stretched to fill the destination rectangle.
StretchDirection	`StretchDirection`	Returns or sets a value that indicates how the rendered image is scaled.

Code Example: Using an Image Field

The screenshot below demonstrates how the ImageField would look as a result of the following code example.

The following is the code to implement the ImageField in the XamDataGrid, where "Photo" is a property of one of the types listed above in the underlying data item.

In XAML:

<igDP:ImageField Name="Photo" ImageHeight="100" ImageWidth="100" />

The following topics provide additional information related to this topic.

Topic	Purpose
Define a Field Layout	This topic describes how to define field layouts to specify which fields to display and to set properties related to those fields in the XamDataGrid control.
Generating Fields Manually Versus Automatically	This topic describes the difference between automatic and manual Fields generation in the XamDataGrid control.
Manually Assigning a Field Layout to XamDataGrid	This topic describes how you can create multiple FieldLayouts for the XamDataGrid control.

WPF | Help Topics