How to display an image in UWP data grid column

Question

I am working with a Universal Windows application and using datagrid which i found here Mytoolkit Datgrid But I have to put an static image in a column and on that image click i have to perform an action. How can I do this?

Answer 1

I have to put an static image in a column and on that image click i have to perform an action.

First, to put a image in a column, you can for example do it like this:

<controls:DataGrid ItemsSource="{x:Bind People}" x:Name="DataGrid" SelectionChanged="OnSelectedItemsChanged">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Width="200" Header="Firstname"
          Binding="{Binding Firstname}"
          d:DataContext="{d:DesignInstance Type=Person}" />
        <controls:DataGridTextColumn Width="200" Binding="{Binding Lastname}"
          IsAscendingDefault="False"
          d:DataContext="{d:DesignInstance Type=Person}">
            <controls:DataGridTextColumn.Header>
                <TextBlock Text="Lastname" Foreground="Green" />
            </controls:DataGridTextColumn.Header>
        </controls:DataGridTextColumn>
        <controls:DataGridTextColumn Width="200" Header="Category"
          Binding="{Binding Category}"
          d:DataContext="{d:DesignInstance Type=Person}" />
        <controls:DataGridTemplatedColumn Width="200" Order="{Binding ImageUri}" d:DataContext="{d:DesignInstance Type=Person}">
            <controls:DataGridTemplatedColumn.Header>
                <Image Source="Assets/star.jpg" />
            </controls:DataGridTemplatedColumn.Header>
            <controls:DataGridTemplatedColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="Assets/star.jpg" />
                </DataTemplate>
            </controls:DataGridTemplatedColumn.CellTemplate>
        </controls:DataGridTemplatedColumn>
    </controls:DataGrid.Columns>
    <controls:DataGrid.ItemDetailsTemplate>
        <DataTemplate>
            <StackPanel Margin="10,10,10,5"
                d:DataContext="{d:DesignInstance Type=Person}">
                <TextBlock Text="Details: " FontWeight="Bold" />
                <TextBlock Text="{Binding Firstname}" />
                <TextBlock Text="{Binding Lastname}" />
                <Image Source="Assets/star.jpg" />
            </StackPanel>
        </DataTemplate>
    </controls:DataGrid.ItemDetailsTemplate>
</controls:DataGrid>

As you can see that I used DataGridTemplatedColumn to show the Image column in the header and each item.

And by "click to perform an action" you mean the sort action which is built in this control? If yes, you can refer to the source code of DataGridTemplatedColumn.cs, the Order property is just like the Binding in the DataGridTextColumn, here in my sample, I used a fake string type property named "ImageUri" in the data model Person.

If no, you want to perform a click event by yourself on the Image, you can just add a Tapped event to the Image control and handle it in the code behind for example:

<controls:DataGridTemplatedColumn.Header>
    <Image Source="Assets/star.jpg" Tapped="Image_Tapped" />
</controls:DataGridTemplatedColumn.Header>

Answer 2

Just edit data template and insert image inside where you want to see it:

<DataTemplate>
        <StackPanel Margin="10,10,10,5" 
                    d:DataContext="{d:DesignInstance Type=models:Person}">
            <Image Source="lalala.jpg" Click="Image_Clicked" />
            <TextBlock Text="{Binding Firstname}" />
            <TextBlock Text="{Binding Lastname}" />
        </StackPanel>
    </DataTemplate>

Answer 3

Add this code in Page Resources.

<DataTemplate x:Key="ImageTemplate">
            <StackPanel Width="20" Height="30" Tapped="StackPanel_Tapped" >
                <Image Name="VoidImage" Source="/Images/delete.png"></Image>
            </StackPanel>
        </DataTemplate>

and grid column like this..

<controls:DataGridTemplatedColumn  CellTemplate="{StaticResource ImageTemplate}">
                                    <controls:DataGridTemplatedColumn.Header>
                                        <TextBlock Text="Cart Total" Foreground="Green" />
                                    </controls:DataGridTemplatedColumn.Header>
                                </controls:DataGridTemplatedColumn>

In StackPanel_Tapped event we can perform the required action