Xamarin Forms Add Image with Text into Navigation Page Title

2
votes

Does anyone know if there is a way to add an image into the title bar? So im wanting it to show the image right next to the normal title bar text (it's a logo). I can only seem to find a way to show text and i was hoping to steer clear of custom renderers unless it was worst case scenario.

This is currently what I have:

enter image description here

Im wanting to put a little logo directly to the left of the "News Feed" text.

2
xamarinxamarin.formsuinavigationbar
usually it should show you icon there. Am I missing something? – Yuri S
Hi Yuri, have edited my post to better explain the problem including a screenshot of what i currently have. – Matt
Are you using Master/Details page? Can you provide the code how you create the page? – Yuri S
If you figure this out please let us know - I am looking to do the same. Thanks. – Kyle
Hi Kyle, will do, you should up-vote the question to give it a high priority. – Matt

2 Answers

2
votes

I use either of these two ways in order to achieve that.

1.- Using NavigationPage.SetTitleIconImageSource as Isuru answer.

2.- Using NavigationPage.TitleView(see sample below)

<NavigationPage.TitleView>
    <Grid>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="25" />
              <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Image Margin="10, 0, 0, 0" Source="{Binding TitleImage}" HorizontalOptions="CenterAndExpand"  HeightRequest="25" WidthRequest="25" MinimumHeightRequest="25" MinimumWidthRequest="25"  Grid.Row="0" Grid.Column="0"  />
          <Label Text="{Binding Title}" FontSize="Title" Grid.Row="0" Grid.Column="1" TextColor="White"/>
    </Grid>
</NavigationPage.TitleView>

TitleImage and Title are BindingContext model properties.

1
votes

Use 'SetTitleIcon' method in Xamarin.Forms.NavigationPage class.

public class MyPage : NavigationPage
{
    public MyPage ()
    {
        var myContentPage = new MyContentPage (Color.White);
        this.Push (myContentPage);

        var s = "icon-45.png";
        NavigationPage.SetTitleIcon (myContentPage, s);
    }
}

for more detail go to this