c# - Xamarin XAML : Placing a Grid over an Image (responsive to screen size)

Question

我是 XAML 和 Xamarin 表单的新手。

我正在寻找一种设计 UI 的方法，其中透明按钮放置在背景图像上，这将用作 Remote (按钮将放置在下面屏幕截图中的图标上):

我试图改变 Xamarin's GridDemoPage为了这。我有一个 3*3 的网格。这是我到目前为止能够做的:

这是我的代码:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            x:Class="iRemote.RemotePage"
            Title="REMOTE"
            BackgroundImage="light.png"
            BackgroundColor="Transparent">

    <RelativeLayout VerticalOptions="Center" HorizontalOptions="Center">

        <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="330" HeightRequest="330" Padding="0,0,0,0">
            <Button x:Name="Btn1" Text=""
                   Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/>
            <Button x:Name="Btn2" Text=""
                   Grid.Row="0" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="White"/>
            <Button x:Name="Btn3" Text=""
                   Grid.Row="0" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Red"/>
            <Button x:Name="Btn4" Text=""
                   Grid.Row="1" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Blue"/>
            <Button x:Name="CenterButton" Text=""
                   Grid.Row="1" Grid.Column="1" Clicked="OnClickSend" BackgroundColor="Black"/>
            <Button x:Name="Btn5" Text=""
                   Grid.Row="1" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Green"/>
            <Button x:Name="Btn6" Text=""
                   Grid.Row="2" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Yellow"/>
            <Button x:Name="Btn7" Text=""
                   Grid.Row="2" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="Maroon"/>
            <Button x:Name="Btn8" Text=""
                   Grid.Row="2" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Lime"/>
        </Grid>
        <Image x:Name="RemoteCenterImage" Source="r_720_inactive.png"/>
    </RelativeLayout>
</ContentPage>

很明显，我还没有走得太远。我正在考虑将按钮包含在 absoluteLayout 中并放置/调整它们的大小以适合图标。

但是，我面临着多个问题。我已经对网格的高度和宽度进行了硬编码，因此这段代码不是自适应屏幕大小的。

1. 我使用网格来完成此任务的方法可行吗？或者有更好的方法吗？

2. 如何更改 XAML 以使 UI 具有响应性？

3. 我应该如何以响应式方式在网格中定位/放置按钮？

Answer 1

试试这个:

<AbsoluteLayout>
  <Image x:Name="backgroundImage" Source="yourBackround.png" AbsoluteLayout.LayoutBounds="0,0,1,1"   AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
  <Grid>
    <Button Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/>
    ....
<!-- Grid automatically creates rows and columns with "*" size when you put a child with Grid.Row and/or Grid.Column -->
  </Grid>
</AbsoluteLayout>

请记住，您可能需要固定 AbsoluteLayout 的大小或 W/H 比率以保持图像和网格同步，可能通过处理其 SizeChanged 事件或父元素约束，或绑定(bind)其中一个或两个 W/H 属性