C# WPF: Place UserControl in DataGridRow

Question

I'm creating a WPF Application in C#. In my window there is a DataGrid. In the Grid are 2 columns. The first Column contains only strings. In the second column I want to display a usercontrol I created.

The UserControl (called: ProductControl) consists of 3 buttons and 3 textboxes.

This is the XAML code for the control:

<UserControl x:Class="CARDS.ProductControl"
         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" Height="95" Width="273">
  <Grid Margin="-23,0,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="24*"/>
        <RowDefinition Height="29*"/>
        <RowDefinition Height="32*"/>
    </Grid.RowDefinitions>
    <Button x:Name="btnSP_P" Content="SP/P" HorizontalAlignment="Left" Margin="215,3,0,0" VerticalAlignment="Top" Width="75" Grid.Row="2"/>
    <Button x:Name="btnNM_M" Content="NM/M" HorizontalAlignment="Left" Margin="215,0,0,0" VerticalAlignment="Top" Width="75" Grid.Row="1"/>
    <Button x:Name="btnHP" Content="HP" HorizontalAlignment="Left" Margin="215,4,0,0" VerticalAlignment="Top" Width="75" Grid.Row="3"/>
    <TextBox x:Name="txtNM_M" HorizontalAlignment="Left" Height="23" Margin="27,0,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="183" Grid.Row="1"/>
    <TextBox x:Name="txtSP_P" HorizontalAlignment="Left" Height="23" Margin="27,4,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="183" Grid.Row="2"/>
    <TextBox x:Name="txtHP" HorizontalAlignment="Left" Height="23" Margin="27,3,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="183" Grid.Row="3"/>
  </Grid>
</UserControl>

This is the C# code for the control:

public partial class ProductControl : UserControl
    {
        public String NM_M { get; protected set; }
        public String SP_P { get; protected set; }
        public String HP { get; protected set; }

        public ProductControl()
        {
            InitializeComponent();
        }

        public void Set(String nm_m, String sp_p, String hp)
        {
            this.NM_M = nm_m;
            this.SP_P = sp_p;
            this.HP = hp;

            txtHP.Text = hp;
            txtNM_M.Text = nm_m;
            txtSP_P.Text = sp_p;
        }
    }

I have 2 classes that contains the data that need to be displayed in the datagrid:

class DataItems {
    public List<DataItemCard> items = new List<DataItemCard>();
}
class DataItemCard {
    public String Reference { get; set; }
    public ProductControl Products { get; set; }
}

The instance of DataItems is used as the ItemsSource for the DataGrid. The String is displayed correctly, but in the second column just stands the type: 'CARDS.ProductControl'.

The DataGrid is declared in the XAML file as:

<DataGrid x:Name="gridDisplayCards" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top" RenderTransformOrigin="3.046,4.843" Height="273" Width="284">

My question: How can I display my control in the cell?

Thank you all for the help and external links. It works now, the problem was actually the assembly. I used:

xmlns:controls="clr-namespace:OUTPOST_BUY_IN_SINGLE_CARDS;assembly=OUTPOST_BUY_IN_SINGLE_CARDS"

But it just needed to be:

xmlns:controls="clr-namespace:OUTPOST_BUY_IN_SINGLE_CARDS"

Answer 1

You need to use a DataGridTemplateColumn when you want to display a custom control within a DataGrid ...

https://msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn%28v=vs.110%29.aspx

You will need to add an xmlns directive like xmlns:controls="clr-namespace:MyControls;assembly=MyControls" to your Window, and then reference the control like this:

       <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <MyControls:ProductControl /><!--You will need to add your binding expressions to the ProductControl element-->
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

This existing question should help you iron out any binding problems you have ...

How to bind a user control using as a DataGridTemplateColumn failed in WPF