Pourquoi WrapPanel enveloppe-t-il horizontalement TextBlocks mais UserControls verticalement?

Question

Cette enveloppements correctement les TextBlocks horizontalement:

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

Mais ce enveloppements mal mes UserControls verticalement empilés les uns sur les autres (je veux qu'ils soient enveloppés horizontalement comme les TextBlocks ci-dessus):

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

Que dois-je faire dans mon UserControl pour qu'il soit enveloppé horizontalement?

ajouté: même si je change toutes les largeurs et hauteurs du usercontrol Auto, il empile encore verticalement ...:

<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

Dans votre deuxième échantillon, essayez d'utiliser l'WrapPanel dans un ItemsPanelTemplate pour ItemsControl, sinon ItemsControl utilise un StackPanel par défaut et votre WrapPanel ne fait rien car il n'y a rien à emballer.

<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

Cela se produit parce que le ItemsControl, par défaut utilise un StackPanel en orientation verticale pour la mise en page il des objets enfants. Donc, le panneau d'habillage ne fait que mettre en évidence un enfant qui est le ItemsControl. Ce que vous ne voulez pas faire est de définir la propriété ItemsPanel de ItemsControl de façon à utiliser un WrapPanel pour la mise en page. Votre code ressemblerait à ceci:

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