Share via

TabbedPage Icons on Windows

  • Article

This Universal Windows Platform platform-specific enables page icons to be displayed on a TabbedPage toolbar, and provides the ability to optionally specify the icon size. It's consumed in XAML by setting the TabbedPage.HeaderIconsEnabled attached property to true, and by optionally setting the TabbedPage.HeaderIconsSize attached property to a Size value:

<TabbedPage ...
            xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core"
            windows:TabbedPage.HeaderIconsEnabled="true">
    <windows:TabbedPage.HeaderIconsSize>
        <Size>
            <x:Arguments>
                <x:Double>24</x:Double>
                <x:Double>24</x:Double>
            </x:Arguments>
        </Size>
    </windows:TabbedPage.HeaderIconsSize>
    <ContentPage Title="Todo" IconImageSource="todo.png">
        ...
    </ContentPage>
    <ContentPage Title="Reminders" IconImageSource="reminders.png">
        ...
    </ContentPage>
    <ContentPage Title="Contacts" IconImageSource="contacts.png">
        ...
    </ContentPage>
</TabbedPage>

Alternatively, it can be consumed from C# using the fluent API:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.WindowsSpecific;
...

public class WindowsTabbedPageIconsCS : Xamarin.Forms.TabbedPage
{
  public WindowsTabbedPageIconsCS()
  {
    On<Windows>().SetHeaderIconsEnabled(true);
    On<Windows>().SetHeaderIconsSize(new Size(24, 24));

    Children.Add(new ContentPage { Title = "Todo", IconImageSource = "todo.png" });
    Children.Add(new ContentPage { Title = "Reminders", IconImageSource = "reminders.png" });
    Children.Add(new ContentPage { Title = "Contacts", IconImageSource = "contacts.png" });
  }
}

The TabbedPage.On<Windows> method specifies that this platform-specific will only run on the Universal Windows Platform. The TabbedPage.SetHeaderIconsEnabled method, in the Xamarin.Forms.PlatformConfiguration.WindowsSpecific namespace, is used to turn header icons on or off. The TabbedPage.SetHeaderIconsSize method optionally specifies the header icon size with a Size value.

In addition, the TabbedPage class in the Xamarin.Forms.PlatformConfiguration.WindowsSpecific namespace also has a EnableHeaderIcons method that enables header icons, a DisableHeaderIcons method that disables header icons, and a IsHeaderIconsEnabled method that returns a boolean value that indicates whether header icons are enabled.

The result is that page icons can be displayed on a TabbedPage toolbar, with the icon size being optionally set to a desired size:

TabbedPage icons enabled platform-specific