Не могу увидеть мой пользовательский UserControl в моем StackPanel

Question

У меня возникла проблема с тем, что пользовательский UserControl, встроенный в мой MainWindow, столкнулся с проблемой.

CustomControl.xaml

<UserControl x:Class="LearnWPF.CustomControl" 
     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="262" Width="168"> 
<Grid Margin="0,0,0,0" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}"> 
    <TextBox Name="txt_TextBox1" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="148"/> 
    <TextBox Name="txt_TextBox2" HorizontalAlignment="Left" Height="23" Margin="10,48,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="148"/> 
    <ComboBox Name="lst_Dropdown" ItemsSource="{Binding Path=listContents}" HorizontalAlignment="Left" Margin="10,87,0,0" VerticalAlignment="Top" Width="135"/> 
    <RadioButton Name="rad_RadioBtn1" Content="{Binding rad_RadBtn1}" HorizontalAlignment="Left" Margin="10,133,0,0" VerticalAlignment="Top" Width="96"/> 
    <RadioButton Name="rad_RadioBtn2" Content="{Binding rad_RadBtn2}" HorizontalAlignment="Left" Margin="10,154,0,0" VerticalAlignment="Top" Width="96"/> 
    <RadioButton Name="rad_RadioBtn3" Content="{Binding rad_RadBtn3}" HorizontalAlignment="Left" Margin="10,175,0,0" VerticalAlignment="Top" Width="96"/> 
    <RadioButton Name="rad_RadioBtn4" Content="{Binding rad_RadBtn4}" HorizontalAlignment="Left" Margin="10,196,0,0" VerticalAlignment="Top" Width="96"/> 
</Grid> 

CustomControl.xaml.cs

public partial class CustomControl : UserControl 
{ 
    public string txt_Field1 { get; set; } 
    public string txt_Field2 { get; set; } 
    public string rad_RadBtn1 { get; set; } 
    public string rad_RadBtn2 { get; set; } 
    public string rad_RadBtn3 { get; set; } 
    public string rad_RadBtn4 { get; set; } 
    public string[] listContents { get; set; } 

    public CustomControl() 
    { 
     listContents = new string[5] { "Slot 1", "Slot 2", "Slot 3", "Slot 4", "Slot 5" }; 
    } 
} 

MainWindow.xaml

<Window x:Name="CFG_MainWindow" x:Class="LearnWPF.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Test Best Data - Custom File Generator" Height="464.5" Width="950"> 
<Grid> 
    <Button Content="Load Template" HorizontalAlignment="Left" Margin="35,36,0,0" VerticalAlignment="Top" Width="98"/> 
    <Button Content="Add Col" HorizontalAlignment="Right" Margin="0,36,35,0" VerticalAlignment="Top" Width="75"/> 
    <Button x:Name="Generate_Data" Content="Generate Data Window" Height="22" Margin="0,36,0,0" VerticalAlignment="Top" Width="160" Click="Generate_Data_Click" HorizontalAlignment="Center"/> 
    <ScrollViewer HorizontalScrollBarVisibility="Visible"> 
     <ItemsControl Name="userControlContainer" Margin="10,150,10,10" ItemsSource="{Binding MyCollection}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal"/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <UserControl DataContext="{Binding}" /> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 

MainWindow.xaml.cs

public partial class MainWindow : Window 
{ 
    public ObservableCollection<CustomControl> MyCollection { get; set; } 

    public MainWindow() 
    { 
     MyCollection = new ObservableCollection<CustomControl>(); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 1", txt_Field2 = "Test 2", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 3", txt_Field2 = "Test 4", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 5", txt_Field2 = "Test 6", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     InitializeComponent(); 
    } 

Answer 1

Для связывания DataContext необходимо установить какой-то объект, как это нуль по умолчанию. В противном случае привязка, которую вы пытаетесь настроить в XAML, в основном представляет собой только строку, в которой нет контекста о том, как найти свойство.

Ваш CustomControl должен вызвать InitializeComponent(), чтобы настроить XAML.

Вы можете использовать <ContentControl Content="{Binding}"/>, чтобы привязка обеспечивала отображение типа управления. По мере того, как вы получаете больше в MVVM, вы также можете использовать IValueConverter со связыванием, чтобы получить больше разделения от кода пользовательского интерфейса.

CustomControl.xaml.cs

public partial class CustomControl : UserControl 
{ 
    public string txt_Field1 { get; set; } 
    public string txt_Field2 { get; set; } 
    public string rad_RadBtn1 { get; set; } 
    public string rad_RadBtn2 { get; set; } 
    public string rad_RadBtn3 { get; set; } 
    public string rad_RadBtn4 { get; set; } 
    public string[] listContents { get; set; } 

    public CustomControl() 
    { 
     InitializeComponent(); 
     listContents = new string[5] { "Slot 1", "Slot 2", "Slot 3", "Slot 4", "Slot 5" }; 
     DataContext = this; 
    } 
} 

MainWindow.xaml

<Window x:Name="CFG_MainWindow" x:Class="LearnWPF.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Test Best Data - Custom File Generator" Height="464.5" Width="950"> 
<Grid> 
    <Button Content="Load Template" HorizontalAlignment="Left" Margin="35,36,0,0" VerticalAlignment="Top" Width="98"/> 
    <Button Content="Add Col" HorizontalAlignment="Right" Margin="0,36,35,0" VerticalAlignment="Top" Width="75"/> 
    <Button x:Name="Generate_Data" Content="Generate Data Window" Height="22" Margin="0,36,0,0" VerticalAlignment="Top" Width="160" Click="Generate_Data_Click" HorizontalAlignment="Center"/> 
    <ScrollViewer HorizontalScrollBarVisibility="Visible"> 
     <ItemsControl Name="userControlContainer" Margin="10,150,10,10" ItemsSource="{Binding MyCollection}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal"/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <ContentControl Content="{Binding}" /> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 

MainWindow.xaml.cs

public partial class MainWindow : Window 
{ 
    public ObservableCollection<CustomControl> MyCollection { get; set; } 

    public MainWindow() 
    { 
     InitializeComponent(); 
     MyCollection = new ObservableCollection<CustomControl>(); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 1", txt_Field2 = "Test 2", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 3", txt_Field2 = "Test 4", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     MyCollection.Add(new CustomControl { txt_Field1 = "Test 5", txt_Field2 = "Test 6", rad_RadBtn1 = "Rad1", rad_RadBtn2 = "Rad2", rad_RadBtn3 = "Rad3", rad_RadBtn4 = "Rad4" }); 
     DataContext = this; 
    } 
}