WPF - Die Tasten nebeneinander

Question

Ich habe Knopf und unter ihm ist Text und diese Tasten sind nebeneinander, aber sind unter ihm serviert. Dies ist mein Code: UserView.xaml:

<WrapPanel Orientation="Horizontal" HorizontalAlignment = "Left"> 
     <ItemsControl ItemsSource = "{Binding Path = Users}"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Orientation = "Vertical"> 
         <Button Style="{StaticResource UserButton}" Content="{Binding Name}"></Button> 
         <Rectangle Style="{StaticResource UserButtonStatus}" 
             Fill="{Binding Color}" ToolTip="{Binding Tooltip}"/> 
        </StackPanel> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </WrapPanel> 

MainWindow.xaml:

<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical"> 
      <TextBlock Style="{StaticResource Title}">Users</TextBlock> 
      <view:UserView x:Name="UserView"> 
       <view:UserView.DataContext> 
        <Binding Path="UserViewModel" Source="{StaticResource ServiceLocator}"/> 
       </view:UserView.DataContext> 
      </view:UserView> 
     </StackPanel> 

erforderlich:

Actual (falsch):

Answer 1

Sie müssen das Bedienfeld für die Elemente überschreiben

Die Elementsteuerung zeigt standardmäßig alle Elemente untereinander an.

hier ist der Code hinzuzufügen, dessen vergewissern Sie sich in Ihrem Artikel Registerkarte steuern wie Sie mit der Artikelvorlage getan haben:

<ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
      <WrapPanel/> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 

So wird Ihre userview.xaml wie folgt aussehen:

<ItemsControl ItemsSource = "{Binding Path = Users}"> 

    <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel/> 
      </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation = "Vertical"> 
        <Button Style="{StaticResource UserButton}" Content="{Binding Name}"></Button> 
        <Rectangle Style="{StaticResource UserButtonStatus}" Fill="{Binding Color}" ToolTip="{Binding Tooltip}"/> 
       </StackPanel> 
      </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>