C# Xamarin XAML:在图像上放置网格(响应屏幕大小)
我是XAML和Xamarin表单的新手 我正在寻找一种方法来设计一个UI,其中透明按钮放置在背景图像上,可以作为遥控器使用(按钮将放置在下面屏幕截图中的图标上): 我正试图改变这个。我有一个3*3的网格。这就是我目前所能做到的: 这是我的代码:C# Xamarin XAML:在图像上放置网格(响应屏幕大小),c#,xaml,xamarin,xamarin.forms,C#,Xaml,Xamarin,Xamarin.forms,我是XAML和Xamarin表单的新手 我正在寻找一种方法来设计一个UI,其中透明按钮放置在背景图像上,可以作为遥控器使用(按钮将放置在下面屏幕截图中的图标上): 我正试图改变这个。我有一个3*3的网格。这就是我目前所能做到的: 这是我的代码: <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns
<?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>
很明显,我还没走多远。
我在考虑将按钮封装在一个绝对的布局中,并将其放置/调整大小以适合图标
但是,我面临着多重问题。我已经硬编码网格的高度和宽度,所以这个代码不是自适应wrt屏幕大小
<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事件或父元素约束,或绑定其中一个或两个W/H属性非常感谢@Sten。为此,我刚刚决定在相对布局中使用按钮,但现在我将首先尝试一下您的解决方案。