WrapPanelはDataTemplateで水平ラップしません

Question

DataTemplateを使用して2つのWrapPanelにButtonを挿入していますが、何らかの理由でそれらがすべて垂直に整列しています。 Orientationプロパティを設定するかどうかは関係ありません。

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> 

これはWrapPanelは、次のようになります。

Answer 1

あなたはWrapPanelに水平のItemsControlの子供を入れたい場合は、あなたがItemsPanelTemplateを経由してその子のためにWrapPanelを使用するのItemsControlを指示する必要があります：

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

私が何かわかりませんボタンでやりたい私の推測では、ItemsControlの右にそれが欲しいということです。そして、それは私にとって理にかなっているので、一番上にそろえました。

Answer 2

代わりの

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

あなたは

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

WrapPanelを使用することができ、レイアウトのダッシュボードにItemsControl内部を移動させました。

あなたは（私はそれをどこに置くのに良いアイデアを持っていない@EdPlunkettと同じ）どこか別の場所をボタンを置くことができます：A - あなたはダッシュボードと一緒にボタンをスクロールするようになるとBが固定ボタンを維持します、では無視スクロールする。