我有一个ItemsControl
,Images
会显示Grid
。
ItemsControl
如下所示:
<ItemsControl x:Name="ICGridThumbnails">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid ShowGridLines="True" Name="GThumbnails" Loaded="GThumbnails_Loaded" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Grid.Row="{Binding GridRow}" Grid.Column="{Binding GridColumn}" Margin="{Binding Margin}" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Source="{Binding BitmapSource}"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
由于我想将可变数量的元素加载到网格中,因此我无法在标记中定义行和列。
绑定GridRow
和GridColumn
在后面的代码中计算:
int countPerRow = (int)Math.Floor(Application.Current.MainWindow.ActualWidth / ThumbnailBar.ThumbnailWidthLarge);
double marginWidth = (Application.Current.MainWindow.ActualWidth - (countPerRow * ThumbnailBar.ThumbnailWidthLarge)) / (countPerRow - 1);
if (page % countPerRow == 0) {
item.Margin = new Thickness(0, 10, 0, 0);
} else {
item.Margin = new Thickness(marginWidth, 10, 0, 0);
}
item.GridRow = (int)Math.Floor((double)((page - 1) / countPerRow));
item.GridColumn = (page % countPerRow) - 1;
Thumbs.LargeThumbnails[page] = item;
ICGridThumbnails.ItemsSource = null;
ICGridThumbnails.ItemsSource = Thumbs.LargeThumbnails;
item
是一个包含属性GridColumn
,GridRow
和BitmapSource
的对象。
计算完所有这些对象并将数组设置为ItemsSource
后,我将计算行数和列数:
private void GThumbnails_Loaded(Object sender, RoutedEventArgs e) {
_GThumbnails = (Grid)sender;
RearrangeThumbnailGrid();
}
private void RearrangeThumbnailGrid() {
int countPerRow = (int)Math.Floor(Application.Current.MainWindow.ActualWidth / ThumbnailBar.ThumbnailWidthLarge);
_GThumbnails.ColumnDefinitions.Clear();
_GThumbnails.RowDefinitions.Clear();
// Columns
for (int i = 0; i < countPerRow; ++i) {
ColumnDefinition cd = new ColumnDefinition();
cd.Width = new GridLength(141);
_GThumbnails.ColumnDefinitions.Add(cd);
}
// Rows
for (int i = 0; i < (Thumbs.LargeThumbnails.Length / countPerRow) + 1; ++i) {
RowDefinition rd = new RowDefinition();
rd.Height = new GridLength(200);
_GThumbnails.RowDefinitions.Add(rd);
}
}
从我的屏幕截图中可以看出,所有项目都加载到VisualTree中,并且它们具有正确的Column
和Row
值。网格也将正确显示。 BitmapSource
属性似乎正常,因为我可以在屏幕截图中看到Image
(白色背景上的35)。
唯一的问题是所有项目似乎都显示在左上角的“第一个”单元格中。有可能忽略Row
和Column
的值。
我尝试使用here中的建议,但这不起作用。
答案 0 :(得分:1)
设置ItemContainer的Grid.Row
和Grid.Column
附加属性:
<ItemsControl x:Name="ICGridThumbnails">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding GridRow}" />
<Setter Property="Grid.Column" Value="{Binding GridColumn}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid ShowGridLines="True" Name="GThumbnails" Loaded="GThumbnails_Loaded" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Margin="{Binding Margin}" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Source="{Binding BitmapSource}"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>