How do I set the icon property in Prism for a TabbedPage in Prism for Xamarin Forms?

790 Views Asked by At

I'm extending the prism sample here to also include icons, and some additional navigation. My goal is to add something like the code below (where the icon information is) and am unsure how to add that to either my view, or the view model correctly.

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WebOfTrust.Views"
             x:Class="WebOfTrust.Views.Client.WebOfTrustMainPage"
             Title="{Binding Title}">
    <TabbedPage.Children>

      <!-- HOW DO I SET AN ICON FOR THESE? Either in the View or Model? --> 
     <NavigationPage Title="Contacts" >
        <x:Arguments> 
            <local:Client.MyPeople.MyPeopleList/>  
        </x:Arguments> 
    </NavigationPage> 

    <NavigationPage Title="Places" Icon="Image7DoesntWork.png">
        <x:Arguments>
             <local:Client.MyPlaces.MyPlacesList/>    
        </x:Arguments>
    </NavigationPage>

    <NavigationPage Title="Docs" Icon="Image7DoesntWork.png">
        <x:Arguments>
           <local:Client.MyWallet.WalletCards/>  
        </x:Arguments>
    </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

What normally works

I normally have a navigation page in the view where I specify the icon below.

<NavigationPage Title="Trust Anchor List">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <local:Client.TrustAnchorList />
            </x:Arguments>
 </NavigationPage>

Question

What is the right way to set an icon in either the view or the model when using Prism?

enter image description here

1

There are 1 best solutions below

6
Ali123 On

just add the icon attribute in the children of the tabbed page. It works fine for me

<local:ContactUs Icon="Icons/History_Tab.png" Title="{Translate:TranslateExtension Text=NewMessage}" />

my icons are under a folder in the resources but you can put them anywhere.