Warum umschließt WrapPanel TextBlocks horizontal, aber UserControls vertikal?

Question

Diese hüllt korrekt Textblocks horizontal:

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

Aber diese falsch wickelt meine Benutzersteuerelemente vertikal übereinander gestapelt (Ich möchte, dass sie horizontal wie die Textblocks oben gewickelt werden):

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

Was muss ich in meinem UserControl tun, damit sie horizontal umbrechen?

hinzugefügt: selbst wenn ich alle Breiten und Höhen in der Usercontrol auf Auto zu ändern, es stapelt noch vertikal ...:

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

Answer 1

In Ihrer zweiten Probe, versuchen Sie die WrapPanel innerhalb eines zu verwenden, ItemsPanelTemplate für das ItemsControl, andernfalls verwendet das ItemsControl standardmäßig ein StackPanel und Ihr WrapPanel tut nichts, da nichts zu umbrechen ist.

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

Answer 2

Dies passiert, weil das ItemsControl standardmäßig ein StackPanel in vertikaler Ausrichtung verwendet, um untergeordnete Objekte zu erstellen. Das Wrap-Panel legt also nur ein Kind an, das ItemsControl. Was Sie tun möchten, ist die ItemsPanel -Eigenschaft von ItemsControl, die ein WrapPanel für das Layout verwendet. Ihr Code würde so aussehen:

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