添加的图像在WPF中相互叠加

Question

我正在使用C＃代码将图像添加到WPF堆栈面板。为了定位图像，我使用的是margin关键字，但是当我运行项目时，会为最后一个图像创建一个空白区域并推送第一个图像。为什么？ 在下面，我已经从相同的源加载了两个不同边距的图像，并且您看到第一个图像被第二个图像中的空白覆盖。请注意，源图像是png图像，并且没有任何边框。

代码如下（注意我先使用了图像控制，然后我使用了边框控件，两者都有同样的问题）：

Border newLegBorder =new Border();
        BitmapImage casingLegBitmapImage = new BitmapImage(new Uri("images/casingleg.png", UriKind.Relative));
        newLegBorder.Background = new ImageBrush(casingLegBitmapImage);
        newLegBorder.Width = casingLegBitmapImage.Width;
        newLegBorder.Height = casingLegBitmapImage.Height;
        newLegBorder.SetValue(Grid.ColumnProperty, 0);
        newLegBorder.SetValue(Grid.RowProperty, 0);
        newLegBorder.VerticalAlignment = VerticalAlignment.Top;
        newLegBorder.Margin = new Thickness(0, 0, 100, 0);
        newLegBorder.Width = casingLegBitmapImage.Width;
        newLegBorder.Height = casingLegBitmapImage.Height;
        schematic.Children.Add(newLegBorder);

        Border newLeg2Border = new Border();
        BitmapImage casingLeg2BitmapImage = new BitmapImage(new Uri("images/casingleg.png", UriKind.Relative));
        newLeg2Border.Background = new ImageBrush(casingLeg2BitmapImage);
        newLeg2Border.Width = casingLeg2BitmapImage.Width;
        newLeg2Border.Height = casingLeg2BitmapImage.Height;
        newLeg2Border.SetValue(Grid.ColumnProperty, 0);
        newLeg2Border.SetValue(Grid.RowProperty, 0);
        newLeg2Border.VerticalAlignment = VerticalAlignment.Top;
        newLeg2Border.Margin = new Thickness(100, 0, 0, 0);
        newLeg2Border.Width = casingLeg2BitmapImage.Width;
        newLeg2Border.Height = casingLeg2BitmapImage.Height;
        schematic.Children.Add(newLeg2Border);


<Window 
    xmlns="schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikDocking‌​="clr-namespace:Teler‌​ik.Windows.Controls;a‌​ssembly=Telerik.Windo‌​ws.Controls.Docking" 
    xmlns:System="clr-na‌​mespace:System;assemb‌​ly=mscorlib" 
    xmlns:telerik="http:‌​//schemas.telerik.com‌​/2008/xaml/presentati‌​on" 
    xmlns:Chromes="clr-n‌​amespace:Telerik.Wind‌​ows.Controls.Chromes;‌​assembly=Telerik.Wind‌​ows.Controls" 
    xmlns:Primitives="cl‌​r-namespace:Telerik.Wi‌​ndows.Controls.Primit‌​ives;assembly=Telerik‌​.Windows.Controls.Nav‌​igation" 
    x:Class="imagetoolbo‌​x.wellSchematic" 
    Title="wellSchematic‌​" 
    Height="402" Width="458"> 
    <Grid> 
    <Grid.ColumnDefiniti‌​ons> 
        <ColumnDefinition/> 
        <ColumnDefinition Width="236"/> 
    </Grid.ColumnDefinit‌​ions> 
    <StackPanel x:Name="schematic" HorizontalAlignment=‌​"Left" Height="371" VerticalAlignment="T‌​op" Width="214"> 
    </StackPanel> 
    </Grid> 
    </Window>

Answer 1

问题是stackpanel会堆叠所有孩子。第一张图像没有被第二张图片覆盖，它们只是堆叠在一起。

要定位图像，您应该直接使用网格，结合边距和对齐。

使用下面的XAML示例来获取所需的布局，并将其传输到代码隐藏。

<Window
....>
    <Grid x:Name="schematic">
      <!-- First image will stretch vertically -->
      <Image Stretch="Fill" Margin="10,20,0,25" HorizontalAlignment="Left" VerticalAlignment="Top" Width="10">
        <Image.Source>
          <BitmapImage UriSource="images/casingleg"/>
        </Image.Source>
      </Image>

      <Image Margin="0,30,20,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="10">
        <Image.Source>
          <BitmapImage UriSource="images/casingleg"/>
        </Image.Source>
      </Image>

      <Image Margin="40,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="10">
        <Image.Source>
          <BitmapImage UriSource="images/casingleg"/>
        </Image.Source>
      </Image>
    </Grid>
</Window>

上述示例的代码隐藏。

public class WellSchematic : UserControl
{
    public WellSchematic()
    {
        InitializeComponent();

        var im1 = CreateImage();
        im1.HorizontalAlignment = HorizontalAlignment.Left;
        im1.VerticalAlignment = VerticalAlignment.Top;
        im1.Margin = new Margin(10,20,0,25);
        im1.Stretch = Stretch.Fill;

        var im2 = CreateImage();
        im2.HorizontalAlignment = HorizontalAlignment.Right;
        im2.VerticalAlignment = VerticalAlignment.Top;
        im2.Margin = new Margin(0,30,20,0);

        var im3 = CreateImage();
        im3.HorizontalAlignment = HorizontalAlignment.Left;
        im3.VerticalAlignment = VerticalAlignment.Bottom;
        im3.Margin = new Margin(40,0,0,10);

        // Add more pictures
    }

    private void CreateImage()
    {
        var image = new Image();
        var bmp = new BitmapImage(new Uri(@"images/casingleg", UriKind.Relative));
        image.Source = bmp;
        image.Width = bmp.Width;
        image.Height = bmp.Height;

        schematic.Children.Add(image);
    }
}