ViewModel Image binding based on Condition – XAML

If you want to show a specific image in a Xamarin.Forms app based on a condition, you can Image.Triggers

For example you have an Image element in your XAML and you want to show a different image based on a database query. In order to do that, you should place the pictures that you want to use in the appropriate folders.

  • For iOS the pictures must be located under Resources folder.
  • For Android the pictures should be in Resources/drawable
  • For UWP you must place the pictures in the root directory of the project.
 <Image WidthRequest="80"  Source="{Binding Category}" HeightRequest="80">
                                    <DataTrigger TargetType="Image" Binding="{Binding Category}" Value="ID Number">
                                        <Setter Property="Source" Value="id.png" />
                                     <DataTrigger TargetType="Image" Binding="{Binding Category}" Value="Tax Identification Number">              
                                        <Setter Property="Source" Value="tax.png" />

                                     <DataTrigger TargetType="Image" Binding="{Binding Category}" Value="Other">              
                                        <Setter Property="Source" Value="other.png" />

As a result your image will change upon the value of the Category element. If the Category value would be ID Number then the image should be id.png etc..

Bottom Navigation Bar with Control – Xamarin.Forms

Ever wondered how to create a Bottom Navigation Bar for Xamarin.Forms as it is in the latest Android sdk version? As there is no native control for Xamarin.Forms you could create a custom one with a Control.

First create a Folder and name it Controls and create the control in there.

In your portable class library -> Add New Item -> Content View and name it NavigationBar or something else.


For my purposes I used the following code:

 <Grid   BackgroundColor="Blue" >

                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />

            <StackLayout Orientation="Vertical" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Home.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Home" TextColor="White"  />

            <StackLayout Orientation="Vertical"  Grid.Column="1"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image Source="Pages.png" WidthRequest="30" HeightRequest="30"  />
                <Label Text="Pages" TextColor="White"  />

            <StackLayout Orientation="Vertical"  Grid.Column="2"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Settings.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Settings" TextColor="White" />

In order to use it in your code reference it in your xaml


And then just use

<controls:NavigationBar />

Finally you can use your control and it will look the same in all platforms.