XAML 在.NET MAUI中将按钮填充设置为屏幕的25%

ma8fv8wu 于 2023-04-03 发布在 .NET

关注(0)|答案(1)|浏览(247)

我希望这些按钮中的每一个都占屏幕的25%。我尝试了不同的方法，但我似乎不能让它工作。有人能告诉我我做错了什么吗？

启动页面.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();
    }
}

xaml

来源：https://stackoverflow.com/questions/75899479/setting-padding-of-button-25-of-the-screen-in-net-maui

1条答案

按热度按时间

w3nuxt5m1#

在MAUI中，你不能以百分比的形式设置视图元素的高度。但是，你可以做的是用<Grid>替换<VerticalStackLayout>，并指定四个大小相等的行，例如：

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

赞(0）回复(0）举报 2023-04-03

我来回答

XAML 在.NET MAUI中将按钮填充设置为屏幕的25%

1条答案

相关问题

热门标签

最新问答