2つのイメージ要素をキャンバス内に配置する方法は？

Question

キャンバス内に2つの画像要素を配置しようとしていますが、期待通りに動作しないようです。

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <StackPanel> 
      <Canvas> 
       <Image Source="testImage.png" Height="240"/> 
       <Image Source="championPortaitHolder.png" Height="240" /> 
      </Canvas> 
      <TextBlock>This is some random text.</TextBlock> 
     </StackPanel> 
    </Grid> 
</Window> 

私が、私はそれを表示する方法を正確に画像を配置何ができるか、私は画像の上にTopプロパティを置くことができないようです。

また、キャンバス要素はすべての領域を占有していないようです。あたかも要素がHTML用語で浮かんでいるかのようです。

これに関するアイデアもありますか？

Answer 1

あなたが探している簡単な答えは、画像のTopプロパティとLeftプロパティを設定する方法です。 Canvas.TopとCanvas.Leftを使用する必要があります。これは、Canvas、Grids、またはStackPanelsについて知らないImageにではなく、Canvasの意味を持っているため、これらのプロパティがアタッチされているためです。

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <StackPanel> 
      <Canvas Height="300" Width="500"> 
       <Image Source="testImage.png" Height="240" Canvas.Top="10" Canvas.Left="10"/> 
       <Image Source="championPortaitHolder.png" Height="240" Canvas.Top="50" Canvas.Left="50" /> 
      </Canvas> 
      <TextBlock>This is some random text.</TextBlock> 
     </StackPanel> 
    </Grid> 
</Window> 

Answer 2

キャンバスでは絶対配置が使用されるため、各イメージのMarginプロパティを指定するか、キャンバスの代わりにグリッドを使用することができます。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

      <Image Source="testImage.png" Height="240" Grid.Row="0" Grid.Column="0"/> 
      <Image Source="championPortaitHolder.png" Height="240" Grid.Row="0" Grid.Column="1"/> 
      <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">This is some random text.</TextBlock> 
</Grid> 

マージンを持つ：

<Grid> 
    <StackPanel> 
     <Canvas Height="500" Width="500"> 
      <Image Source="testImage.png" Height="240" Margin="0, 0, 0, 0"/> 
      <Image Source="championPortaitHolder.png" Height="240" Margin="250, 0, 0, 0"/> 
     </Canvas> 
     <TextBlock>This is some random text.</TextBlock> 
    </StackPanel> 
</Grid> 

注キャンバスはその内容にサイズないので、明示的に身長キャンバスの/幅を設定する必要があること。