Question

我在看到我在MainWindow中构建的自定义UserControl时遇到了一些问题。

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设置为某个对象，因为默认情况下它为null。否则，您尝试在XAML中设置的绑定基本上只是一个字符串，没有关于如何查找属性的上下文。

您的CustomControl需要调用InitializeComponent（）才能设置XAML。

您可以使用<ContentControl Content="{Binding}"/>，以使绑定提供要显示的控件类型。随着您对MVVM的更多了解，您还可以使用带有绑定的IValueConverter来获得与UI代码的更多分离。

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;
    }
}

在我的StackPanel中看不到我的自定义UserControl

1 个答案: