如何在画布内定位两个图像元素? [英] How to position two image elements inside a canvas?

问题描述

我试图在 Canvas 中放置两个 Image 元素，但它似乎没有按预期工作.

I'm trying to position two Image elements inside a Canvas, yet it doesn't seem to work as expected.

<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 属性放在图像上，我该怎么做才能准确地将图像定位到我希望它显示的位置.

It seems I can't put the Top property on the Images, what can I do position the images exactly how I want it to appear.

此外，Canvas 元素似乎并没有占据它的所有空间.就好像元素在 HTML 术语中浮动"了一样.

Also, the Canvas element doesn't seem to occupy all it's space. It's as if the element was "floated" in HTML terms.

对此也有任何想法吗?

推荐答案

我认为您正在寻找的简单答案是如何设置图像的 Top 和 Left 属性.您必须使用 Canvas.Top 和 Canvas.Left，因为它们是附加属性(它们对 Canvas 有意义，而不对不了解 Canvases、Grids 或 StackPanels 的 Image 有意义).

I think the simple answer you are looking for is how to set the Top and Left properties of the images. You must use Canvas.Top and Canvas.Left since these are attached properties (they have meaning to the Canvas, not to the Image which doesn't know anything about Canvases, Grids, or StackPanels).

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

这篇关于如何在画布内定位两个图像元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！