WPF ItemsControl 元素 - 根据 window 大小调整内容大小（锚定）

Question

我正在使用 wpf，我遇到了一个问题，我想将一个集合绑定到一个元素，该元素根据 window 大小调整其内容的大小。

为了更清楚一点举个例子：对于静态行为，我会做类似的事情。

<Grid Margin="10,10,10,10">
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"/>
        <RowDefinition Height="50*"/>
        <RowDefinition Height="50*"/>
        <RowDefinition Height="50*"/>
    </Grid.RowDefinitions>
    <Button Grid.Row="0"></Button>
    <Button Grid.Row="1"></Button>
    <Button Grid.Row="2"></Button>
    <Button Grid.Row="3"></Button>
</Grid>

在这种情况下，所有按钮都将 grow/shrink 与 window。

但现在我想让它更有活力。我有一个 ObservableCollection，其中包含要添加的所有元素（动态数量）。对于第一个实现，我将所有元素添加到 StackPanel。但是 StackPanel 中的控件会调整大小，因此我考虑改用网格。

实际解决方案：

<Window.Resources>
    <DataTemplate DataType="{x:Type local:OwnObject}">
        <Button DataContext="{Binding}" Content="{Binding Text}" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </DataTemplate>
</Window.Resources>
<Grid>
    <ItemsControl ItemsSource="{Binding SubItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel x:Name="stackPanel" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

如何使用 ItemsControl 为每个元素生成一行并将其添加到该行？也欢迎其他解决问题的方法。

Answer 1

您可以将 UniformGrid 用作 ItemsPanelTemplate，因为它是一个网格，其中网格中的所有单元格都具有相同的大小。所以代码看起来像那样。

<ItemsControl Name="icTest" VerticalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:OwnObject}">
            <DockPanel Margin="0">
                <Button Content="{Binding Text}" Margin="0,0,0,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </DockPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

在它后面的代码中看起来是这样的。

    public class OwnObject : INotifyPropertyChanged
    {
        private string _text;

        public string Text
        {
            get { return _text; }
            set { _text = value; NotifyPropertyChanged( "Text" ); }
        }

...

    }

...

    ObservableCollection<OwnObject> objects = new ObservableCollection<OwnObject>();
    objects.Add( new OwnObject() { Text = "first" } );
    objects.Add( new OwnObject() { Text = "second" } );
    objects.Add( new OwnObject() { Text = "third" } );
    icTest.ItemsSource = objects;

WPF ItemsControl 元素 - 根据 window 大小调整内容大小（锚定）

WPF ItemsControl elements - Resize content based on the window size (Anchoring)

c#

data-binding

wpf

grid

itemscontrol