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

Question

im working with wpf and i have the problem that i want to bind a collection to an element which resize its content based on the window size.

To make it more clear a little example: With static behaviour i would do something like that.

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

In that case all the Buttons would grow/shrink with the window.

But now i want to have it more dynamic. I have an ObservableCollection which contains all the elements to be added (dynamic amount). For the first implementation ive added all the elements to a StackPanel. But the controls within the StackPanel dosent resize so that i think about using a grid instead.

Actual solution:

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

How is it possible to use the ItemsControl to generate one row for each element and add it to that row? Other solutions to deal tith the problem are also welcome.

Answer 1

You can use UniformGrid as ItemsPanelTemplate cause it's a grid where all the cells in the grid have the same size. So the code will look like that.

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

In code behind it's looks like that.

    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;