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);
 }