我想要四个这样的按钮:
<Grid x:Name="buttonGrid" Grid.Row="3" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="20, 0">
<Button x:Name="zeroButton" Text="0" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Button x:Name="oneButton" Text="1" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Button x:Name="twoButton" Text="2" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Button x:Name="fiveButton" Text="5" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
</Grid>
在 iPhone 或小型手机上,我希望这些内容占满屏幕宽度的 90%。但在更大的屏幕上,我希望按钮只占屏幕宽度的 50%。
谁能建议我如何做到这一点?
最佳答案
说明
如果您需要创建引用 ContentPage.Width
或 ContentPage.Height
属性的布局,最好的方法是使用 RelativeLayout
.
如果您尝试直接引用 ContentPage.Width
或 ContentPage.Height
属性,您会发现 Xamarin.Forms 返回 -1
。这是因为 -1
是 Xamarin.Forms 在尚未实例化控件时使用的默认值。
RelativeLayout
使用 Func
动态引用页面的 Height
和 Width
属性并将返回真值Height
和 Width
属性一旦 ContentPage
被实例化。
代码
using Xamarin.Forms;
namespace HorizontalButtonSampleApp
{
public class ButtonPage : ContentPage
{
public ButtonPage()
{
const int relativeLayoutHorizontalSpacing = 5;
const int numberOfButtons = 4;
double screenUsePercentage;
if (Device.Idiom.Equals(TargetIdiom.Phone))
screenUsePercentage = 0.9;
else
screenUsePercentage = 0.5;
var zeroButton = new StyledButton { Text = "0" };
var oneButton = new StyledButton { Text = "1" };
var twoButton = new StyledButton { Text = "2" };
var fiveButton = new StyledButton { Text = "5" };
var relativeLayout = new RelativeLayout();
relativeLayout.Children.Add(zeroButton,
Constraint.RelativeToParent(parent => parent.Width * (1 - screenUsePercentage) / 2),
Constraint.Constant(0),
Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
relativeLayout.Children.Add(oneButton,
Constraint.RelativeToView(zeroButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
Constraint.Constant(0),
Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
relativeLayout.Children.Add(twoButton,
Constraint.RelativeToView(oneButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
Constraint.Constant(0),
Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
relativeLayout.Children.Add(fiveButton,
Constraint.RelativeToView(twoButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
Constraint.Constant(0),
Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
Content = relativeLayout;
Padding = new Thickness(0, 20);
Title = $"Button Page on a {Device.Idiom}";
}
}
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new ButtonPage());
}
}
public class StyledButton : Button
{
public StyledButton()
{
TextColor = Color.Black;
HeightRequest = 60;
BackgroundColor = Color.FromHex("2D7BF7");
HorizontalOptions = LayoutOptions.FillAndExpand;
VerticalOptions = LayoutOptions.CenterAndExpand;
}
}
}
平板电脑屏幕截图
手机屏幕截图
关于c# - 如何在充满屏幕的 iPhone 和比充满一半屏幕的 iPhone 更大的 iPhone 上实现四个间隔按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45448038/