我是XAML和Xamarin表格的完全新手 .
我正在寻找一种方法来设计一个UI,其中透明按钮放置在背景图像上,该按钮将用作遥控器(按钮将放置在下面屏幕截图中的图标上):
我试图改变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中并放置/调整它们以适应图标 .
但是,我面临着多重问题 . 我已对网格的高度和宽度进行了硬编码,因此此代码不适用于屏幕尺寸 .
-
我使用网格实现这一点的方法是否合适?或者有更好的方法吗?
-
如何更改XAML以使UI响应?
-
如何以响应的方式将按钮定位/放置在网格中?
1 回答
试试这个:
请记住,您可能需要修复AbsoluteLayout的大小或W / H比率以保持图像和网格同步,可能是通过处理其SizeChanged事件或父元素约束,或绑定其中一个或两个W / H属性