嵌套ItemsControls中项目的排列

Question

我有两个ItemsControl嵌套在一个ItemsControl中。每个都放置在具有水平方向StackPanel ItemsPanelTemplates的Grid Columns中彼此相邻，以便它们的内容水平分层。我想让两个ItemsControl占据父级的全部宽度（50:50），我希望它们中的项目是正确的，并且分别左对齐...因此它们都是居中的，类似于（原谅我的ASCII艺术尝试）：

|  LH ItemsControl   |  RH ItemsControl  | 
|      [][][][]|[][][]      | 

这里是我的代码，到目前为止，我已经调整了的Horizo​​ntalAlignment属性，但是，如果我让他们占据了中心，那么这两个StackPanels不填全宽的父母。

<ItemsControl ItemsSource="{Binding Things}"> 
<ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <ItemsControl Grid.Column="0" ItemsSource="{Binding LeftThings}" HorizontalAlignment="Stretch"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" Background="LightPink" HorizontalAlignment="Stretch" Height="37"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
      <ItemsControl Grid.Column="1" ItemsSource="{Binding RightThings}" HorizontalAlignment="Stretch"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" Background="LightBlue" HorizontalAlignment="Stretch" Height="37"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 

任何想法？

丰富

Answer 1

设置在ItemsControl的，而不是StackPanel的背景属性和对StackPanel中设置定向到左，右分别给了我，我是之后的效果：

<ItemsControl ItemsSource="{Binding Things}"> 
<ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <ItemsControl Grid.Column="0" ItemsSource="{Binding LeftThings}" HorizontalAlignment="Stretch" Background="LightPink"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="37"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
      <ItemsControl Grid.Column="1" ItemsSource="{Binding RightThings}" HorizontalAlignment="Stretch" Background="LightBlue"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="37"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 

Answer 2

使用的FlowDirection =从右至左左StackPanel中，和的FlowDirection = LeftToRight中的DataTemplate控制。我做了一个样本。下面的代码可被用作是：

MainWindow.xaml

<Window x:Class="WpfItemsControl.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="407.895" Width="884.211"> 
<Grid> 

    <ItemsControl ItemsSource="{Binding Names}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}" Grid.Column="0"> 
         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
           <StackPanel Orientation="Horizontal" Background="Red" HorizontalAlignment="Stretch" FlowDirection="RightToLeft"> 
           </StackPanel> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <TextBlock Background="DarkGoldenrod" FontSize="25" FontWeight="Bold" Foreground="Gray" Text="{Binding}" FlowDirection="LeftToRight"/> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
        <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}" Grid.Column="1"> 
         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal" Background="Red" HorizontalAlignment="Stretch" FlowDirection="LeftToRight"> 
            </StackPanel> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <TextBlock Background="DarkGoldenrod" FontSize="25" FontWeight="Bold" Foreground="Gray" Text="{Binding}"/> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate>    
    </ItemsControl>  

</Grid> 
</Window> 

MainWindow.xaml.cs

namespace WpfItemsControl 
{ 
/// <summary> 
/// Interaction logic for MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     try 
     { 
      InitializeComponent(); 

      this.DataContext = new DataStore(); 
     } 
     catch (Exception ex) 
     { 
      Debug.WriteLine(ex.InnerException.Message); 
     } 
    } 
} 

public class DataStore 
{ 
    public List<string> Names { get; set; } 

    public DataStore() 
    { 
     Names = new List<string>(); 

     Names.Add(">"); 
     Names.Add(">"); 
     Names.Add(">"); 
     Names.Add(">"); 
     Names.Add(">"); 
    } 
} 

}

此代码放入中心两侧的物品，并伸展两个堆叠面板。