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
0
votes
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: