Integrate your Current Xamarin App with a Toggling Tab with Triggers

Setting up the tabs icons become so easy nowadays with the implementation and the editing of a few smalls code lines in the app under the Xamarin.Forms environment. For this, all we need to do some small settings in the icon property of the application to the path of an image, like this:

<Tab Title=”Browse” Icon=”tab_feed.png”>

While for the better performance of the tabs and fonts in the application using the Xamarin.Forms platform you can use the FontImageSource to add scalable vector graphics in your icons. As well as, with this, you can also avoid all such hassles from the images which are resolution-dependent.

Once you are done with the icon selection process, it’s the time to choose the .tff file of the project to add and use the custom font we just need to embed a copy of all the local assets in the project to make it accessible from the shared code of the Xamarin.Forms.

Both iOS and Android have their own different ways to reference the embedded code, hence, in order to abstract these differences and finely access the font resource consistently from XAML, we must use the magic of On-platform in the app dictionary using the code below:

<Application.Resources>

   <ResourceDictionary>

       <OnPlatform x:TypeArguments=”x:String” x:Key=”FontAwesomeSolid”>

           <On Platform=”iOS” Value=”FontAwesome5Free-Solid”/>

           <On Platform=”Android” Value=”fa-solid-900.ttf#Solid”/>

       </OnPlatform>

       <OnPlatform x:TypeArguments=”x:String” x:Key=”FontAwesomeRegular”>

           <On Platform=”iOS” Value=”FontAwesome5Free-Regular”/>

           <On Platform=”Android” Value=”fa-regular-400.ttf#Regular”/>

       </OnPlatform>

   </ResourceDictionary>

</Application.Resources>

While, below is the example code, which is helpful to set the StaticResource for the font on the Tab Icon using the FontImageSource as:

<Tab Title=”Browse”>

<Tab.Icon>

<FontImageSource FontFamily=”{StaticResource FontAwesomeRegular}” Glyph=”&#xf004;”/>

</Tab.Icon>

</Tab>

<Tab Title=”Browse”>

<Tab.Icon>

<FontImageSource FontFamily=”{StaticResource FontAwesomeRegular}” Glyph=”&#xf004;”/>

</Tab.Icon>

</Tab>

Meanwhile, have you ever think about what we can do when we are looking to switch between the icons based on the selected tabs? Well, there are two options to heal the issue the first one is to write some tricky logic code to create a function in the app to change the icon on an event. We can do this easily with the implementation of StyleTriggers entirely in XAML.

Firstly let’s take a little intro about Triggers:

Triggers make you enable to set a property single or in a group as well which is based on the value of other properties of the app.

The property trigger is the simplest and the most common form of the trigger which is well supported by any forms elements which have a trigger property element in it.

To understand the functionality of trigger, here is the basic example which will work to change the background of entry on an event when it has focus: See the code below:

<Entry Placeholder=”Username”>

    <Entry.Triggers>

        <Trigger TargetType=”Entry” Property=”IsFocused” Value=”True”>

            <Setter Property=”BackgroundColor” Value=”Yellow” />

        </Trigger>

    </Entry.Triggers>

</Entry> <span data-ccp-props=”{“201341983″:0,”335559739″:160,”335559740″:259}”> </span>

Styling the Trigger:

As the code elements, a few controls are also available which do not have any trigger property and hence they are not able to support the triggers directly. Well, all is not ended up here as still, you can simply have a trigger within a style. These style triggers are considering a worthy way to dynamically change to the visual appearance of the control based on the value of the property trigger. The Styling trigger is very similar to the property trigger while on the other side it can also be applied to any control which has a styling property such as a Tab. See the code to understand it in a well way:

<Style TargetType=”Tab” x:Key=”BrowseTab”>

    <Style.Triggers>

        <Trigger TargetType=”Tab”

                Property=”IsChecked” Value=”False”>

            <Setter Property=”Icon” >

                <Setter.Value>

                    <FontImageSource FontFamily=”{StaticResource FontAwesomeRegular}” Glyph=”&#xf24d;”/>

                </Setter.Value>

            </Setter>

        </Trigger>

        <Trigger TargetType=”Tab”

                Property=”IsChecked” Value=”True”>

            <Setter Property=”Icon” >

                <Setter.Value>

                    <FontImageSource FontFamily=”{StaticResource FontAwesomeSolid}” Glyph=”&#xf24d;”/>

                </Setter.Value>

            </Setter>

        </Trigger>

    </Style.Triggers>

</Style>

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments