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,
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.
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.
Hi Rob, thanks so much.I'll wait your reply.
I'm putting together a sample using the code you provided and will get back to you with a response tomorrow.