We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Scaling of Images in a GridImageColumn


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.



4 Replies

HW Helmut Wahrmann January 31, 2020 10:55 AM UTC

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.



SS Susmitha Sundar Syncfusion Team February 3, 2020 02:04 PM UTC

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, 
<syncfusion:SfDataGrid x:Name="sfDataGrid"  
                        ItemsSource="{Binding Path=Orders}" 
         <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"/> 
Please check the sample and let us know if you need further assistance on this. 
Susmitha S 

HW Helmut Wahrmann February 3, 2020 02:49 PM UTC

Thanks, worked perfect.

FP Farjana Parveen Ayubb Syncfusion Team February 4, 2020 05:48 AM UTC

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. 
Farjana Parveen A 

Live Chat Icon For mobile
Up arrow icon