Resolved Responsive Image on background Image

[miladel]

Dear All,
I need to resolve a problem in my UI in UWP, First lets explain what do I want to do:
I want to set a background image in UWP App and put other images on it. the position must be fixed when the page resized also the size of both images must be in the same ratio while resizing the page.
Here I have a simple example:
The school image on the background must be resizable and responsive to the page size. The boy must stay near the flag in every situation, and the boys size must be relative to the background.
When I use grids, the boys position getting fix but while running app and resizing it, the whole picture doesn't show correctly. I think my method is not working, so how can I solve this problem?


any help would be appreciated.
here is the code and attached files.

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