Good day! To which control can you bind an ObservableCollection so that the display would be in the form of a table?

  • DataGrid and DataGridTemplateColumn with ItemTemplat th - Dmitry Chistik

2 answers 2

If you want to arrange the pictures on the grid, you can do it as follows.

1. Make a view model that will contain information about a cell with a picture (the simplest case is the coordinates) and the picture itself:

 public sealed class BitmapVm { public BitmapImage Image { get; } public int X { get; } public int Y { get; } }

2. Create a collection of such elements, putting them outside in the window view model:

 public sealed class MainVm { public ObservableCollection<BitmapVm> Bitmaps { get; } }

3. In the window view, create an ItemsControl and set the Grid as an ItemsPanelTemplate:

 <ItemsControl ItemsSource="{Binding Bitmaps}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid> <!-- Количество строк и столбцов можно задавать Binding'ом, но придется повозиться --> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> </Grid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Image Source="{Binding Image}"/> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemContainerStyle> <Style> <Setter Property="Grid.Column" Value="{Binding X}"/> <Setter Property="Grid.Row" Value="{Binding Y}"/> </Style> </ItemsControl.ItemContainerStyle> </ItemsControl>

UPD

At the suggestion of @FoggyFinder.

Main window view model:

 public sealed class MainVm { public ObservableCollection<BitmapImage> Bitmaps { get; } }

Representation:

 <ItemsControl ItemsSource="{Binding Bitmaps}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Image Source="{Binding}"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
  • @FoggyFinder, by the way, yes. A good idea. - Vlad
  • great solution, thanks! - Anton Man'kov Nov.

More precisely something like that.

 <DataGrid Name="f_Grid"> <DataGrid.Columns> <DataGridTemplateColumn Header="Image"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>

and code

 f_Grid.ItemsSource = yourCollectionBitmap;