如何更改MAUI Shell后退按钮的大小？为了提高戴着手套使用平板电脑时的使用效果

Question

我正在为工程师开发 MAUI 应用程序的团队工作。我们的许多用户建议放大后退按钮，以便更好地戴着手套使用。

图像显示我在 AppShell.xaml 中设置 IconOverride，对后退按钮图标或其大小没有影响

在我的 AppShell.xaml 中，我尝试使用 Shell.BackButtonBehaviour 和 IconOverride 希望使用自定义按钮并调整其大小，但没有成功。代码如下

<Shell
x:Class="Veridian.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Veridian.Pages">

<Shell.BackButtonBehavior>
    <BackButtonBehavior>
        <BackButtonBehavior.IconOverride>
            <FontImageSource
               FontFamily="FAS"
               Glyph="{StaticResource IconCamera}"
               Size="50"
               Color="#273743" />
        </BackButtonBehavior.IconOverride>
    </BackButtonBehavior>
</Shell.BackButtonBehavior>

我仅在特定 ContentPage .xaml 文件中设置 Shell.BackButtonBehaviour 和 IconOverride 时才设法更改图标。图标变成了我的字体很棒的图标，但大小似乎无法调整。

我尝试使用上面的代码为整个应用程序设置一个新的后退按钮图标。我认为这样做可以让我更好地控制后退按钮的大小。

这不会导致后退按钮放置在 AppShell.xaml 中时发生任何更改，但在应用于特定 ContentPage 时确实会更改后退按钮。图标改变了，但大小没有改变。

有人可以帮忙吗？

Android 是我们的主要使用平台，所以在 Android 上实现这一点就太棒了！

提前谢谢您 汤姆:)

Answer 1

用外壳改变后退按钮确实很痛苦，但我设法获得了更大尺寸的替换图像。使用以下内容作为入门指南。

使用 XAML 和 .cs 代码隐藏创建一个名为

BackButtonControl

的自定义控件。

后退按钮控件.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Shared_Library.Controls.BackButtonControl">

    <HorizontalStackLayout VerticalOptions="Fill"
                           HorizontalOptions="StartAndExpand">
        <Grid HorizontalOptions="FillAndExpand"
              ColumnDefinitions="2*,*,2*">
            <Grid.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS" Value="5,10,0,10" />
                    <On Platform="Android" Value="-20,15,0,15" />
                </OnPlatform>
            </Grid.Margin>

            <ImageButton Grid.Column="0"
                         x:Name="BackButton"
                         Source="back_button.png"
                         Command="{Binding BackButtonPressedCommand}"
                         Aspect="AspectFit"
                         HorizontalOptions="Start">
            </ImageButton>
        </Grid>
    </HorizontalStackLayout>
</ContentView>

后退按钮控件.xaml.cs

namespace Shared_Library.Controls;

public partial class BackButtonControl : ContentView
{
    public BackButtonControl()
    {
        InitializeComponent();
        BindingContext = this;
    }

    private Command _backButtonPressedCommand;
    public Command BackButtonPressedCommand => _backButtonPressedCommand ??= new Command(async () => await Shell.Current.GoToAsync("..", true));
}

然后在您想要替换标准后退按钮的页面中：

<Shell.BackButtonBehavior>
    <BackButtonBehavior IsVisible="False" />
</Shell.BackButtonBehavior>

<Shell.TitleView>
    <sc:BlankBackButtonControl  />
</Shell.TitleView>

我还需要一个空白的后退按钮控件（无图像，无命令），用于不需要后退按钮的页面。

我不记得为什么我没有直接把它放在

AppShell.xaml

中，但很确定我尝试过，但由于某种原因它不起作用。可能是因为新的后退按钮出现在我不需要的页面上。

希望这有帮助。