如何在文档预览应用的图片缩略图左上角左侧添加文本标题？

Hey there! Let's refine your thumbnail header implementation—your current code works, but we can make it cleaner, more maintainable, and less reliant on hacky workarounds like negative margins. Here are a few elegant approaches tailored to WPF's layout strengths:

1. Replace StackPanel with Grid for Clean Overlay Layout #

Your current use of StackPanel plus a hardcoded negative margin (-370) is fragile—if thumbnail sizes change, the text position breaks. Instead, use a Grid to layer the text directly over the image without messy offsets:

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

    // Create a Grid to hold both image and page number
    Grid thumbnailContainer = new Grid();
    var thumbnailSizes = GetThumbnailSizes(tiffImageList);
    thumbnailContainer.Width = thumbnailSizes.Item2 + 40; // Add margin space
    thumbnailContainer.Height = thumbnailSizes.Item1 + 40;

    // Image control
    Image imagePreviewItem = new Image();
    imagePreviewItem.Margin = new Thickness(20);
    imagePreviewItem.Source = tiffImage.image.Thumbnail;
    RenderOptions.SetBitmapScalingMode(imagePreviewItem, BitmapScalingMode.HighQuality);
    imagePreviewItem.Name = $"Image{tiffImage.index}";

    // Page number text (overlayed on top-left)
    TextBlock pageText = new TextBlock();
    pageText.Text = tiffImage.index.ToString();
    pageText.Margin = new Thickness(25, 25, 0, 0); // Offset from Grid's top-left
    pageText.Foreground = Brushes.DarkSlateGray;
    pageText.FontWeight = FontWeights.Bold;

    // Add both elements to the Grid (they'll occupy the same cell)
    thumbnailContainer.Children.Add(imagePreviewItem);
    thumbnailContainer.Children.Add(pageText);

    // Border wrapping
    Border border = new Border();
    border.BorderBrush = Brushes.LightGray;
    border.BorderThickness = new Thickness(1);
    border.Margin = new Thickness(10);
    border.Child = thumbnailContainer;

    Grid.SetColumn(border, columnIndex);
    Grid.SetRow(border, rowIndex);
    gridPreview.Children.Add(border);

    columnIndex++;
}

2. Ditch Manual Grid Row/Column Management with WrapPanel #

Calculating rows and columns manually adds unnecessary complexity. Use WrapPanel instead—it automatically wraps items to the next line when there's no horizontal space left:

// Replace your Grid row/column setup with a WrapPanel
WrapPanel thumbnailPanel = new WrapPanel();
thumbnailPanel.Width = gridPreviewWidth;
var thumbnailSizes = GetThumbnailSizes(tiffImageList);
thumbnailPanel.ItemWidth = thumbnailSizes.Item2 + 40; // Fixed width per item
thumbnailPanel.ItemHeight = thumbnailSizes.Item1 + 40; // Fixed height per item
thumbnailPanel.Margin = new Thickness(10);

foreach (var tiffImage in tiffImageList)
{
    Grid thumbnailContainer = new Grid();

    Image imagePreviewItem = new Image();
    imagePreviewItem.Margin = new Thickness(20);
    imagePreviewItem.Source = tiffImage.image.Thumbnail;
    RenderOptions.SetBitmapScalingMode(imagePreviewItem, BitmapScalingMode.HighQuality);

    TextBlock pageText = new TextBlock();
    pageText.Text = tiffImage.index.ToString();
    pageText.Margin = new Thickness(25, 25, 0, 0);
    pageText.FontWeight = FontWeights.Bold;

    thumbnailContainer.Children.Add(imagePreviewItem);
    thumbnailContainer.Children.Add(pageText);

    Border border = new Border();
    border.BorderBrush = Brushes.LightGray;
    border.BorderThickness = new Thickness(1);
    border.Margin = new Thickness(10);
    border.Child = thumbnailContainer;

    thumbnailPanel.Children.Add(border);
}

// Add the WrapPanel to your main Grid
gridPreview.Children.Add(thumbnailPanel);

3. Go Full WPF: Use DataTemplate + ItemsControl (Most Elegant) #

For maximum maintainability, separate your UI layout from data logic using XAML DataTemplate and ItemsControl. This follows WPF's MVVM principles and eliminates manual control creation:

Step 1: Define a simple data class for your thumbnails

public class ThumbnailData
{
    public int PageIndex { get; set; }
    public ImageSource ThumbnailImage { get; set; }
}

Step 2: Add this XAML to your view

<ItemsControl x:Name="ThumbnailList">
    <!-- Auto-wrap items with WrapPanel -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="{Binding ElementName=gridPreview, Path=ActualWidth}"
                       ItemWidth="150" ItemHeight="200"/> <!-- Adjust to your thumbnail size -->
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- Template for each thumbnail item -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="LightGray" BorderThickness="1" Margin="10">
                <Grid Width="130" Height="180">
                    <Image Margin="20" 
                           Source="{Binding ThumbnailImage}"
                           RenderOptions.BitmapScalingMode="HighQuality"/>
                    <TextBlock Text="{Binding PageIndex}"
                               Margin="25,25,0,0"
                               FontWeight="Bold"
                               Foreground="DarkSlateGray"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Step 3: Bind your data in code-behind

// Convert your tiffImageList to our data class
var thumbnailDataList = tiffImageList.Select(t => new ThumbnailData
{
    PageIndex = t.index,
    ThumbnailImage = t.image.Thumbnail
}).ToList();

// Bind to the ItemsControl
ThumbnailList.ItemsSource = thumbnailDataList;

Key Improvements Over Your Original Code #

• No more hardcoded negative margins—positions are relative to the container
• Automatic layout handling (WrapPanel eliminates row/column calculations)
• Separation of UI and data logic makes changes to layout or data easy
• More maintainable and scalable for future features (like click handlers or hover states)

内容的提问来源于stack exchange，提问作者Ivan Raskatov