设置在.NET MAUI中按钮的屏幕内边距为屏幕的25%。

huangapple go评论63阅读模式
英文:

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();
    }
}

huangapple
  • 本文由 发表于 2023年3月31日 22:08:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75899479.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定