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