Question

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

<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

画布使用绝对定位，因此您需要指定每个Image的Margin属性，或者您可以使用网格而不是Canvas，这可能更符合您的要求。

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

请注意，Canvas不会调整其内容的大小，因此您必须明确设置画布的高度/宽度。

Answer 2

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

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

如何在画布中放置两个图像元素？

2 个答案: