<XmlDataProvider x:Key="ProductsData" Source="/WpfApplication1;component/Data/Products.xml" XPath="/Products" />
In your xamDataGrid™, 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 the basic knowledge on how to add a xamDataGrid to a page. For more information, see the Adding xamDataGrid to Your Page topic.
To display an image in a field:
Create a file in your application named Products.xml with the following content, which has a "Logo" attribute pointing to the images that we want to load.
Create an XmlDataProvider in your page’s resources section which will be used as a data source.
In XAML:
<XmlDataProvider x:Key="ProductsData" Source="/WpfApplication1;component/Data/Products.xml" XPath="/Products" />
Create a Style that targets the CellValuePresenter
class in your page’s resources 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 XamDataGrid and set its data source.
In XAML:
<igDP:XamDataGrid DataSource="{Binding Source={StaticResource ProductsData}, XPath=Product}">
...
</igDP:XamDataGrid>
Inside the XamDataGrid 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.
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 and you should see something similar to the following image.