Tag: XAML

Posted on by — 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..

Posted on by — 4 Comments

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

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

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

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

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

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

xmlns:controls="clr-namespace:project.Controls"

And then just use

<controls:NavigationBar />

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