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

Image Column

The DataGridImageColumn shows images in the column cells.

The following example shows how to generate the DataGridImageColumn manually.

  1. First, create the business object.

    Create the Data Model

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

    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")) }, 
            }; 
        } 
    
  3. To associate each column with the relevant property from the model, the example also uses the PropertyName property.

    Define PropertyName 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> 
    
    Image Column

Image Column

In this article
Not finding the help you need?