如何在 .NET MAUI 中动态地将 iOS 和 Android 上的标题 (ContentPage) 居中？

Question

对于iOS，标题已经显示在中间，但是对于Android，它默认显示在左侧。我希望标题集中在两个平台上。为了实现这一目标，我使用了 Shell.TitleView 和 Android 版 OnPlatform，但这种方法不是动态的 — 我仍然必须为每个页面静态设置值。由于该项目有很多页面，这实际上不太可行。我可以使用其他更具动态性的方法吗？

这是Xaml代码

<Shell.TitleView>
        <OnPlatform x:TypeArguments="View">
        <On Platform="Android">
        <Grid VerticalOptions="Center" HorizontalOptions="FillAndExpand"
            ColumnDefinitions=".5*, .5*" Padding="0,0,15,0">
            <!-- Title Label -->
            <Label Grid.Column="0" Text="Sign Up" 
                TextColor="White" 
                HorizontalOptions="End" 
                FontFamily="poppins500" 
                FontSize="16"
               />
        </Grid>
        </On>
        </OnPlatform>
    </Shell.TitleView>

Answer 1

这需要根据您的需求进行更新

创建一个

BaseContentPage

，您现在可以在其中创建

TitleView

，如果您使用的是shell，则需要保留它并删除导航页面，反之亦然，但我将为稍后遇到此问题的人添加两者：

<?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"
             x:Name="this"
             x:Class="Sample.BaseContentPage">
    <Shell.TitleView>
        <Grid>
            <Label TextColor="Green" Text="{Binding Title,Source={x:Reference this}}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        </Grid>
    </Shell.TitleView>
    <NavigationPage.TitleView>
        <Grid>
            <Label TextColor="Green" Text="{Binding Title, Source={x:Reference this}}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        </Grid>
    </NavigationPage.TitleView>
</ContentPage>

您需要对标题标签进行的任何 UI 更改都需要在

BaseContentPage

中进行。

完成此操作后，您可以在任意数量的页面中使用它，您所要做的就是将

BaseContentPage

设置为基类，设置您需要在其中使用它的新页面的

Title

和 Viola！

用法看起来像这样：

<?xml version="1.0" encoding="utf-8" ?>
<pages:BaseContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Sample"
             Title="This is a centered title"
             x:Class="Sample.MainPage">
        .
        .
        .
</pages:BaseContentPage>

xaml.cs

public partial class MainPage : BaseContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

这就是它在两种设备上的外观：

iOS	安卓

如果您有任何疑问，请告诉我