为什么WrapPanel水平换行TextBlock，但垂直换行UserControl？

Question

这样可以正确地水平包裹文本块：

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <TextBlock Text="one"/>
        <TextBlock Text="two"/>
        <TextBlock Text="thee"/>
        <TextBlock Text="four"/>
    </WrapPanel>
</StackPanel>

但这会导致我的用户控件垂直堆叠在一起（我希望它们像上面的文本块一样水平排列）：

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:CustomerSimpleItemView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </WrapPanel>
</StackPanel>

CustomerSimpleItemView:

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>

我在UserControl中需要做什么才能使它们水平包裹？

补充：即使我将UserControl中所有的宽度和高度都更改为自动，它仍然会垂直堆叠...

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>

- Edward Tanguay

Answer 1

在你的第二个示例中，尝试在ItemsControl的ItemsPanelTemplate中使用WrapPanel，否则ItemsControl默认使用StackPanel，你的WrapPanel不会发挥作用，因为没有什么可包装的内容。

   <StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
        <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
            <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:CustomerSimpleItemView />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
    </StackPanel>

- Martin Moser

---

这正是我正在寻找的，不知道该搜索什么，谢谢！ - Edward Tanguay

Answer 2

这是因为ItemsControl默认使用垂直方向的StackPanel来布局其子对象。因此，WrapPanel实际上只对一个子对象进行布局，即ItemsControl。您需要设置ItemsControl的ItemsPanel属性，以便使用WrapPanel进行布局。您的代码应该如下所示：

<StackPanel DockPanel.Dock="Top"
            Margin="10"
            HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:"
               Margin="0 0 0 5" />          
    <!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
    <ItemsControl ItemsSource="{Binding CustomerViewModels}"
                  Width="Auto"
                  BorderThickness="0">
        <!-- This is the important part.  Here we set the ItemsPanel template -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <views:CustomerSimpleItemView />
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>            
</StackPanel>

- Caleb Vear

---

当我打这个的时候，之前的答案还没有被添加。哦，好吧。 - Caleb Vear