解决 背景图像上的响应图像

米拉德尔

会员
已加入
2020年8月16日
留言内容
8
编程经验
Beginner
亲爱的大家,
我需要在UWP的UI中解决问题,首先让我们解释一下我想做什么:
我想在UWP App中设置背景图像并在其上放置其他图像。在调整页面大小时,必须固定位置,并且在调整页面大小时,两个图像的大小必须具有相同的比例。
这里有一个简单的例子:
背景上的学校图像必须可调整大小并响应页面大小。在任何情况下,男孩都必须留在旗帜附近,男孩的大小必须相对于背景。
当我使用网格时,男孩们的位置越来越固定,但是在运行应用程序并调整其​​大小时,整个图片无法正确显示。我认为我的方法无效,那么如何解决此问题?


任何帮助,将不胜感激。
这是代码和附件。

C#:
<Page
    x:Class="RespImages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RespImages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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


        <Image Source="/Assets/school.jpg" Grid.ColumnSpan="15" Grid.RowSpan="10" />
<Image Source="/Assets/boy.png" Grid.Column="5" Grid.Row="6" Grid.ColumnSpan="2" Grid.RowSpan="3"/>

    </Grid>
</Page>

img1.pngimg2.png
 
最佳 底部