WPF ItemsControl elements - изменить размер содержимого на основе размера окна (анкеровка)

Question

im работает с wpf, и у меня есть проблема с тем, что я хочу привязать коллекцию к элементу, который изменяет размер его содержимого на основе размера окна.

Чтобы сделать более понятным пример: Со статическим поведением я бы сделал что-то подобное.

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

В этом случае все кнопки будут увеличиваться/уменьшаться с помощью окна.

Но теперь я хочу, чтобы он был более динамичным. У меня есть ObservableCollection, который содержит все добавляемые элементы (динамическое количество). Для первой реализации ive добавила все элементы в 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;