How To Load Images In A Cell In Winui Treegrid?

Sample date Updated on Jan 16, 2026
adding image templatecolumn treegrid winui winui-controls winui-treegrid

This example describes how to load images in a cell in WinUI TreeGrid (SfTreeGrid).

You can add the image to TreeGrid cell by using TreeGridTemplateColumn.

XAML

<treeGrid:SfTreeGrid Name="treeGrid"                 
                    AutoGenerateColumns="False"
                    AutoExpandMode="RootNodesExpanded"
                    ChildPropertyName="ReportsTo"
                    AllowResizingColumns="True"
                    NavigationMode="Cell" 
                    AllowEditing="True"
                    SelfRelationRootValue="-1"
                    SelectionMode="Single" 
                    ItemsSource="{Binding EmployeeDetails}" >
    <treeGrid:SfTreeGrid.Columns>
        <treeGrid:TreeGridTextColumn MappingName="FirstName"/>
        <treeGrid:TreeGridTextColumn MappingName="LastName"/>
        <treeGrid:TreeGridNumericColumn HeaderText="Employee ID" MappingName="ID" />
        <treeGrid:TreeGridTextColumn MappingName="Title"/>
        <treeGrid:TreeGridTemplateColumn HeaderText="Country" MappingName="ImageLink">
            <treeGrid:TreeGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="30"
                               Height="20"
                               Source="{Binding ImageLink,
                                                Converter={StaticResource converter}}" />
                    </Grid>
                </DataTemplate>
            </treeGrid:TreeGridTemplateColumn.CellTemplate>
        </treeGrid:TreeGridTemplateColumn>
    </treeGrid:SfTreeGrid.Columns>
</treeGrid:SfTreeGrid>

C

class StringToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        string imageName = value.ToString();
        if (imageName == "US.jpg")
        {
            Uri uri = new Uri("ms-appx:///Images/US.jpg");
            BitmapImage image = new BitmapImage(uri);
            return image;
        }

        else if (imageName == "UK.jpg")
        {
            Uri uri1 = new Uri("ms-appx:///Images/UK.jpg");
            BitmapImage image = new BitmapImage(uri1);
            return image;
        }

        else
        {
            Uri uri1 = new Uri("ms-appx:///Images/Japan.jpg");
            BitmapImage image = new BitmapImage(uri1);
            return image;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Load images in a cell in TreeGrid

Up arrow