嵌套 ItemsControl 中的项目对齐

Question

我在一个 ItemsControl 中嵌套了两个 ItemsControl。每个都在带有水平方向的 StackPanel ItemsPanelTemplates 的网格列中彼此相邻放置，因此它们的内容水平分层。

虽然我希望两个 ItemsControl 占据父级的整个宽度 (50:50)，但我希望其中的项目分别右对齐和左对齐...因此它们都居中，有些东西喜欢（请原谅我对 ASCII 艺术的尝试）：

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

到目前为止，这是我的代码，我一直在调整 HorizontalAlignment 属性，但如果我让它们占据中心，那么两个 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">
                <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

在左侧堆栈面板上使用 FlowDirection=RightToLeft，在 DataTemplate 控件中使用 FlowDirection=LeftToRight。我做了一个样品。下面的代码可以按原样使用：

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(">");
    }
}

}

此代码将两侧的项目放在中心，并拉伸两个堆栈面板。

Answer 2

在 ItemsControl 而不是 StackPanel 上设置背景属性并在 StackPanel 上分别将 Orientation 设置为 Left 和 Right 给了我想要的效果：

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

嵌套 ItemsControl 中的项目对齐

Aligment of Items in nested ItemsControls

c#

wpf

itemscontrol