c# - 如何在 xamarin 表单中正确缩放条目和按钮到手机
问题描述
我有一个问题,我的条目和按钮在 Xamarin 表单跨平台 android 和 ios 中被切断,并且想知道如何正确编码它们以正确缩放。下面的代码
<?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="Kula.MainPage"
>
<Grid Padding="0" ColumnSpacing="0" RowSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".15*"/>
<RowDefinition Height=".40*"/>
<RowDefinition Height=".15*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
<Frame HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10" BackgroundColor="#82D5FF" CornerRadius="10">
<Label
Text=" Kula "
FontSize="65"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
/>
</Frame>
</StackLayout>
<BoxView
BackgroundColor="white" Grid.Column="0" Grid.Row="1"
/>
<AbsoluteLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
<Frame Padding="10"
BackgroundColor="#82D5FF"
HasShadow="False"
CornerRadius="10"
AbsoluteLayout.LayoutBounds=".5,.5,.75,.73"
AbsoluteLayout.LayoutFlags="All">
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height=".26*"/>
<RowDefinition Height=".26*"/>
<RowDefinition Height=".26*"/>
<RowDefinition Height=".22*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Entry Grid.Row="0" Grid.Column="0" x:Name="Rusername" Placeholder="Username" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
<Entry Grid.Row="1" Grid.Column="0" x:Name="Remail" Placeholder="Email" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"/>
<Entry Grid.Row="2" Grid.Column="0" x:Name="Rpassword" IsPassword="True" FontSize="Medium" Placeholder="Password" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"/>
<Grid Grid.Row="3" Grid.Column="0" ColumnSpacing="0" RowSpacing="0" VerticalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="GTLogin"
BorderRadius="0"
BorderWidth="0"
BorderColor="#FFF80D"
Grid.Row="0"
Grid.Column="0"
Text="Go To Login"
BackgroundColor="#E4FF00"
Clicked="GTLogin_Clicked"
/>
<Button x:Name="registerUser"
BorderRadius="0"
BorderWidth="0"
BorderColor="#C0C0C0"
Grid.Row="0"
Grid.Column="1"
Text="Register"
BackgroundColor="#FF1000"
Clicked="registerUser_Clicked"
/>
</Grid>
</Grid>
</Frame>
</AbsoluteLayout>
<BoxView
BackgroundColor="White" Grid.Column="0" Grid.Row="3"
/>
</Grid>
</ContentPage>
我认为通过使用网格百分比可以正确缩放条目和按钮,但它确实会附加来自设计器和模拟器的视图。任何帮助将非常感激。设计师模拟器
解决方案
您可以改进代码如下
<StackLayout BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Grid.Column="0" Grid.Row="2">
<Frame Padding="10" Margin="40,0,40,0" BackgroundColor="#82D5FF" HasShadow="False" CornerRadius="10">
//...
</Frame>
</StackLayout>
推荐阅读
- go - 如何检测用户是否按下键并继续
- python - python - 如何根据python中旧网址的csv检查新网址以防止重复?
- windows - 2个cpu机器更适合单任务还是多任务
- android - apk 发布后 Admob 广告消失
- android - 在 android 中更改 SearchView 的颜色
- javascript - 从多个子组件的 componentDidMount() 同步更新父组件状态
- haskell - 一个基本的 Monoid 定义给出了“没有由实例声明的超类产生的 (Semigroup MyMonoid) 实例”
- docker - 所有的 docker 容器一下子停了下来。如何调试docker本身?
- angular - Angular HttpClient 帖子
- ios - 更改 UISegmentedControl 中特定段的标题文本颜色?