WPF DataGrid & # 8594; Icon shown for CellEditingTemplate

Question

When using a combo box in the CellEditingTemplate, a down arrow is displayed on the right side of the cell. When you use the date picker, a small calendar is displayed on the right side of the cell.

When creating a CellEditingTemplate, how do you control what is shown in this area? If you use a user control and want to show an icon in this area, how to do it?

Answer 1

You must add this icon to your user control.

Example:

Say we have a simple Person class:

class Person { public int ID { get; set; } public string Name { get; set; } } 

and we want to create a user control to edit the username.

1) We must add an icon to our application as a resource ( Build Action = Resource ).

In my example, I created the Images folder and placed the "user.png" icon there.

2) In the next step, we create a custom control "NameUserControl":

 <UserControl x:Class="WpfApplicationDataGrid.NameUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="30" /> </Grid.ColumnDefinitions> <TextBox Text="{Binding Path=Name}" /> <Image Source="/Images/user.png" Grid.Column="1" /> </Grid> </UserControl> 

3) Now we can use the new user control in CellEditingTemplate :

 <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding ID}" /> <DataGridTemplateColumn Header="Name"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Name}" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <local:NameUserControl /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> 

Result: