How to use image path in UWP DataGrid as an image source in GridImageColumn?
XAML
<syncfusion:SfDataGrid AutoGenerateColumns="False" ItemsSource="{Binding OrderInfoCollection}" ColumnSizer="Auto"> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID"/> <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/> <syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Name of Customer"/> <syncfusion:GridTextColumn MappingName="ShipCountry" HeaderText="Ship Country"/> <syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/> <syncfusion:GridImageColumn MappingName="ImageLink" ImageHeight="50" ImageWidth="50" ValueBinding="{Binding Path=ImageLink, Converter={StaticResource stringToImageConverter}}" /> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid>
SfDataGrid bounded to collection of OrderInfo and OrderInfo class have a property ImageLink that contains the image names on the Project.
Following is the converter that converts image name (placed in the Project) into BitMapImage.
C#
class StringToImageConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (value != null) { string imagename = value as string; return new BitmapImage(new Uri(string.Format(@"..\..\Image\{0}", imagename), UriKind.Relative)); } return null; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }
In WinRT and UWP you can give file path directly in StringToImageConveter. Convert method code example for WinRT and UWP platform is as follows.
public object Convert(object value, Type targetType, object parameter, string language) { if (value != null) { string imagename = value as string; returnnewUri(string.Format(@"..\..\Image\{0}" , imagename), UriKind.Relative)); } return null; } |
The following is the screenshot for image column that loads images in GridImage Column.
Sample Links:
I hope you enjoyed learning about how to use image path as an image source in GridImageColumn.
You
can refer to our UWP DataGrid feature tour page
to know about its other groundbreaking feature
representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our UWP DataGrid example to
understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!