C＃WPF：将UserControl放在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>

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

Answer 2

You could use a TemplateColum. For that column type you could define the content in XAML. Therefore you could place your control inside the column template:

<DataGrid.Columns>
   <DataGridTemplateColumn Header="TemplateColumn">
       <DataGridTemplateColumn.CellTemplate>
           <DataTemplate>
               <YourControl></YourControl>
            </DataTemplate>
       </DataGridTemplateColumn.CellTemplate>
   </DataGridTemplateColumn>
</DataGrid.Columns>

Answer 3

Based on my knowledge there are two way to do it.

1. Solution from this question

   Add a reference to your xaml. If xaml cannot find your control its normally because you forget to add assembly. Assembly is very important if you are refering a control from other project.

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

   Then you can use the control like

    <controls:ControlClass....> 

   Sometimes, you need to rebuilt the solution to make the intellisense work (btw intellisense is stupid so don't expect too much from intellisense /_/)

2. Using Content Control to add user control. This solution is normally used if you want to add the user control dynamically in code behind.

   First you add this line in .xaml

    <DataTemplate> <ContentControl x:Name="ContentControl1"></ContentControl> </DataTemplate> 

   Then in code behind, add

     ContentControl1.Content = new YourControlHere();