Posted on Leave a comment

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">
                                <Image.Triggers>
                                    <DataTrigger TargetType="Image" Binding="{Binding Category}" Value="ID Number">
                                        <Setter Property="Source" Value="id.png" />
                                    </DataTrigger>
                                    
                                     <DataTrigger TargetType="Image" Binding="{Binding Category}" Value="Tax Identification Number">              
                                        <Setter Property="Source" Value="tax.png" />
                                    </DataTrigger>

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

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..