두 이미지 요소를 캔버스 안에 배치하는 방법은 무엇입니까?

Question

캔버스 안에 두 개의 이미지 요소를 배치하려하지만 예상대로 작동하지 않는 것 같습니다.

<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 속성을 넣을 수 없습니다 보인다.

또한 Canvas 요소가 모든 공간을 차지하는 것 같지 않습니다. 마치 요소가 HTML 용어로 "떠 다니는"것처럼 보입니다.

그에 대한 아이디어가 있습니까?

Answer 1

당신이 찾고있는 간단한 대답은 이미지의 상단 및 왼쪽 속성을 설정하는 방법입니다. 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

캔버스는 절대 위치 지정을 사용하므로 각 이미지의 여백 속성을 지정해야하거나 찾고있는 것보다 더 많은 캔버스 대신 격자를 사용할 수 있습니다.

<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> 

참고.