Элементы позиции в сетке динамически в WPF

Question

Я создаю приложение WPF с интерфейсом ModernUI. Это своего рода фотогалерея. Изображения сохраняются в некоторой папке и извлекаются в соответствии с соответствующей записью в базе данных. Таким образом, моя ViewModel получает информацию из базы данных и связывает столбец «URI» с исходным свойством Image.

Что мне нужно сделать, это разместить эти изображения в виде, как в сетке. Ширина и высота изображений постоянны. Задача здесь заключается в том, что до выполнения я не знаю, сколько элементов у меня есть, поэтому Grid следует создавать динамически. Мне было бы лучше, если количество столбцов будет автоматически подсчитываться в зависимости от ширины сетки. Например, ширина изображения равна 200, правое поле равно 50, поэтому, если ширина сетки (или родительского элемента, неважно) составляет 800, поэтому у нас есть 3 столбца. Но я могу указать число столбцов явно; Самое главное - позиционировать изображения так, чтобы они выглядели как сетка.

ViewModel возвращает ObservableCollection элементов (может быть изменено на любую необходимую структуру). Я очень ценю XAML-код с определенными шаблонами.

Answer 1

Вы можете просто отобразить их в ListBox, который имеет ItemsPanelTemplate типа WrapPanel:

<ListBox ItemsSource="{Binding ImageUrls}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <Image Source="{Binding}" Stretch="None" /> 
    </ListBox.ItemTemplate> 
</ListBox> 

Это должно добавить Image управления по горизонтали, пока не будет больше места, а затем она будет обернуть их на следующую строку и так далее. Если размеры Image являются постоянными, как вы говорите, это должно дать вам вид, который вам нужен. Разумеется, вам понадобятся источники Image в правильном формате в коллекции.

Answer 2

Возможно, вы можете попытаться установить свойство grid.column и grid.row динамически. Проверьте возможную ширину и высоту сетки, чтобы указать количество снимков, которые вы можете разместить. Затем определите строки и столбцы вашей сетки и добавьте изображение.

  for(amount of images) // define rows and colums 
     { 
      ColumnDefinition colDef = new ColumnDefinition(); 
      colDef.Width = new GridLength(specifiedwidth); 
      yourgrid.ColumnDefinitions.Add(colDef); 

      RowDefinition rowDef = new RowDefinition(); 
      rowDef.Height = new GridLength(specifiedheight); 
      yourgrid.RowDefinition.Add(rowDef); 
     } 

     for(amount of images) // add your images to the grid 
     { 
      yourgrid.Children.Add(yourimage); 

      Grid.SetColumn(yourimage, index); //set column index 
      Grid.SetRow(yourimage, index); // set row index 
     }