Category: Xamarin

Posted on by — Leave a comment

Override hardware back button Xamarin.Forms

Some phones support the hardware back button and this may disturb the designed navigation experience that has been implemented in the application. You can override this behavior on Android (iOS does not support a hardware back button) with the following code that has to be placed in the MainActivity.cs of your Android root folder after onCreate method.

 public override void OnBackPressed()
        {
           return;
        }

The result should look like below. After this action the hardware back button will have no effect and the whole navigation can be performed through the application.

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 — Leave a comment

Send signals between Mainpage.xaml.cs and Viewmodel – Xamarin.Forms

In a recent application I wanted to inform a Listview with a specific ItemTemplate to update its data source on back button with a synchronous data fetching mechanism(so this was not automatic).

So the goal was to send a “signal” to my Viewmodel when the page was loaded to perform an action. This can be done using MessageCenter with Xamarin.Forms.

The solution was to send an update signal every time OnAppearing() method of the MainPage.xaml was hit and inform the ViewModel to perfom an action.

 protected override void OnAppearing()
        {
            MessagingCenter.Send<nameofapp.App>((nameofapp.App)Xamarin.Forms.Application.Current, "update");
        }

Then perform action on MainPageViewModel

public MainPageViewModel()
        {
           
            MessagingCenter.Subscribe<nameofapp.App>((nameofapp.App)Application.Current, "update", (sender) => {
                var result = viewmodel.fetchData();
            });


        }

 

 

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.