如何在图片左上角附近添加小header（文本块）？

Question

我有一个应用程序，它使用缩略图显示文档的预览。我需要的是在图像的每个缩略图附近有一个小的 header （文本）。 header 应该在图像的左侧，在顶部，如图所示。我设法在图像上添加了带有页数的文本块。请给你的建议。图像缩略图是在后面的代码中动态生成的。这是后面的代码的一部分。我的目的达到了，但我想找到更优雅的解决方案。

RowDefinitionCollection rd = gridPreview.RowDefinitions;
ColumnDefinitionCollection cd =gridPreview.ColumnDefinitions;

int columnAmount = Convert.ToInt32(Math.Truncate(gridPreviewWidth / GetThumbnailSizes(tiffImageList).Item2));
gridPreviewHeight = ((tiffImageList.Count / columnAmount) + 1) * GetThumbnailSizes(tiffImageList).Item1 + 100;

for (int i = 0; i < (tiffImageList.Count / columnAmount) + 1; i++)
{
    rd.Add(new RowDefinition() { Height = GridLength.Auto });
    for (int j = 0; j < columnAmount; j++)
    {
        cd.Add(new ColumnDefinition() { Width = GridLength.Auto });
    }
}

foreach (var tiffImage in tiffImageList)
{
    if (columnIndex == columnAmount)
    {
        columnIndex = 0;
        rowIndex++;
    }


    Image imagePreviewItem = new Image();
    imagePreviewItem.Margin = new Thickness(20, 20, 20, 20);
    TextBlock textBlock = new TextBlock();
    textBlock.Margin = new Thickness(-370,0,0,0);
    textBlock.Text = $"{tiffImage.index.ToString()}"; // Header text

    RenderOptions.SetBitmapScalingMode(imagePreviewItem, BitmapScalingMode.HighQuality);
    imagePreviewItem.Name = $"Image{tiffImage.index.ToString()}";


    imagePreviewItem.Source = tiffImage.image.Thumbnail;

    StackPanel stackPanel = new StackPanel();
    stackPanel.Width = imagePreviewItem.Width + 50;
    stackPanel.Height = imagePreviewItem.Height + 50;
    stackPanel.Children.Add(textBlock);
    stackPanel.Children.Add(imagePreviewItem);

    Border border = new Border();
    border.BorderBrush = Brushes.LightGray;
    border.BorderThickness = new Thickness(1);
    Thickness margin = border.Margin;
    border.Margin = new Thickness(20, 20, 20, 20); ;
    border.Child = stackPanel;
    Grid.SetColumn(border, columnIndex);
    Grid.SetRow(border, rowIndex);

    gridPreview.Children.Add(border);
}

Answer 1

不是将 textBlock 和数字添加到 stackPanel 中，而是将其添加到左上角 border 顶部的 gridPreview 中：

foreach (var tiffImage in tiffImageList)
{
    if (columnIndex == columnAmount)
    {
        columnIndex = 0;
        rowIndex++;
    }

    Image imagePreviewItem = new Image();
    imagePreviewItem.Margin = new Thickness(20, 20, 20, 20);
    TextBlock textBlock = new TextBlock();
    textBlock.VerticalAlignment = VerticalAlignment.Top;
    textBlock.HorizontalAlignment = HorizontalAlignment.Left;
    textBlock.Margin = new Thickness(40, 40, 40, 40);
    textBlock.Text = $"{tiffImage.index.ToString()}"; // Header text

    RenderOptions.SetBitmapScalingMode(imagePreviewItem, BitmapScalingMode.HighQuality);
    imagePreviewItem.Name = $"Image{tiffImage.index.ToString()}";
    imagePreviewItem.Source = tiffImage.image.Thumbnail;

    StackPanel stackPanel = new StackPanel();
    stackPanel.Width = imagePreviewItem.Width + 50;
    stackPanel.Height = imagePreviewItem.Height + 50;
    stackPanel.Children.Add(imagePreviewItem);

    Border border = new Border();
    border.BorderBrush = Brushes.LightGray;
    border.BorderThickness = new Thickness(1);
    Thickness margin = border.Margin;
    border.Margin = new Thickness(20, 20, 20, 20);
    border.Child = stackPanel;
    Grid.SetColumn(border, columnIndex);
    Grid.SetRow(border, rowIndex);

    Grid.SetColumn(textBlock, columnIndex);
    Grid.SetRow(textBlock, rowIndex);

    gridPreview.Children.Add(border);
    gridPreview.Children.Add(textBlock);
}

如何在图片左上角附近添加小header（文本块）？

How to add small header (textblock) near the top left corner of the Image?

c#

wpf

image

textblock

stackpanel