Xamarin iOS工具栏背景图片

Question

我需要将图像作为背景放在带有主详细信息页面和导航栏的iOS项目的Xamarin Forms中的工具栏中（要在iOS中具有软件后退按钮）。在android上效果很好，但在iOS上还不够好。我在AppDelegate.cs中使用此代码：

UINavigationBar.Appearance.SetBackgroundImage(new UIImage("toolbar_iOS.jpg"), UIBarPosition.Any, UIBarMetrics.Default);

我在这里将图像的图案设为400x125像素（宽度较小-它在右侧显示1个图像，第二个图像的一部分在右侧，更多像素-图像被缩放）。我希望将图像显示为长宽比填充，因为在工具栏正下方的页面上，我具有与图案相同的图像，并且我希望它们的尺寸完全相同以匹配图案。

第二种方法是将图像放在NavigationPage.TitleView的Xamarin.Forms中的堆栈布局中。我可以修改外观，但是图像仅显示在工具栏的大约70％区域中（它绕过了汉堡包图标和状态栏），因此效果不佳。

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Layout.xxx.Views.MainMenuPage"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
             xmlns:pages="clr-namespace:Layout.xxx.Views">
    <MasterDetailPage.Master>
        <pages:MainMenuPageMaster x:Name="MasterPage"/>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <pages:MainMenuPageDetail x:Name="DetailPage">
                    <NavigationPage.TitleView>
                        <Grid>
                            <ffimageloading:CachedImage Margin="-50,-30,0,0" Grid.Row="0" Source="background.jpg" Aspect="AspectFill" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                            <StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
                                <StackLayout.Margin>
                                    <OnPlatform x:TypeArguments="Thickness" iOS="-35,0,0,0" Android="-60,0,0,0"/>
                                </StackLayout.Margin>
                                <ffimageloadingsvg:SvgCachedImage Margin="0" Source="logo_svg.svg" Aspect="AspectFit" HeightRequest="40" VerticalOptions="Center" HorizontalOptions="Center" />
                            </StackLayout>
                        </Grid>
                    </NavigationPage.TitleView>
                </pages:MainMenuPageDetail>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

负边距无济于事。还有另一种方法可以控制iOS中的工具栏图像吗？

Answer 1

Use this code snippet , may help

<ContentPage>
<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
        <Image Source="iconXamagon.png">
            <Image.GestureRecognizers>
                <Image.TapGestureRecognizer
                    Tapped="HandleTapped" />
            </Image.GestureRecognizers>
        </Image>
        <Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
    </StackLayout>
</NavigationPage.TitleView>
....

Answer 2

如果将页面设置为HasBackButton="False"，则它应该覆盖整个屏幕，只需要您自己实现后退按钮或汉堡包按钮。