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