画布视图走出屏幕

Question

我已使用此代码在Canvas视图中添加了一个Image。

<Canvas x:Name="ContentPanelCanavas" Background="Transparent"
            Height="{Binding ActualHeight, ElementName=LayoutRoot}"
            Width="{Binding ActualWidth, ElementName=LayoutRoot}">
        <Image  x:Name="StartLogo" Source="/Assets/test.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Canvas>

但是图像已经不在视野中了。

这里出了什么问题。请帮忙

Answer 1

Canvas 旨在像这样工作。考虑使用其他UIElements，或者如果你坚持使用 Canvas ，那么其中一个解决方案可能是在图像的宽度/高度设置Binding：

<Canvas x:Name="ContentPanelCanavas" Background="Transparent" 
    Height="{Binding ActualHeight, ElementName=LayoutRoot}"
    Width="{Binding ActualWidth, ElementName=LayoutRoot}">
    <Image Width="{Binding ElementName=ContentPanelCanavas, Path=ActualWidth}" 
           Height="{Binding ElementName=ContentPanelCanavas, Path=ActualHeight}"
           x:Name="StartLogo" Source="/Assets/test.png" Stretch="Uniform" 
           VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Canvas>

当然，您可以绑定到Canvas（如上所述）或LayoutRoot。还要定义图像应如何拉伸（如果Uniform或UniformToFill）。

Answer 2

您需要将Height属性的Width n Stretch设置为Fill，因为它不会离开您的画布

    <Canvas x:Name="ContentPanelCanavas" Background="Transparent"
    Height="{Binding ActualHeight, ElementName=LayoutRoot}"
    Width="{Binding ActualWidth, ElementName=LayoutRoot}">
        <Image  x:Name="StartLogo" Source="/Assets/test.png" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center" Height="{Binding ActualHeight, ElementName=LayoutRoot}"
    Width="{Binding ActualWidth, ElementName=LayoutRoot}"/>
    </Canvas>

Answer 3

试试这个。

<Image  Name="StartLogo" Source="/Assets/image.png" 
        Height="{Binding ActualHeight, ElementName=LayoutRoot}" 
        Width="{Binding ActualWidth, ElementName=LayoutRoot}" 
        Stretch="Fill"></Image>

OR

<Grid Width="..." Height="...">
            <Image  Name="StartLogo" Source="/Assets/image.png" 
                    Stretch="Fill"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
        </Grid>

希望这会有所帮助.....

Answer 4

这是Canvas的默认行为。当您将Canvas更改为StackPanel时，它将起作用：

<Stackpanel x:Name="ContentPanelCanavas" Background="Transparent"
            Height="{Binding ActualHeight, ElementName=LayoutRoot}"
            Width="{Binding ActualWidth, ElementName=LayoutRoot}">
        <Image x:Name="StartLogo" Source="/Assets/test.png" Stretch="Fill" />
</Stackpanel>