Xamarin 将图像添加到导航栏答案

【问题标题】：Xamarin Add image to navigation barXamarin 将图像添加到导航栏
【发布时间】：2022-01-30 19:27:30
【问题描述】：

我有问题。我用 Shell 创建了一个主详细信息页面。但是现在我想向导航栏添加一个图像，所以要明确一点：Image... Not an Icon

这是我现在的代码：

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp"
       x:Class="MyApp.SideMenuItems" BackgroundColor="#212121"
       FlyoutBackgroundColor="#212121">

    <Shell.FlyoutHeader>
        <local:SideMenuHeader />
    </Shell.FlyoutHeader>

    <Shell.ItemTemplate>
        <DataTemplate>
            <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="30, 15, 0, 15">
                <Image Source="{Binding Icon}" HeightRequest="35" />
                <Label Text="{Binding Title}" TextColor="White" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" />
            </StackLayout>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem Title="SideNav"
                Shell.TabBarIsVisible="False"
                FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Home" Icon="Home_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Search" Icon="Search_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Messages" Icon="Chats_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Favorites" Icon="Favorites_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Settings" Icon="Settings_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>
</Shell>

如何将图片添加到顶部导航栏的中心？

我试过了：

<Shell.TitleView>
    <Image Source="Title_Dark.png" HeightRequest="30" VerticalOptions="CenterAndExpand" />
</Shell.TitleView>

但屏幕上没有图像？

【问题讨论】：

标签： xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

如果你在 shell 的导航栏中显示视图，你将以下代码添加到 HomePage ComtentPage。

<ContentPage ...>
<Shell.TitleView>
    <Image Source="xamarin_logo.png"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
</Shell.TitleView>
...

Shell 类定义 View 类型的 TitleView 附加属性，使任何 Xamarin.Forms 视图都可以显示在导航栏中。

虽然此属性可以设置在子类 Shell 对象上，但也可以设置在任何想要在导航栏中显示视图的页面上。

更详细的信息，你可以看看：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration

更新： 如果你想改变导航栏的高度大小，你可以在Android项目的style.xml文件中调用android:actionBarSize。

<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from https://aka.ms/material-colors -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>



<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
<item name="android:actionBarSize">250dp</item>
</style>



<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>

【讨论】：

我该如何设置高度... HeightRequest 不起作用
太棒了！这正是我一直在寻找的。多亏了你的 gif，我学到了新东西。

【解决方案2】：

我还没有测试过，但是你应该可以在 XAML 中使用 TitleView 和 Shell，所以在此处添加它。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

【讨论】：

@A.Vreeswijk 我建议在 ContentPage 上尝试一下。
但它不是 NavigationPage，它是一个 Shell（主从页面）。 ContentPage中没有TitleView，只有NavigationPage中

【解决方案3】：

一般情况下，我将导航栏显示设置为 false，并创建自己的导航栏视图作为 contentview。所以你可以随心所欲地定制它

【讨论】：