WrapPanel nicht horizontal mit DataTemplate

Question

Ich fülle ein zwei WrapPanel mit Schaltflächen über DataTemplate, aber sie alle vertikal ausgerichtet aus irgendeinem Grund, was genau ist hier falsch? Es spielt keine Rolle, ob ich die Orientierungseigenschaft einstelle oder nicht.

XAML:

<UserControl x:Class="DashboardClient.View.DashboardView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      Width="940" Height="640"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="400" /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <DockPanel Grid.Column="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}"> 
      <ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5"> 
       <WrapPanel> 
        <ItemsControl ItemsSource="{Binding Dashboards}"> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}"> 
            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" /> 
           </Button> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
        <Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" /> 
       </WrapPanel> 
      </ScrollViewer> 
      <StackPanel Height="100" Margin="5"> 
       <Label>Dashboardname:</Label> 
       <TextBox Text="{Binding SelectedDashboard.Name}" /> 
       <RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" /> 
       <Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" /> 
      </StackPanel> 
     </DockPanel> 
     <StackPanel Grid.Column="1" Margin="0"> 
      <ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}"> 
       <WrapPanel> 
        <ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}"> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10"> 
            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" /> 
           </Button> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
        <Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" /> 
       </WrapPanel> 
      </ScrollViewer> 
     </StackPanel> 
    </Grid> 
</UserControl> 

Dies ist, was die WrapPanel wie folgt aussieht:

die Schaltfläche Hinzufügen wird immer irgendwie abgeschnitten, auch.

Answer 1

Wenn Sie die Kinder der Items horizontal in einem WrapPanel setzen wollen, müssen Sie die Items anweisen, eine WrapPanel für seine Kinder über einen Itemspaneltemplate zu verwenden:

<WrapPanel Orientation="Horizontal"> 
    <ItemsControl ItemsSource="{Binding Dashboards}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button 
        Width="120" 
        Height="120" 
        Margin="5" 
        Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
        CommandParameter="{Binding}" 
        > 
        <TextBlock 
         TextWrapping="Wrap" 
         HorizontalAlignment="Center" 
         Text="{Binding Name}" 
         /> 
       </Button> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
    <Button 
     Width="120" 
     Height="120" 
     Margin="5" 
     VerticalAlignment="Top" 
     Command="{Binding DashboardAddCommand}" 
     Content="+" 
     FontSize="100" 
     /> 
</WrapPanel> 

Ich weiß nicht, was Sie möchte mit dem Knopf machen. Meine Vermutung ist, dass Sie es rechts von ItemsControl wollen, und ich habe es nach oben ausgerichtet, weil das für mich mehr Sinn macht.

Answer 2

Statt

<ScrollViewer> 
    <WrapPanel> 
     <ItemsControl ItemsSource="{Binding Dashboards}"> 
      <ItemsControl.ItemTemplate ... /> 
     </ItemsControl> 
     <Button Content="+" ... /> 
    </WrapPanel> 
</ScrollViewer> 

können Sie verwenden

<ScrollViewer> 
    <ItemsControl ItemsSource="{Binding Dashboards}"> 
     <ItemsControl.ItemTemplate ... /> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
    <Button Content="+" ... /> <!-- A --> 
</ScrollViewer> 
<Button Content="+" ... /> <!-- B --> 

WrapPanelinnerhalbItemsControl zu Layout-Dashboards verschoben wird.

Sie Taste setzen können irgendwo sonst (wie bei @EdPlunkett Ich habe keine gute Idee, wo sie setzen): A - lassen Sie Taste, um zusammen mit Dashboards und B wird fixiert halten Sie die Taste, missachtet scrollen.