Xamarin使用略微凸起的中央按钮形成导航栏

我正在使用网格实现导航栏。我尝试使用网格行，并将中心图像的行跨度调整为2，但不知何故，我无法复制图像中的内容。非常感谢您的帮助。提前谢谢！附件是我的导航栏的代码

Grid VerticalOptions="EndAndExpand" 
              BackgroundColor="Red"
              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.10}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="44"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="navbar_background.png" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="11" Aspect="Fill" HorizontalOptions="FillAndExpand"/>

            <components:ImageComponent SetSource="icon_home_default.png"  Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <components:ImageComponent.GestureRecognizers>
                    <TapGestureRecognizer Tapped="HomeClicked"/>
                </components:ImageComponent.GestureRecognizers>
            </components:ImageComponent>

           

            <components:ImageComponent x:Name="BranchFinderBtnDefualt" SetSource="icon_branchfinder_default.png" Grid.Row="0" Grid.Column="5" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="True">
                    <components:ImageComponent.GestureRecognizers>
                        <TapGestureRecognizer Tapped="BranchFinderClicked"/>
                    </components:ImageComponent.GestureRecognizers>
                </components:ImageComponent>
            <components:ImageComponent x:Name="BranchFinderBtnCurrentPage" SetSource="icon_branchfinder_currentpage.png" Grid.Row="0" Grid.Column="5" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="False">
                <components:ImageComponent.GestureRecognizers>
                    <TapGestureRecognizer Tapped="BranchFinderClicked"/>
                </components:ImageComponent.GestureRecognizers>
            </components:ImageComponent>

           
</Grid>

Grid VerticalOptions=“EndAndExpand”
BackgroundColor=“红色”
RelativeLayout.WidthConstraint=“{ConstraintExpression Type=RelativeToParent，Property=Width}”
RelativeLayout.HeightConstraint=“{ConstraintExpression Type=RelativeToParent，Property=Height，Factor=0.10}”
RelativeLayout.YConstraint=“{ConstraintExpression Type=RelativeToParent，Property=Height，Factor=0.90}”>

您可以进一步微调它，但这应该会有所帮助

<Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="90*"/>
                <RowDefinition Height="25"/>
                <RowDefinition Height="10*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="1.35*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="5" BackgroundColor="White" HorizontalOptions="Fill" VerticalOptions="Fill">
                <Label Text="My Page" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
            </StackLayout>

            <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="3"
                     Color="LightGray"/>

            <Image Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Source="home"/>
            <Image Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand" Source="card"/>
            <Image Grid.Row="2" Grid.Column="3" VerticalOptions="CenterAndExpand" Source="bag"/>
            <Image Grid.Row="2" Grid.Column="4" VerticalOptions="CenterAndExpand" Source="inbox"/>

            <Label Grid.Row="2" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Home" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
            <Label Grid.Row="2" Grid.Column="1" VerticalOptions="EndAndExpand" Text="Cards" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
            <Label Grid.Row="2" Grid.Column="2" VerticalOptions="EndAndExpand" Text="Scan to Pay" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
            <Label Grid.Row="2" Grid.Column="3" VerticalOptions="EndAndExpand" Text="Shop" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
            <Label Grid.Row="2" Grid.Column="4" VerticalOptions="EndAndExpand" Text="Inbox" HorizontalOptions="CenterAndExpand" Margin="0,2"/>

            <Frame Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="Start" WidthRequest="60" HeightRequest="60" Padding="0" Margin="0,-5,0,0"
                   HasShadow="False" HorizontalOptions="Center" CornerRadius="30" BackgroundColor="LightBlue" BorderColor="White">
                <Image Source="barcode" Margin="12"/>
            </Frame>

        </Grid>

---

@vince如果答案符合您的要求，请接受。您可以查看的解决方案，了解如何在iOS端实现它。