Scaling of Images in a GridImageColumn

[Helmut Wahrmann]

Hi,

i am using a SfDatagrid in my View. The columns are bound to an object in m view model.
On startup i am creating te columns based on the type.

I have a "Status" column, which is bound to an Integer. 0 = Status Ok, 1 = Changed, 2 = Error.

Based on the Status a Image should be shown.

I have defined this column as Image column and created a ValueBinding to an IValueConverter. Something like this:

        column = new GridImageColumn();

        Binding binding = new Binding("Status");

        binding.Converter = new SongStatusToImageConverter();

        column.ValueBinding = binding;

        column.VerticalAlignment = VerticalAlignment.Center;

In my SongStatusToImageConverter, i have declared:

public BitmapImage Ok = new BitmapImage(new Uri("pack://application:,,,/MPTagThat;component/Resources/Images/Status_Ok.png"));

and if i have status = 0, i am returning the Bitmapimage for "Ok".

This works fine, but tough the image has a size of 16 x 14, it seems to be scaled up.

Resizing the column, also resizes the image:

But how can i display the image, without any scaling in it's original size?

I'd like to have a solution working in MVVM model, without any code behind, if possible.

thanks,

Helmut

[Helmut Wahrmann]

Nevermind. I have recreated the Icon and used a Size of 18 x 18 and it looks ok now.

 Only thing remaining now, is how to center the image in the column.

thanks,

Helmut

[Susmitha Sundar]

Hi Helmut, 

 

Thank you for your update. 

 

You can achieve your requirement by set the TextAlignment property as centre for GridImageColumn. Please refer the below code, 

C#: 

<syncfusion:SfDataGrid x:Name="sfDataGrid"  

                        RowHeight="50" 

                        ItemsSource="{Binding Path=Orders}" 

                        AutoGenerateColumns="False"> 

     <syncfusion:SfDataGrid.Columns> 

         <syncfusion:GridTextColumn MappingName="OrderID"/> 

         <syncfusion:GridImageColumn MappingName="Clouds" ImageHeight="40" ImageWidth="40" ValueBinding="{Binding Path=Clouds,Converter={StaticResource converter}}" TextAlignment="Center" /> 

         <syncfusion:GridTextColumn MappingName="CustomerID" /> 

         <syncfusion:GridTextColumn MappingName="CustomerName" /> 

         <syncfusion:GridTextColumn MappingName="Country" /> 

         <syncfusion:GridTextColumn MappingName="UnitPrice"/> 

     </syncfusion:SfDataGrid.Columns> 

 </syncfusion:SfDataGrid> 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/151121/ze/SfDataGridImagecolumn-805528757 

 

 

Screenshot: 

 

Please check the sample and let us know if you need further assistance on this. 

 

Regards, 

Susmitha S 

[Helmut Wahrmann]

Thanks, worked perfect.

[Farjana Parveen Ayubb]

Hi Helmut, 

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A