0
votes

l am trying to add a logo and a search icon to the master detail page template in xamrin forms. l used icon="hamburger.png" in the master page to add a hamburger icon but how do l add a logo and a search icon on the same navigation

2
Do you want to add search icon in toolbar?Anand

2 Answers

0
votes

If you mean to add a logo in the toolbar, then you should try Navigation.Titleview

<ContentPage>
    <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
            <Image Source="iconXamagon.png">               
            </Image>           
        </StackLayout>
    </NavigationPage.TitleView>
    ...
</ContentPage>

For adding a search icon in the toolbar

<ContentPage.ToolbarItems>
    <ToolbarItem Name="Search" Order="Primary"  Icon="Search.png" Priority="0" Command="{Binding SearchCommand}" />
</ContentPage.ToolbarItems>
0
votes

According to your description, I guess that you have added hamburger icon for master page, now you wan to add another two icons for Navigation, am I right?

if yes, you can take a the following code, I add another icon for Navigation.

Firstly, I create new class named MasterPageItem

public class MasterPageItem
{
    public string Title { get; set; }

    public string IconSource { get; set; }

    public Type TargetType { get; set; }
}

Here is the master page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="using:MasterDetailPageNavigation"
         x:Class="MasterDetailPageNavigation.MasterPage"
         Padding="0,40,0,0"
         Icon="hamburger.png"
         Title="Personal Organiser" >
<StackLayout>
    <ListView x:Name="listView" x:FieldModifier="public">
       <ListView.ItemsSource>
            <x:Array Type="{x:Type local:MasterPageItem}">
                <local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                <local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                <local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding IconSource}" />
                        <Label Grid.Column="1" Text="{Binding Title}" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

For detailed info, you can take a look the following article:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/master-detail-page