Hi all,I would like a XamDataGrid's column to display images instead of values.
To obtain this result, I customized FieldSettings for that particular field, in this way:
<Style x:Key="masterTypeEditorStyle" TargetType="{x:Type igEditors:XamComboEditor}"> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="DropDownButtonDisplayMode" Value="OnlyInEditMode" /> <Setter Property="ToolTip" Value="{Binding Path=DataItem.masterType}" /> <Setter Property="ItemsProvider"> <Setter.Value> <igEditors:ComboBoxItemsProvider> <igEditors:ComboBoxItemsProvider.Items> <igEditors:ComboBoxDataItem DisplayText="" Value="Master" Image="/assembly;component/path.to/master.png" /> <igEditors:ComboBoxDataItem DisplayText="" Value="Structure" Image="/assembly;component/path.to/structure.ico" /> <igEditors:ComboBoxDataItem DisplayText="" Value="Elementary" Image="/assembly;component/path.to/elementary.png" /> </igEditors:ComboBoxItemsProvider.Items> </igEditors:ComboBoxItemsProvider> </Setter.Value> </Setter> </Style>
<igDP:Field Name="masterType" Label="Type"> <igDP:Field.Settings> <igDP:FieldSettings AllowEdit="False" EditorType="{x:Type igEditors:XamComboEditor}" EditorStyle="{StaticResource masterTypeEditorStyle}" /> </igDP:Field.Settings></igDP:Field>
Images are correctly displayed, depending on the current value of View Model's "masterType" property. But they are smaller than their original size (16x16) and they look a little bit blurry.
Is there any way to control image size and rendering options on combo editor?
Thank you, bye. Maria
Hi Maria,
I'm putting together a sample using the code you provided and will get back to you with a response tomorrow.
Hi Rob, thanks so much.I'll wait your reply.
Sorry for the delay. I don't think XamComboEditor is the best control for the job here. The combo editor has strict control over the Image displayed which makes it very difficult to change any settings on it. Also your styles and field settings seem to suggest you don't plan on letting the user edit the data in that column. If this is the case it would be much better to just provide a new CellValuePresenter style with an Image bound to masterType and use a converter to return the proper path to the image. I've attached a sample of what I mean.
Take a look at the sample and let me know if you have any questions on it.
After further investigation it is possible to do what you're looking for while keeping the XamComboEditor. You can provide a modified version of the default template for ComboBoxDataItem where you can specify settings for the Image.
<!-- Modified DataTemplate for ComboBoxDataItem--> <DataTemplate DataType="{x:Type igEditors:ComboBoxDataItem}" > <Grid> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock x:Name="TextBlock" Text="{Binding Path=DisplayText}" Grid.Column="1" Grid.Row="0" /> <Image Stretch="None" Source="{Binding Path=Image}" Grid.Column="0" Grid.Row="0" /> </Grid> </DataTemplate>
You then need to set the Field.AllowCellVirtualization property to false so the row height properly adjusts based on the image size in the XamComboEditor. I've attached a modified sample demonstrating this.
Let me know if you have any questions on this.
Hi Rob,thanks a lot for your help.
I have been busy, trying to follow your suggestions. Finally, I discovered that the standard behavior of XamDataGrid is the one that best suits our needs, even though the image size is reduced. In fact, we're using a row height of 21 and, with the outer margin taken by XamComboEditor, the image in its actual size (16x16) would be truncated. I think that the editor's margin (2 top, 2 bottom ?) cannot be reduced...
So, many thanks for your suggestions :)Have a nice day. Maria
Ok, I got it: it's Theme tag. If I set Office2010Blue theme on XamDataGrid, the custom template isn't applied.DataTemplate must be specified as an inline resource of the grid.
I'm attaching the fixed solution.Bye, Maria
Hi Rob,I'm reviewing your answer to my question, since I would like to modify the template to add an extra space between the image and the text.
I'm probably missing the basics about this topic: how is the template for dataItems linked to the combo? Since whenever I change someting on the template nothing happens, I suspect that the default template is being applied, instead of the customized one.
I'm sending you a revised version of the solution you attached some time ago.Thank you, best regards. Maria
You're very welcome. Just let me know if you have any further questions on this topic.