动态添加的元素在动态调整的网格中显示不正确

Question

我有一个 ItemsControl，它应该在 Grid 中显示 Images。

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

唯一的问题是所有项目似乎都显示在左上角的 "first" 单元格中。 Row 和 Column 的值也可能被忽略。

我尝试使用 here 的建议，但没有用。

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

动态添加的元素在动态调整的网格中显示不正确

Dynamically added elements are not displayed properly in a dynamically adjusted grid

wpf

dynamically-generated

wpf-grid