英文:
Setting padding of button 25% of the screen in .NET MAUI
问题
以下是代码部分的翻译:
Launchpage.xaml
I want each one of these buttons to take 25% of the screen. I tried different approaches, but I cannot seem to get it working. Can anyone tell me what I am doing wrong?
Launchpage.xaml.cs
namespace MauiApp1.Views;
public partial class LaunchPage : ContentPage
{
public double quarterScreensize = DeviceDisplay.MainDisplayInfo.Height / 4;
public LaunchPage()
{
InitializeComponent();
}
}
英文:
I want each one of these buttons to take 25% of the screen. I tried different approaches, but I cannot seem to get it working. Can anyone tell me what I am doing wrong?
Launchpage.xaml
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"
x:Class="MauiApp1.Views.LaunchPage"
Title="LaunchPage"
BindingContext="{x:Reference Name=This}">
<VerticalStackLayout>
<VerticalStackLayout.Resources>
<sys:Double x:Key="quarterScreensize"></sys:Double>
<Thickness x:Key="buttonPadding" Top="0" Bottom="{Binding quarterScreensize}" Left="0" Right="0"/>
</VerticalStackLayout.Resources>
<Button Text="Schematics" Padding="0,0,0,{Binding quarterScreensize}">
</Button>
<Button Text="Exercise list" Padding="{StaticResource buttonPadding}">
</Button>
<Button Text="Options" Padding="{StaticResource buttonPadding}">
</Button>
<Button Text="No idea yet" Padding="{StaticResource buttonPadding}">
</Button>
</VerticalStackLayout>
</ContentPage>
Launchpage.xaml.cs
namespace MauiApp1.Views;
public partial class LaunchPage : ContentPage
{
public double quarterScreensize = DeviceDisplay.MainDisplayInfo.Height / 4;
public LaunchPage()
{
InitializeComponent();
}
}
答案1
得分: 1
无法在 MAUI 中以百分比设置 View 元素的高度。相反,你可以将 <VerticalStackLayout>
替换为 <Grid>
,并指定四个大小相等的行,例如:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"
x:Class="MauiApp1.Views.LaunchPage"
Title="LaunchPage"
BindingContext="{x:Reference Name=This}">
<Grid
VerticalOptions="Fill"
RowDefinitions="*,*,*,*">
<Button Text="Schematics"
Grid.Row="0" />
<Button Text="Exercise list"
Grid.Row="1" />
<Button Text="Options"
Grid Row="2" />
<Button Text="No idea yet"
Grid.Row="3" />
</Grid>
</ContentPage>
同时,使用这种方法在代码后台不需要计算任何内容,因此可以删除 quarterScreenSize
:
namespace MauiApp1.Views;
public partial class LaunchPage : ContentPage
{
public LaunchPage()
{
InitializeComponent();
}
}
英文:
You cannot set heights of View elements in percentages in MAUI. What you could do instead, however, is replace the <VerticalStackLayout>
with a <Grid>
and specify four equally sized rows, like this for example:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"
x:Class="MauiApp1.Views.LaunchPage"
Title="LaunchPage"
BindingContext="{x:Reference Name=This}">
<Grid
VerticalOptions="Fill"
RowDefinitions="*,*,*,*">
<Button Text="Schematics"
Grid.Row="0" />
<Button Text="Exercise list"
Grid.Row="1" />
<Button Text="Options"
Grid Row="2" />
<Button Text="No idea yet"
Grid.Row="3" />
</Grid>
</ContentPage>
You also don't need to calculate anything in the code-behind with this approach, so you can remove the quarterScreenSize
:
namespace MauiApp1.Views;
public partial class LaunchPage : ContentPage
{
public LaunchPage()
{
InitializeComponent();
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论