Question

我想在导航栏中间添加一个徽标，如下所示：

<ContentPage.ToolbarItems>
   <ToolbarItem  Icon="logo.png" Activated="RefButtonClicked"></ToolbarItem>
</ContentPage.ToolbarItems>

我也试过这个：

var cancelItem = new ToolbarItem
{
    Text = "Cancel",
    Icon = "tabalilogo.png",
    Order = ToolbarItemOrder.Secondary
};

我尝试的所有内容都将徽标放在导航栏的右侧。我该如何居中呢？

Answer 1

最近更新到xamarin表格3.2后，可以使用标题栏属性自定义标题栏。

     <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>
....

有关更多详细信息，https://blog.xamarin.com/xamarin-forms-3-2-0-released-going-big-with-little-things/

Answer 2

我不确定是否可以使用现有工具栏实现，但我有类似的要求，我无法弄清楚如何在导航页面上使用xamarin表单工具栏。因此我决定使用模态页面，并使用下面的代码行禁用后面代码中的导航页面。

NavigationPage.SetHasNavigationBar(this, false);

我正在使用xaml，我使用absolutelayout创建了一个自定义导航器，如下所示

<AbsoluteLayout x:Name="slToolbar"  Grid.Row="0" >
        <Button x:Name="Cancel" BackgroundColor="#ADD8E6" Image="cancel.png" Command="{Binding CancelClick}"  AbsoluteLayout.LayoutFlags="PositionProportional">
          <AbsoluteLayout.LayoutBounds>
            <OnPlatform x:TypeArguments="Rectangle" iOS="0, .5, 36, 36" Android="0, .5, 36, 36" WinPhone="0, .5, 50, 50" />
          </AbsoluteLayout.LayoutBounds>
        </Button>


        <StackLayout Orientation="Horizontal"  AbsoluteLayout.LayoutFlags="PositionProportional">
           <AbsoluteLayout.LayoutBounds>
            <OnPlatform x:TypeArguments="Rectangle" iOS="1,.5,110,50" Android="1,.5,50,36" WinPhone="1,.5,110,50" />
          </AbsoluteLayout.LayoutBounds>


          <ContentView >
            <OnPlatform x:TypeArguments="View">
              <OnPlatform.iOS>
                <Button   x:Name="NewIOS"  BackgroundColor="#ADD8E6" Image="ic_add.png" Command="{Binding AddNew}"  ></Button>
              </OnPlatform.iOS>
              <OnPlatform.WinPhone>
                <Button   x:Name="NewWP"  BackgroundColor="#ADD8E6"  Command="{Binding AddNew}"  Image="ic_add.png"/>
              </OnPlatform.WinPhone>
            </OnPlatform>
          </ContentView>


          <Button   x:Name="btnSave"  BackgroundColor="#ADD8E6" Image="check.png" Command="{Binding SaveClick}"   HorizontalOptions="End" ></Button>
        </StackLayout>
      </AbsoluteLayout>

此代码将生成如下所示的内容。我在角落里有图标但肯定可以放在任何地方。我使用取消图标而不是后退按钮。当然，在这种情况下你需要处理后退按钮（取消按钮）点击你自己。下面的截图来自uwp应用程序但是在android和ios上我得到了类似的结果。

在导航栏中间添加徽标？

2 个答案: