How to Design Hexagon In Xamarin Form Android Visual Studio 2019

问题

i need to develop android application with xamarin android using visual studio 2019, my goal is create design hexagon in form xml. for detail ilustration like below :

i have image like below:

and then i wanna place that picture in the grid, with expectation like below :

i try code like this :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppBab2XamarinForm.HexGrid">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <OnPlatform.Android>10,10,10,10</OnPlatform.Android>
        </OnPlatform>
    </ContentPage.Padding>
    <ContentPage.Content>
        <Grid BackgroundColor="Orange">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="hexagon1.png"
                   BackgroundColor="Transparent"
                   Grid.Row="0"  
                   Grid.Column="2"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon2.png"  
                  BackgroundColor="Transparent"
                  Grid.Row="0"  
                  Grid.Column="3"  
                  HorizontalOptions="FillAndExpand"  
                  VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon3.png"  
                   Grid.Row="0"  
                   Grid.Column="4"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon4.png"  
                   Grid.Row="1"  
                   Grid.Column="1"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon5.png"  
                   Grid.Row="1"  
                   Grid.Column="2"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_4"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon6.png"  
                   Grid.Row="1"  
                   Grid.Column="4"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_5"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon7.png"  
                   Grid.Row="1"  
                   Grid.Column="5"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_6"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon8.png"  
                   Grid.Row="2"  
                   Grid.Column="2"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_7"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon9.png"  
                   Grid.Row="2"  
                   Grid.Column="3"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_8"/>
                </Image.GestureRecognizers>
            </Image>
            <Image Source="hexagon10.png"  
                   Grid.Row="2"  
                   Grid.Column="4"  
                   BackgroundColor="Transparent"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_9"/>
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </ContentPage.Content>
</ContentPage>

and the result like below:

so how i can design fit image to grid like my expectation. thanks you to all

来源：https://stackoverflow.com/questions/62651637/how-to-design-hexagon-in-xamarin-form-android-visual-studio-2019