自定义 UserControl 与 ListBox 中的嵌套 UserControls答案

【问题标题】：Custom UserControl with nested UserControls in ListBox自定义 UserControl 与 ListBox 中的嵌套 UserControls
【发布时间】：2014-06-20 16:52:19
【问题描述】：

我正在尝试让自定义 UserControl 呈现在 ListBox 中，但没有呈现任何内容。我遇到了this question and solution，它适用于简单的示例，但我的情况有点不同。我有一个用于Person 对象的PersonControl 和一个可以引用两个PersonControl 控件的CoupleControl。

我在CoupleControl 中尝试了一些没有用的方法。我注释掉了其中一种方式：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <Control:PersonControl Grid.Column="0"
                           x:Name="LeftPerson" />
    <Control:PersonControl Grid.Column="1"
                           x:Name="RightPerson" />
    <!-- This is how I'd like to do it in case I create other controls
         I wish to replace the PersonControls (e.g. AnimalControl) -->
    <!--<UserControl Grid.Column="0"
                     x:Name="LeftPerson" />-->
    <!--<UserControl Grid.Column="1"
                     x:Name="RightPerson" />-->
</Grid>

列表框的相关WPF sn-p：

<ListBox Grid.Row="1"
         ItemsSource="{Binding Persons}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Control:CoupleControl />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

在代码隐藏中：

public ObservableCollection<CoupleControl> Persons { get; private set; }

Person joe = new Person("Joe", "Smith", Person.SexType.Male);
Person jane = new Person("Jane", "Smith", Person.SexType.Female);

PersonControl joeControl = new PersonControl();
PersonControl janeControl = new PersonControl();
joeControl.DataContext = joe;
janeControl.DataContext = jane;
CoupleControl coupleControl = new CoupleControl();
coupleControl.LeftPerson.DataContext = joe;
coupleControl.RightPerson.DataContext = jane;
//coupleControl.LeftPerson.Content = joeControl;    // Also doesn't work
//coupleControl.RightPerson.Content = janeControl;  // Also doesn't work

Persons.Add(coupleControl);

谁能帮我让 CoupleControl 在 ListBox 中呈现？

【问题讨论】：

标签： c# wpf user-controls listbox

【解决方案1】：

按照我的口味，您的方法代码量太大了，为什么不在 XAML 中设置 DataContext？

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Control:PersonControl DataContext="{Binding LeftPerson}" />
    <Control:PersonControl DataContext="{Binding RightPerson}" Grid.Column="1" />
</Grid>

或者如果它们不那么复杂，甚至可以完全放弃UserControls？在这种情况下，使用DataTemplates 可以更快更简单。假设我们在 Window 资源中为 Person 和 Couple 定义了模板（Couple 只是一个具有 LeftPerson 和 RightPerson 属性的类）：

<Window.Resources>
    <DataTemplate x:Key="personTemplate" DataType="TestWPF:Person">
            <Border BorderThickness="1" BorderBrush="Green" CornerRadius="5">
                <StackPanel>
                    <TextBlock Text="{Binding FirstName}" />
                    <TextBlock Text="{Binding LastName}" Margin="3,0,0,0" />
                </StackPanel>
            </Border>
        </DataTemplate>

         <DataTemplate x:Key="coupleTemplate" DataType="TestWPF:Couple">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ContentControl Content="{Binding LeftPerson}"
                                ContentTemplate="{StaticResource personTemplate}" />
                <ContentControl Content="{Binding RightPerson}" 
                                ContentTemplate="{StaticResource personTemplate}" Grid.Column="1" />
            </Grid>
        </DataTemplate>
</Window.Resources>

然后你为你的 ListBox 设置ItemTemplate：

<ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{StaticResource coupleTemplate}" />

这样你就可以为你需要的类型制作更多的模板，然后将它们设置在 ListBox 中的一行中。

【讨论】：