Xamarin iOS 工具栏背景图片答案

【问题标题】：Xamarin iOS toolbar background imageXamarin iOS 工具栏背景图片
【发布时间】：2020-05-04 04:39:28
【问题描述】：

我需要将图像作为背景放在 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 中的工具栏图像？

【问题讨论】：

标签： ios xamarin xamarin.forms xamarin.ios

【解决方案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>
....

【讨论】：

这是我刚才在主题中描述的第二种方式。它只覆盖了大约 70% 的工具栏。

【解决方案2】：

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

【讨论】：