Hi guys,
I am trying to display an image in a cell (UnboundField) of a XamDataGrid based on a value of another cell.
With a DataGrid I got it working like this:
<DataGrid Name="dataGrid" ItemsSource="{Binding}" > <DataGrid.Columns> <DataGridTemplateColumn Header="Text" Width="SizeToCells" IsReadOnly="True"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding Path=id, Converter={StaticResource IdToImageConverter}, ConverterParameter='png'}" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns></DataGrid>
Could anyone help me with that in a XamDatagrid? This is my code which is not working, I guess the problem is the wrong RelativeSource in the ControlTemplate:
<UserControl.Resources> <local:IdToImageConverter x:Key="IdToImageConverter" /> <Style x:Key="IconCellStyle" TargetType="{x:Type igDP:CellValuePresenter}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}"> <Grid> <Image Source="{Binding Path=id, Converter={StaticResource IdToImageConverter}, ConverterParameter=png, RelativeSource={RelativeSource AncestorType={x:Type igDP:XamDataGrid}}}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style></UserControl.Resources><igDP:XamDataGrid Name="xamDataGrid" DataSource="{Binding}" > <igDP:XamDataGrid.FieldLayouts> <igDP:FieldLayout> <igDP:FieldLayout.Fields> <igDP:UnboundField Label="Text"> <igDP:UnboundField.Settings> <igDP:FieldSettings CellValuePresenterStyle="{StaticResource IconCellStyle}" /> </igDP:UnboundField.Settings> </igDP:UnboundField> </igDP:FieldLayout.Fields> </igDP:FieldLayout> </igDP:XamDataGrid.FieldLayouts></igDP:XamDataGrid>
Thanks a lot and kindregards!
Hi Gawain,
You don't actually need a RelativeSource binding there. The datacontext of a CellValuePresenter is a DataRecord. Inside DataRecord there is a property called DataItem which represents your underyling row object. All you need is a binding to DataItem.id.
Thanks, this is perfectly workig. Two more question:
Regards!
Please see the following forum thread for filters with images. http://ko.infragistics.com/community/forums/t/40977.aspx
For loading PDFs as images into the XamDataGrid, as long as you already have the images you can display them in the XamDataGrid as you would any other image. Converting PDF to an image though, is another matter. Currently Infragistics doesn't have the ability to take a PDF and generate images from it. There are a number of free options available though. Please see the following for one such option: http://stackoverflow.com/questions/22505502/convert-pdf-to-jpg-images-library-c-sharp-without-using-ghostscript
Hi again,
thanks for your help. Unfortunately the sample "filters with images" is not working with the 2013.2 version. FilterDropDownItem has no member "Image" anymore. Any recommendations? Another thing is that the sample shows to add every filter item manually, is there a way to have that done more "automatically" by the component?
Regarding the PDFs, I am not sure how to get that working, because I do not know how to load a PDF into a ImageSource which I do in my Converter:
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){ ImageSource result = null; try { var parameters = parameter.ToString().Split('#'); if (parameters[1] != "pdf") { var path = Properties.Settings.Default.ImagePathBase + parameters[0] + value + "." + parameters[1]; if (File.Exists(path)) { var uri = new Uri(path); result = new BitmapImage(uri); } } else { // TODO Load PDFs } } catch (Exception ex) { } return result;}
Thanks and regards!
Hello Gawain,
Are you missing an assembly reference to InfragisticsWPF4.Editors.v13.2? If you don't have this assembly referenced in your project, you won't see the Image property. http://help.infragistics.com/doc/WPF/2013.2/CLR4.0/?page=InfragisticsWPF4.DataPresenter.v13.2~Infragistics.Windows.DataPresenter.FilterDropDownItem_members.html
Unfortunately the component won't add the image for you based on the way you are using UnboundField. The reason being, your UnboundField is not bound to anything, therefore the filter has no idea where to get the filter items from. Since it doesn't know where to get the filter values from, you'll have to provide them manually. You might be able to do something more automatic if you bound the field to some property in your underlying data, and then used a style to retemplate the filter dropdown items to show an Image based on the filter value.
What PDF image are you trying to get exactly? An image of the pages? There can be a number of pages in a single PDF so which page do you want? Rather than loading a PDF to generate an image from the pages, couldn't you just display a generic PDF icon so users can see that it represents a PDF?
Let me know if you have any further questions on this matter.
This comes back to the issue where the UnboundField has no idea what values to associate with the filter. Right now, the UnboundField is not bound to any specific data so when the grid applies a filter to the UnboundField column, nothing matches. You have to associate the UnboundField with some kind of value and your filter dropdown needs to contain those values. I would take your UnboundField and bind it like this:
<igDP:UnboundField Label="Text" Binding="{Binding id}">
This will associate the UnboundField with the id property in the underlying data. Then create a FilterDropDownItem for each of your id values, setting the ComparisonCondition value to the id value. When a filter is selected, it will compare the value of the ComparisonCondition to the value in the cell. If they match, that record will be selected for the filter. I have attached a sample that demonstrates this.
My sample also demonstrates the usage of the GhostScript.NET library to load a PDF file and turn the first page into an image. It then displays the image within the grid.
Hello Rob,
thanks for your help. You were right, I missed that assembly. After adding it to my project I was able to add the images to the filter. unfortunately the filter is not working: It always shows no item in my grid after selecting a filter value. Here is what I do:
e.DropDownItems.Clear();e.IncludeUniqueValues = false; foreach (var value in list){ var imageSource = OrgaNrToImageConverter.GetImage(value, parameter); FilterDropDownItem dropdownItem = new FilterDropDownItem(new ComparisonCondition(ComparisonOperator.Equals, imageSource), " " + value.ToString()); dropdownItem.Image = imageSource; e.DropDownItems.Add(dropdownItem);}
Any ideas what I do wrong?
About the PDF: all my PDFs only contain one page with one image. I would like to show some kind of thumbnail of it in the cell.
Kind regards!