New to Telerik UI for WinUI? Download free 30-day trial

Image Column

The DataGridImageColumn is used to to show images in the column cells.

Example

The following example shows how to generate DataGridImageColumn manually. First we need to create our business object.

Example 1: Create Data model

public class Data 
{ 
    public string Country { get; set; } 
    public BitmapImage Flag { get; set; } 
} 
The next step is to create sample data.

Example 2: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent();  
    this.DataContext = new List<Data>() 
    { 
        new Data { Country = "Argentina", Flag = new BitmapImage(new Uri("ms-appx:///Argentina.png", UriKind.Absolute)) }, 
        new Data { Country = "Brazil", Flag = new BitmapImage(new Uri("ms-appx:///Brazil.png")) }, 
        new Data { Country = "China", Flag = new BitmapImage(new Uri("ms-appx:///China.png")) }, 
    }; 
}    
We have also used the PropertyName property to associate each column with the relevant property from our model.

Example 3: Defining in XAML

<telerikGrid:RadDataGrid AutoGenerateColumns="False" x:Name="grid" ItemsSource="{Binding}" Height="350" Width="400"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridImageColumn PropertyName="Flag" Header="Flag"/> 
        <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 1: Image Column

Image Column

In this article
Not finding the help you need?