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.
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
You're very welcome. Just let me know if you have any further questions on this topic.
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
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