WPF 视图框和图像大小

Question

我想创建一个显示图片列表的窗口。我创建了包含 ViewBox 和 Image 的控件：

<UserControl x:Class="..."
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Viewbox Name="viewbox">
            <Image Height="10" Name="image" Width="10" HorizontalAlignment="Left"  VerticalAlignment="Top" />
        </Viewbox>
    </Grid>
</UserControl>

public BitmapImage Image
{
    get { return image.Source as BitmapImage; }
    set { changeImage(value); }
}
public SingleIllustrationViewer()
{
   InitializeComponent();
}
private void changeImage(BitmapImage img)
{
    System.Drawing.Graphics graphics = System.Drawing.Graphics.FromHwnd(IntPtr.Zero);
    float dpiX = graphics.DpiX / 96;
    this.image.BeginInit();
    this.image.Source = img;
    this.image.EndInit();
    this.image.Width = img.PixelWidth / img.DpiX * dpiX;
}

我正在像这样在窗口上放置图像：

double margin = 0;
for (int i = 0; i < illustrations.Count; i++)
{
    String path = illustrations[i].printVersions.Last<String>();
    BitmapImage bmp = new BitmapImage(new Uri(path));

    Controls.SingleIllustrationViewer iv = new Controls.SingleIllustrationViewer();
    iv.VerticalAlignment = System.Windows.VerticalAlignment.Top;
    iv.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
    iv.Margin = new Thickness(50, margin, 0, 0);
    iv.Image = bmp;
    grid.Children.Add(iv);
    margin += iv.Image.Height + 20;
}

因此，例如，我像这样放置了 3 张图片（所有 3 张都具有相同的宽度），并收到了这样一个有趣的行为：第一张很好，第二张小，第三张小于第二张。这是屏幕截图：

也许有人可以告诉我为什么会这样，以及如何解决这个问题，以相同的宽度查看所有这些图片？

谢谢！

问候，托马斯

Answer 1

根本原因：

您没有指定 UserControl 的高度或宽度，因此当第一个 SingleIllustrationViewer 添加到 Grid 时，它将被拉伸以占用所有可用空间，直到到达 Grid 的边缘。第二个也是如此，但由于margin的增加，它被限制在一个较小的区域内。

尺寸指定为

d:DesignHeight="300" d:DesignWidth="300"

仅供设计师使用，设置大小如

Height="300" Width="300"

然后，将您的观众放入StackPanel 而不是Grid，这样您就不必根据最后一位观众的位置计算观众的保证金。 StackPanel 是一个容器，它在一个方向（垂直或水平）上堆叠其子级。

for (int i = 0; i < illustrations.Count; i++)
{
    String path = illustrations[i].printVersions.Last<String>();
    BitmapImage bmp = new BitmapImage(new Uri(path));

    Controls.SingleIllustrationViewer iv = new Controls.SingleIllustrationViewer();
    iv.VerticalAlignment = System.Windows.VerticalAlignment.Top;
    iv.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
    iv.Margin = new Thickness(50, 0, 0, 20); //50 px to the left, 20 px to the next child 
    iv.Image = bmp;
    stackPanel1.Children.Add(iv);
 }