.NET MAUI：自定义 Shell TitleView 并绑定到当前页面标题答案

【问题标题】：.NET MAUI: Customize Shell TitleView and bind to current page title.NET MAUI：自定义 Shell TitleView 并绑定到当前页面标题
【发布时间】：2023-01-30 15:12:55
【问题描述】：

我想用我自己的自定义布局替换默认的 Shell 标头，如下所示：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyNamespace.App.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyNamespace.App"
    xmlns:pages="clr-namespace:MyNamespace.App.Pages"
    BindingContext="{x:Static local:MainView.Instance}"
    Shell.FlyoutBehavior="{Binding ShellFlyoutType}"
    x:Name="shellMain">

    <Shell.TitleView>
        <Grid ColumnDefinitions="*,200">
            <Label BindingContext="{x:Reference shellMain}" Text="{Binding Path=Title, Mode=OneWay}" FontSize="Large" TextColor="White" />
            <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" />
        </Grid>
    </Shell.TitleView>
    
    
    <ShellContent
        Title=" Login"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="login" FlyoutItemIsVisible="False" />

    
    <ShellContent Title="Dashboard" 
                      ContentTemplate="{DataTemplate pages:DashboardPage}"
                      Route="dashboard" />
</Shell>

我无法绑定当前页面标题。我的 AppShell.xaml Shell 声明为 <Shell ... x:Name="shellMain">

我也确实尝试绑定到“CurrentPage.Title” 但是页面标题没有显示。

【问题讨论】：

向我们展示整个 XAML。我担心你如何使用它。直接问，这个titleview是在你的页面里，还是在你的shell里？
它在我的壳里。我使用默认模板中的 AppShell.xaml。

标签： .net maui .net-maui.shell

【解决方案1】：

iOS 可以重现此问题。作为解决方法，您可以简单地将 Grid 放在 StackLayout 中，如以下代码：

在 AppShell.xaml 中：

<Shell
    ....
    Title="MyTitle"
    x:Name="shellMain">

<Shell.TitleView>
    <StackLayout>
        <Grid ColumnDefinitions="*,200">
            <Label BindingContext="{x:Reference shellMain}" Text="{Binding Path=Title, Mode=OneWay}" FontSize="Large" TextColor="White" />
            <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" />
        </Grid>
    </StackLayout>
</Shell.TitleView>

您也可以使用利润或者填充.

希望对你有效。

【讨论】：