Xamarin Forms - Actionbar/toolbar with templated button?

Question

I have a Xamarin Forms project in which I want to have a custom button in the actionbar/toolbar (at the top of each page) that is a coloured circle with a number in. From what I can see, I can add either an image or text, but not both. Is there a way of doing this?

Answer 1

You can use Title View to customize anything. https://gist.github.com/juucustodio/1ae0e126c13a577c8c6da8ba135a9703 https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/navigation-titleview/

Answer 2

If you want to add a text or an image, you can use ToolbarItem :

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Example Item"
                 IconImageSource="example_icon.png"
                 Order="Primary"
                 Priority="0" />
</ContentPage.ToolbarItems> 

If you want to add your custom button, you can customize navigationbar by TitleView:

<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal" HorizontalOptions="End">
        <Button WidthRequest="40" HeightRequest="40" CornerRadius="20" Text="2" VerticalOptions="Center" TextColor="Red" BackgroundColor="Green"/>
    </StackLayout>
</NavigationPage.TitleView>

<ContentPage.Content>
    <StackLayout>
        <Label Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage.Content>

Here is the result: