Add logo at the middle of Navigation bar? - xamarin

Question

I want to add a logo in the middle of the navigation bar like this:
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logo.png" Activated="RefButtonClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
I also tried this:
var cancelItem = new ToolbarItem
{
Text = "Cancel",
Icon = "tabalilogo.png",
Order = ToolbarItemOrder.Secondary
};
Everything I tried positioned the logo on the right side of the navigation bar. How can I center it?

Answer 1

Recently After Updating to xamarin forms 3.2, You can customize the title bar using title bar property.
<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>
....
For more details https://blog.xamarin.com/xamarin-forms-3-2-0-released-going-big-with-little-things/

Answer 2

I am not sure if that can be implemented using existing toolbar but I had similar requirement and I couldn't figure out how to achieve using the xamarin forms toolbar on a navigation page. therefore I decided to use a modal page and I disabled the navigation page in the code behind with the line of code below.
NavigationPage.SetHasNavigationBar(this, false);
I am using xaml and I created a custom navigator with absolutelayout as below
<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>
this code will produce something like below. I have the icons in the corners but surely they can be placed anywhere. I used cancel icon instead of back button. Of course, in this case you need to handle back button(cancel button) click yourself. screenshot below is from uwp application but on android and ios I get similar results.