嵌套项控件中的项对齐

本文关键字：对齐 控件 嵌套 | 更新日期: 2023-09-27 18:18:41

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

虽然我想让两个ItemsControls占据父控件的全部宽度(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>

任何想法?

丰富

嵌套项控件中的项对齐

在ItemsControl上设置背景属性，而不是在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>

在左stackpanel上使用FlowDirection= righttolleft，在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(">");
    }
}

}

这段代码将两个侧项放在中间，并拉伸两个堆栈面板。

相关文章：