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 Creating xamDataPresenter in XAML.

To display an image in a field:

1. This topic actually uses the Products.xml file, which has a attribute pointing to the images that we want to load.  The images referenced by this file are available here.
   Note: To reflect where the images are located on your machine, you must modify the Products.xml file to change the path for Logo.
2. 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>
   

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

   In XAML:

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

   
   
4. 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: 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>
   

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