Showing posts with label Xamarin. Show all posts

Dropdown Control In Xamarin.Forms - Part One



Introduction

In this article, we will learn how to create Dropdown in Xamarin.Forms. By default, Android Platform has dropdown called as “Spinner”, but iOS Platform has no dropdown like Android Spinner. In Xamarin.Forms, we have control called as Picker and we all heard about this. We are going to create a custom to achieve, the control like Android Spinner in Xamarin.Forms.

Dropdown in Xamarin.Forms

As per the introduction, we already having a dropdown control called as “Spinner” in Android Platform. Basically Xamarin.Forms control is a wrapper platform specific controls. For Example, Xamarin.Forms Entry is wrapper of EditText in Android and UITextField in iOS. We will go for View Renderer approach to have a new control to wrap a Platform specific control. Click the below link, to know more about view renderer.

Reference

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/view

Without much introduction, we will skip into the coding part of this article.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

  1. Creating new Xamarin.Forms Projects.
  2. Creating a Dropdown view in Xamarin.Forms .NetStandard Project.
  3. Wrapping Spinner for Dropdown control in Android Project.
  4. Implementation of Dropdown & It’s Demo for Android Platform.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Creating a Dropdown view in Xamarin.Forms .NetStandard Project

In this step, we will see how to create a dropdown view with required properties.

  1. Create a class named as “Dropdown” and inherit the Dropdown with “View”. That is Dropdown is child of View.
    public class Dropdown : View
    {
     //...
    }
  2. Then we will create a required bindable properties. First we will see, what are all the properties & events required for dropdown.
    1. ItemsSource – To assign the list of data to be populated in the dropdown.
    2. SelectedIndex – To identify the index of selected values from the ItemsSource.
    3. ItemSelected – Event for performing action when the item selected in the dropdown.
  3. Create a bindable property for the ItemsSource as shown in below.
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
     propertyName: nameof(ItemsSource),
     returnType: typeof(List<string>),
     declaringType: typeof(List<string>),
     defaultValue: null);
    
    public List<string> ItemsSource
    {
     get { return (List<string>)GetValue(ItemsSourceProperty); }
     set { SetValue(ItemsSourceProperty, value); }
    }
  4. Create a bindable property for the SelectedIndex as shown in below.
    public static readonly BindableProperty SelectedIndexProperty = BindableProperty.Create(
     propertyName: nameof(SelectedIndex),
     returnType: typeof(int),
     declaringType: typeof(int),
     defaultValue: -1);
    
    public int SelectedIndex
    {
     get { return (int)GetValue(SelectedIndexProperty); }
     set { SetValue(SelectedIndexProperty, value); }
    }
  5. Create a custom event ItemSelected for dropdown control and invoke the event as shown in below.
    public event EventHandler ItemSelected;
    
    public void OnItemSelected(int pos)
    {
     ItemSelected?.Invoke(this, new ItemSelectedEventArgs() { SelectedIndex = pos });
    }
  6. Here, ItemSelectedEventArgs is a child of EventArgs as shown in below.
    public class ItemSelectedEventArgs : EventArgs
    {
     public int SelectedIndex { get; set; }
    }
Full Code of Dropdown View

Here, we will see the full code for dropdown view.

namespace XF.Ctrls
{
    public class Dropdown : View
    {
        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
            propertyName: nameof(ItemsSource),
            returnType: typeof(List<string>),
            declaringType: typeof(List<string>),
            defaultValue: null);

        public List<string> ItemsSource
        {
            get { return (List<string>)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public static readonly BindableProperty SelectedIndexProperty = BindableProperty.Create(
            propertyName: nameof(SelectedIndex),
            returnType: typeof(int),
            declaringType: typeof(int),
            defaultValue: -1);

        public int SelectedIndex
        {
            get { return (int)GetValue(SelectedIndexProperty); }
            set { SetValue(SelectedIndexProperty, value); }
        }

        public event EventHandler<ItemSelectedEventArgs> ItemSelected;

        public void OnItemSelected(int pos)
        {
            ItemSelected?.Invoke(this, new ItemSelectedEventArgs() { SelectedIndex = pos });
        }
    }

    public class ItemSelectedEventArgs : EventArgs
    {
        public int SelectedIndex { get; set; }
    }
}

Step 3: Wrapping Spinner for Dropdown control in Android Project.

In this step, we will see “How to wrap the Android Spinner Control for Dropdown View”.

  1. Create a class file named as “DropdownRenderer” in your android client project and add View Renderer as shown in below.
    public class DropdownRenderer : ViewRenderer<Dropdown, Spinner>
    {
     Spinner spinner;
     public DropdownRenderer(Context context) : base(context)
     {
    
     } 
     // ...
    }
  2. Then Override the methods “OnElementChanged” and “OnElementPropertyChanged”. OnElementChanged method is triggered on element/control initiation. OnElementPropertyChanged method is called when the element property changes.
  3. Set Native Control to ViewRenderer using SetNativeControl() method in OnElementChanged override method as shown in below.
    protected override void OnElementChanged(ElementChangedEventArgs<Dropdown> e)
    {
     base.OnElementChanged(e);
    
     if (Control == null)
     {
      spinner = new Spinner(Context);
      SetNativeControl(spinner);
     }
     //...
    }
  4. Set Items Source from Xamarin.Forms Dropdown to Android Spinner control using array adapter as shown in below.
    var view = e.NewElement;
    
    ArrayAdapter adapter = new ArrayAdapter(Context, Android.Resource.Layout.SimpleListItem1, view.ItemsSource);
    Control.Adapter = adapter;
    
  5. Set default selection of item from selected index as shown in below.
    if (view.SelectedIndex != -1)
    {
     Control.SetSelection(view.SelectedIndex);
    }
  6. Create an item selected event for spinner and invoke the dropdown event created as shown below
    // ...
    Control.ItemSelected += OnItemSelected;
    // ...
    private void OnItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
    {
     var view = Element;
     if (view != null)
     {
      view.SelectedIndex = e.Position;
      view.OnItemSelected(e.Position);
     }
    }
  7. In the same way, we will assign ItemsSource & SelectedIndex to Android Spinner when the property changes using OnElementPropertyChanged as shown below.
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
     var view = Element;
     if (e.PropertyName == Dropdown.ItemsSourceProperty.PropertyName)
     {
      ArrayAdapter adapter = new ArrayAdapter(Context, Android.Resource.Layout.SimpleListItem1, view.ItemsSource);
      Control.Adapter = adapter;
     }
     if (e.PropertyName == Dropdown.SelectedIndexProperty.PropertyName)
     {
      Control.SetSelection(view.SelectedIndex);
     }
     base.OnElementPropertyChanged(sender, e);
    }
  8. Add Export Renderer above the namespace to link dropdown view in .NetStandard project to Android Client Project. This is very important step for any custom renderer approach.
    [assembly: ExportRenderer(typeof(Dropdown), typeof(DropdownRenderer))]
    namespace XF.Ctrls.Droid
Full Code of Dropdown Renderer

Here, we will see the full code for Dropdown Renderer.

[assembly: ExportRenderer(typeof(Dropdown), typeof(DropdownRenderer))]
namespace XF.Ctrls.Droid
{
    public class DropdownRenderer : ViewRenderer<Dropdown, Spinner>
    {
        Spinner spinner;
        public DropdownRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Dropdown> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                spinner = new Spinner(Context);
                SetNativeControl(spinner);
            }

            if (e.OldElement != null)
            {
                Control.ItemSelected -= OnItemSelected;
            }
            if (e.NewElement != null)
            {
                var view = e.NewElement;

                ArrayAdapter adapter = new ArrayAdapter(Context, Android.Resource.Layout.SimpleListItem1, view.ItemsSource);
                Control.Adapter = adapter;

                if (view.SelectedIndex != -1)
                {
                    Control.SetSelection(view.SelectedIndex);
                }

                Control.ItemSelected += OnItemSelected;
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            var view = Element;
            if (e.PropertyName == Dropdown.ItemsSourceProperty.PropertyName)
            {
                ArrayAdapter adapter = new ArrayAdapter(Context, Android.Resource.Layout.SimpleListItem1, view.ItemsSource);
                Control.Adapter = adapter;
            }
            if (e.PropertyName == Dropdown.SelectedIndexProperty.PropertyName)
            {
                Control.SetSelection(view.SelectedIndex);
            }
            base.OnElementPropertyChanged(sender, e);
        }

        private void OnItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
        {
            var view = Element;
            if (view != null)
            {
                view.SelectedIndex = e.Position;
                view.OnItemSelected(e.Position);
            }
        }
    }
}

Step 4: Implementation of Dropdown & It’s Demo for Android Platform

In this step, we will see how to use the view in Xamarin.Forms.

  1. Open your designer file and in my case MainPage.xaml and add the control as shown below.
    <local:Dropdown HorizontalOptions="FillAndExpand"
          VerticalOptions="Center"
          BackgroundColor="LawnGreen"
          x:Name="dropdown"/>
  2. Set ItemsSource and SelectedIndex as shown in below.
    dropdown.ItemsSource = Items1;
    dropdown.SelectedIndex = 1;
  3. Add item selection event to dropdown as shown in below.
    public MainPage()
    {
     //...
     dropdown.ItemSelected += OnDropdownSelected;
    }
    
    private void OnDropdownSelected(object sender, ItemSelectedEventArgs e)
    {
     label.Text = Items1[e.SelectedIndex];
    }
Full Code implementation of Dropdown in MainPage

Here, we will see the full code for Main Page.

namespace XF.Ctrls
{
    public partial class MainPage : ContentPage
    {
        List<string> Items1 = new List<string>();
        List<string> Items2 = new List<string>();
        bool IsItem1 = true;

        public MainPage()
        {
            InitializeComponent();

            for (int i = 0; i < 4; i++)
            {
                Items1.Add(i.ToString());
            }

            for (int i = 0; i < 10; i++)
            {
                Items2.Add(i.ToString());
            }

            dropdown.ItemsSource = Items1;
            dropdown.SelectedIndex = 1;
            dropdown.ItemSelected += OnDropdownSelected;
        }

        private void OnDropdownSelected(object sender, ItemSelectedEventArgs e)
        {
            label.Text = IsItem1 ? Items1[e.SelectedIndex] : Items2[e.SelectedIndex];
        }

        private void btn_Clicked(object sender, EventArgs e)
        {
            dropdown.ItemsSource = IsItem1 ? Items2 : Items1;
            dropdown.SelectedIndex = IsItem1 ? 5 : 1;
            IsItem1 = !IsItem1;
        }
    }
}

Demo

The following screens shows the output this tutorial and it is awesome to have this dropdown in Xamarin.Forms.

This article covers the implementation of new dropdown control in Android Platform alone. Currently, I am working on creating spinner like dropdown control in iOS Platform and will post the article about the implementation of the dropdown in iOS Platform soon.

My plan is to create a dropdown control for supporting all platforms and offering this control as a standard plugin.

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.


Grid View in Xamarin.Forms using FlowListView


Introduction:

In this tutorial, we will learn how to use FlowListView in Xamarin.Forms to create GridView. FlowListView is an awesome plugin facilitates developer to achieve features like infinite loading, Item Tapped Command, Item appearing event, item disappearing event and more.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing GridView with FlowListView.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

Open Nuget Package Manager against the solution and do search for FlowListView Plugin or Paste the following Nuget package.
Install-Package DLToolkit.Forms.Controls.FlowListView -Version 2.0.11

Click Install to install this Plugin against your PCL Project or .NET standard Project.

We need to install this application in all client projects.

Step 3: Implementing GridView with FlowListView

  1. Open “App.xaml.cs” or “App.cs” and add the following line after InitializeComponent function.
    public App()
    {
       InitializeComponent();
       FlowListView.Init();
       MainPage = new MainPage();
    }
  2. Open your Page for example “MainPage” and add the flowlistview reference in designer as like below.
    …
    xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
    …
  3. Implement the flowlistview like below.
    <flv:FlowListView FlowColumnCount="3" 
                    SeparatorVisibility="Default" 
                    HasUnevenRows="True"
                    FlowItemTappedCommand="{Binding ItemTappedCommand}" 
                    FlowItemsSource="{Binding Items}">
    
        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate>
                <Frame BackgroundColor="Purple"
                    Margin="5">
                    <Label HorizontalOptions="Fill" 
                        VerticalOptions="Fill" 
                        TextColor="White"
                        XAlign="Center"
                        YAlign="Center" 
                        Text="{Binding }"/>
                </Frame>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>
    </flv:FlowListView>
  4. Then create a ViewModel for your Page and in my case I have created a class named as “MainPageModel.cs” and inherits the class with BindableObject.
    public class MainPageModel : BindableObject
    {
     …
    }
  5. Then add the view model to your page like below
    public partial class MainPage : ContentPage
    {
        MainPageModel pageModel;
        public MainPage()
        {
            InitializeComponent();
            pageModel = new MainPageModel(this);
            BindingContext = pageModel;
        }
    }

Full Code:

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             x:Class="FlowListViewSample.MainPage">

    <StackLayout Padding="10">
        <flv:FlowListView FlowColumnCount="3" 
                SeparatorVisibility="Default" 
                HasUnevenRows="True"
                FlowItemTappedCommand="{Binding ItemTappedCommand}" 
                FlowItemsSource="{Binding Items}">

            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Frame BackgroundColor="Purple"
                Margin="5">
                        <Label HorizontalOptions="Fill" 
                    VerticalOptions="Fill" 
                    TextColor="White"
                    XAlign="Center"
                    YAlign="Center" 
                    Text="{Binding }"/>
                    </Frame>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </StackLayout>

</ContentPage>
MainPage.xaml.cs
using Xamarin.Forms;

namespace FlowListViewSample
{
    public partial class MainPage : ContentPage
    {
        MainPageModel pageModel;
        public MainPage()
        {
            InitializeComponent();
            pageModel = new MainPageModel(this);
            BindingContext = pageModel;
        }
    }
}
MainPageModel.cs
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace FlowListViewSample
{
    public class MainPageModel : BindableObject
    {
        private MainPage mainPage;

        public MainPageModel(MainPage mainPage)
        {
            this.mainPage = mainPage;
            AddItems();
        }

        private void AddItems()
        {
            for (int i = 0; i < 20; i++)
                Items.Add(string.Format("List Item at {0}", i));
        }

        private ObservableCollection _items = new ObservableCollection();
        public ObservableCollection Items
        {
            get
            {
                return _items;
            }
            set
            {
                if (_items != value)
                {
                    _items = value;
                    OnPropertyChanged(nameof(Items));
                }
            }
        }

        public Command ItemTappedCommand
        {
            get
            {
                return new Command((data) =>
                {
                    mainPage.DisplayAlert("FlowListView", data + "", "Ok");
                });
            }
        }
    }
}

Demo:

Reference

FlowListView for Xamarin.Forms https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView/

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.

Rg Popup in Xamarin.Forms using Fresh MVVM

Introduction:

In this tutorial, we will learn how to use Rg.Plugin.Popup in Xamarin.Forms using Fresh MMVM. In my previous articles, we have learned how to use Fresh MVVM with Navigation Page, Master Detail Page and Tabbed Page. If you are new to Fresh MVVM, kindly read my previous articles on Fresh MVVM to know the basics & rules of Fresh MVVM.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing Fresh MVVM.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.
Install-Package FreshMvvm -Version 2.2.3

Click Install to install this Plugin against your PCL Project or .NET standard Project. Then download the Rg.Plugin.Popup by using the following Nuget package.

Install-Package Rg.Plugins.Popup -Version 1.1.5.188

Click Install to install this Plugin against your PCL Project or .NET standard Project and all dependent platform projects.

Step 3: Implementing Fresh MVVM Page & Page Models

  1. Create your XAML page (view) with name ended up with “Page”.
  2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
  3. I have created a Page & PageModel named as “MainPage” & “MainPageModel” and set this page as Main Page/Root Page of the application as shown in the following.

    Set MainPage:

    We need to set the MainPageModel as MainPage using FreshNavigationConatiner. Open App.xaml.cs or App.cs and set MainPage.

    // To set MainPage for the Application
    var page = FreshPageModelResolver.ResolvePageModel();
    var basicNavContainer = new FreshNavigationContainer(page);
    MainPage = basicNavContainer;

  4. 4. Then create a Popup Page using Rg.Plugins.Popup by adding “”. The following code snippet shows how to create popup using Rg.Plugin. I have created a Xamarin.Forms Page and named as “MyPopupPage.xaml”.
    <?xml version="1.0" encoding="utf-8" ?>
    <popup:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:popup="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                     CloseWhenBackgroundIsClicked="True"
                     x:Class="Popup.MyPopupPage">
        <popup:PopupPage.Content>
            <StackLayout Padding="10"
                         BackgroundColor="White"
                         HorizontalOptions="Center"
                         VerticalOptions="Center">
                <Label Text="Fresh MVVM Rg.Plugin.Popup"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <Button Command="{Binding ClosePopupCommand}"
                        Text="Close Popup"/>
            </StackLayout>
        </popup:PopupPage.Content>
    </popup:PopupPage>
  5. The code behind has “PopupPage” as parent page like shown in the following code part.
    public partial class MyPopupPage : PopupPage
    {
     public MyPopupPage ()
     {
      InitializeComponent ();
     }
    }
  6. Then create a Page Model for the created Popup Page with Fresh MVVM rules. If you have not remember the rules or new to Fresh MVVM, Kindly refer my previous articles on fresh MVVM.
    public class MyPopupPageModel : FreshBasePageModel
    {
    
    }
  7. Rg Popup Page has a separate Navigation Stack. So, open and close the popup, we need to have separate Navigation Stack. To know more about Rg.Plugin.Popup, refer the GitHub Link.
    Rg.Plugin.Popup Link: https://github.com/rotorgames/Rg.Plugins.Popup
  8. Then include Fresh MVVM extension/Utility class to your Xamarin Shared Project. This extension file is created & open sourced by the author “Libin Joseph”. You can download this file from the following GitHub Link.
    Fresh MVVM Extension Link: https://github.com/libin85/FreshMvvm.Popup
  9. To open popup page like navigating to normal Fresh MVVM page, use the following code snippet.
    return new Command(async () =>
    {
            await CoreMethods.PushPopupPageModel();
    });
  10. To close the popup page like closing normal Fresh MVVM page, use the following code snippet.
    return new Command(async () =>
    {
            await CoreMethods.PopPopupPageModel();
    });

Demo:

The below screenshots for your reference.

Main PageRg Popup Page

Reference:

Fresh MVVMhttps://github.com/rid00z/FreshMvvm
Rg.Plugin.Popuphttps://github.com/rotorgames/Rg.Plugins.Popup
Fresh MVVM Popup Extensionhttps://github.com/libin85/FreshMvvm.Popup/

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.

Custom Master Detail Page in Xamarin.Forms using Fresh MVVM

Introduction:

In this tutorial, we will learn how to use master detail page using Fresh MVVM with FreshNavigationContainer. It has some work around for creating master detail page more than creating master detail page using FreshMasterContainer. In my previous tutorials, we have learned the method to create master detail page using Fresh Master Container. To know more, visit my previous article.

Kindly refer my previous article on Fresh MVVM to know the basics & rules of Fresh MVVM.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing Fresh MVVM.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.
Install-Package FreshMvvm -Version 2.2.3
Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM.

  1. Create your XAML page (view) with name ended up with “Page”.
  2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.

In the same way, I have created pages “MyMasterDetailPage”, “MasterPage”, “Detail1Page” and “Detail2Page” with two respective models “MyMasterDetailPageModel”, “MasterPageModel”, “Detail1PageModel” and “Detail2PageModel”.

Here,
MyMasterDetailPagecontainer to have both Master & Detail page
MasterPageMaster or Menu Page
Detail1Page, Detail2PageDetail pages of the Master detail page

Set MainPage:

We need to set the MainPageModel as MainPage using FreshNavigationConatiner.

  1. Open App.xaml.cs or App.cs and set MainPage.
    // To set MainPage for the Application
    var page = FreshPageModelResolver.ResolvePageModel();
    var basicNavContainer = new FreshNavigationContainer(page);
    MainPage = basicNavContainer;
  2. Then add button with command for opening the MasterDetailPage from MainPage.
    public Command GotoSecondPageCommand
    {
        get
        {
            return new Command(async () =>
            {
                await CoreMethods.PushPageModel();
            });
        }
    }
  3. Open MyMasterDetailPage and add Master, Detail page to the constructor of the page like below.
    public MyMasterDetailPage()
    {
        InitializeComponent();
    
        NavigationPage.SetHasNavigationBar(this, false);
    
        Master = FreshPageModelResolver.ResolvePageModel();
        Detail = new NavigationPage(FreshPageModelResolver.ResolvePageModel());
    }
  4. Then click “Run” to see your Custom Master Detail Page using FreshMVVM with FreshNavigationContainer.

By this way, we can have Navigation Service & Stack for all type of Pages. Kindly find the screenshot for your reference.

MainPageMaster Page(Detail)Master Page(Master)

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.

Tabbed Page in Xamarin.Forms using Fresh MVVM



Introduction:

In this tutorial, we will learn how create Tabbed Page in Xamarin.Forms using Fresh MVVM. We already learned how to create your master details page in my previous tutorials. If you are new to Fresh MVVM, You can read my previous article here.

Articles of FreshMVVM:

  1. MVVM Databinding in Xamarin.Forms using Fresh MVVM.
  2. Master Detail Page in Xamarin.Forms using Fresh MVVM.

Coding Part:

Steps:
I have split this part into 3 steps as in the following.
  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing Fresh MVVM Tabbed Page.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.
Install-Package FreshMvvm -Version 2.2.3
Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM Tabbed Page

  1. Create your XAML page (view) with name ended up with “Page”.
  2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
  3. In the same way, I have created two pages “Detail1Page” and “Detail2Page” with two respective page models “Detail1PageModel” and “Detail2PageModel”.
Set MainPage:
To create Fresh MVVM Tabbed Page as MainPage, we should use Fresh Tabbed Navigation Container with the following code. Open App.xaml.cs or App.cs and set MainPage.
var tabbedNavigation = new FreshTabbedNavigationContainer();
tabbedNavigation.AddTab("First Tab", null);
tabbedNavigation.AddTab("Second Tab", null);
MainPage = tabbedNavigation;
  • Then Click Run, your Tabbed Page will be look like as on the below screenshot.
  • Here, we will not discuss about navigation between pages. If you want to know, you can see my previous article on Fresh MVVM.
Full Code for App.xaml.cs:
You can find the code for App.xaml.cs below
public partial class App : Application
{
    public App()
    {
        try
        {
            InitializeComponent();
            var tabbedNavigation = new FreshTabbedNavigationContainer();
           tabbedNavigation.AddTab("First Tab", null);
           tabbedNavigation.AddTab("Second Tab", null);
           MainPage = tabbedNavigation;
        }
        catch (Exception ex)
        {

        }
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.

Master Detail Page in Xamarin.Forms using Fresh MVVM


Introduction:

In this tutorial, we will learn how to perform MVVM approach in Xamarin.Forms using Fresh MVVM. MVVM approach is the best approach for Xamarin.Forms and WPF Applications. There are a lot of MVVM plugins or libraries like FreshMVVM, MVVMCross, Prism, etc. available to simplify MVVM implementations.

FreshMVVM:

FreshMVVM is designed to perform MVVM easy and simple with Xamarin.Forms Application. It is created Michael Ridland. It has certain rules to perform MVVM Databinding. You can find the plugin from GitHub and Nuget.

Kindly refer my previous article on Fresh MVVM to know the basics & rules of Fresh MVVM.

Coding Part:

Steps:
I have split this part into 3 steps as in the following.
  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing Fresh MVVM.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.
Install-Package FreshMvvm -Version 2.2.3
Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM.

  1. Create your XAML page (view) with name ended up with “Page”.
  2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
  3. In the same way, I have created two pages “Detail1Page” and “Detail2Page” with two respective page models “Detail1PageModel” and “Detail2PageModel”.
Set MainPage:
To create Fresh MVVM Master Detail Page as MainPage, we should use Fresh Master Detail Navigation Container with the following code. Open App.xaml.cs or App.cs and set MainPage.
var masterNavigation = new FreshMasterDetailNavigationContainer();
masterNavigation.Init("Menu");
masterNavigation.AddPage("First Page", null);
masterNavigation.AddPage("Second Page", null);
MainPage = masterNavigation;
  • Here, we will not discuss about navigation between pages. If you want to know, you can see my previous article on Fresh MVVM.
Full Code for App.xaml.cs:
You can find the code for App.xaml.cs below
public partial class App : Application
{
    public App()
    {
        try
        {
            InitializeComponent();
            var masterNavigation = new FreshMasterDetailNavigationContainer();
            masterNavigation.Init("Menu");
            masterNavigation.AddPage("First Page", null);
            masterNavigation.AddPage("Second Page", null);
            MainPage = masterNavigation;
        }
        catch (Exception ex)
        {

        }
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.

How to download files in Xamarin.Forms

xfdownload

In this article, we will learn how to download any files from online server and save the same to the local directory of the Android and iOS Phones.

Platform Support:

Here, we have used DependencyService to download any file from server path. Because, we cannot download any file directly in Xamarin.Forms. We will see the DependencyService for Android and iOS Platforms. It is similar to UWP with slight changes.

DependencyService:

Xamarin.Forms allows developers to define behaviour in platform-specific projects. DependencyService then finds the right platform implementation, allowing shared code to access the native functionality. To know more about DependencyService Click Here.  Without much introduction, we will skip into the coding part of this article.

Coding Part:

Steps: 

I have explained the method to create DependencyService with the steps as shown in the following. 
Step 1: Creating new Xamarin.Forms Projects.
Step 2: Setting up AndroidManifest and info.plist
Step 3: Creating a Dependency Service for Android and iOS Platforms.
Step 4: Implementing the functionality to download the file in PCL.

Step 1 Creating new Xamarin.Forms Projects.

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
pro1

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.
pro2

Step 2 Setting up AndroidManifest and info.plist

Before starting, we need to make some setup respective to the Platforms.
For Android:
  1. Expand your Android Project and open Properties.
  2. Then add or check the permissions.(INTERNET,WRITE EXTERNAL STORAGE)
  3. Then click Save.
For iOS:
  1. Expand your iOS Project and Open your Info.plist file with XML Editor.
  2. Then add the following Permissions.
    <key>NSPhotoLibraryAddUsageDescription </key>
    <string>Need permission to save files.</string>
  3. It provides permission to save file.
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Need permission to access files.</string>
  4. It provides permission to access files.
From iOS 11, Separate Permission Patterns are followed for saving and Accessing the Storage or Gallery.

Step 3 Creating Dependency Service by Platform wise.

In Xamarin.Forms, we need to go with dependency service to download files.
  1. First we need to create an interface in your PCL or Shared Projects. In my case, I have created an Interface named as “IDownloader.cs”.
  2. Then Paste the following code in that.
    public interface IDownloader
    {
     void DownloadFile(string url, string folder);
     event EventHandler OnFileDownloaded;
    }
  3. Here, I have create a custom event handler to notify app users about file download. You have create a class named as “DownloadEventArgs” and Paste the following code.
    public class DownloadEventArgs : EventArgs
    {
     public bool FileSaved = false;
     public DownloadEventArgs(bool fileSaved)
     {
      FileSaved = fileSaved;
     }
    }

For Android:

  1. Create a class named as “AndroidDownloader.cs” in your Android Project and implements the class with “IDownloader” interface created in your Portable Library. 
  2. We can use WebClient to download any file from the given URL. WebClient is used for both Android and iOS Platforms to download files.
  3. You can find the code used in Android Platform.
    public class AndroidDownloader : IDownloader
    {
     public event EventHandler OnFileDownloaded;
    
     public void DownloadFile(string url, string folder)
     {
      string pathToNewFolder = Path.Combine(Android.OS.Environment.ExternalStorageDirectory.AbsolutePath, folder);
      Directory.CreateDirectory(pathToNewFolder);
    
      try
      {
       WebClient webClient = new WebClient();
       webClient.DownloadFileCompleted += new AsyncCompletedEventHandler(Completed);
       string pathToNewFile = Path.Combine(pathToNewFolder, Path.GetFileName(url));
       webClient.DownloadFileAsync(new Uri(url), pathToNewFile);
      }
      catch (Exception ex)
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(false));
      }
     }
    
     private void Completed(object sender, AsyncCompletedEventArgs e)
     {
      if (e.Error != null)
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(false));
      }
      else
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(true));
      }
     }
    }
  4. Here, WebClient has an async event for notifying the download event completion.
  5. The Download event is notified by invoking the custom event created with Dependency Service from Android Platform code.

For iOS:

  1. Create a class named as “iOSDownloader.cs” in your iOS Project and implements the class with “IDownloader” interface created in your Portable Library. 
  2. We can use WebClient to download any file from the given URL. WebClient is used for both Android and iOS Platforms to download files.
  3. You can find the code used in iOS Platform.
    public class IosDownloader : IDownloader
    {
     public event EventHandler OnFileDownloaded;
    
     public void DownloadFile(string url, string folder)
     {
      string pathToNewFolder = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), folder);
      Directory.CreateDirectory(pathToNewFolder);
    
      try
      {
       WebClient webClient = new WebClient();
       webClient.DownloadFileCompleted += new AsyncCompletedEventHandler(Completed);
       string pathToNewFile = Path.Combine(pathToNewFolder, Path.GetFileName(url));
       webClient.DownloadFileAsync(new Uri(url), pathToNewFile);
      }
      catch (Exception ex)
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(false));
      }
     }
    
     private void Completed(object sender, AsyncCompletedEventArgs e)
     {
      if (e.Error != null)
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(false));
      }
      else
      {
       if (OnFileDownloaded != null)
        OnFileDownloaded.Invoke(this, new DownloadEventArgs(true));
      }
     }
    }
  4. Here, WebClient has an async event for notifying the download event completion.
  5. The Download event is notified by invoking the custom event created with Dependency Service from iOS Platform code.
Don’t forget to add the following lines above the namespace of your Dependency Service classes.
[assembly: Dependency(typeof(Dependency_Class_Name))]

Step 4: Implementing the functionality to download the file in PCL

The following code shows the following points – How to subscribe the download event. – How to call the download function.
public partial class MainPage : ContentPage
{
 IDownloader downloader = DependencyService.Get();
 public MainPage()
 {
  InitializeComponent();
  downloader.OnFileDownloaded += OnFileDownloaded;
 }

 private void OnFileDownloaded(object sender, DownloadEventArgs e)
 {
  if (e.FileSaved)
  {
   DisplayAlert("XF Downloader", "File Saved Successfully", "Close");
  }
  else
  {
   DisplayAlert("XF Downloader", "Error while saving the file", "Close");
  }
 }

 private void DownloadClicked(object sender, EventArgs e)
 {
  downloader.DownloadFile("http://www.dada-data.net/uploads/image/hausmann_abcd.jpg", "XF_Downloads");
 }
}

Download Code 

You can download the full source code from GitHub. If you like this article, do like, share and star the repo in GitHub.

How to use Zxing Intent Integrator in Xamarin.Android

tite-banner

Introduction: 

In this article, we will see how to use Zxing Intent Integrator in Xamarin Android Applications. We have seen a lot of articles about how to integrate Zxing Plugin in Android & iOS Applications. But integration of Zxing Intent Integrator is available for Java Android Apps only. So, I have created a Xamarin Library for Xamarin.Android to Zxing Intent Integrator. 

Zxing Intent Integrator: 

This plugin is a port of official Zxing Intent Integrator and it is not just a binding project. I have converted the library code from java to C#. We will see, how to use the same in Coding Part. 

Coding Part: 

Steps: 

I have split this article into 3 steps as in the following. 
Step 1: Creating new Xamarin.Android Projects. 
Step 2: Setting up the plugin for Xamarin.Android Application. 
Step 3: Implementing Zxing Intent Integrator in Xamarin.Android Application.

Step 1: Creating new Xamarin.Android Projects

Create New Project by Selecting New -> Project -> Select Android App and Click OK.

new project

Step 2: Setting up the plugin for Xamarin.Android Application

In this step, we will include the Zxing plugin for Xamarin.Android Project. 
  1. You can download the plugin by clicking here.
  2. Right click on the reference and click add reference.
  3. Then click browse and go to the folder to choose the plugin you downloaded.
add reference 1

add reference 2

Step 3: Implementing Zxing Intent Integrator in Xamarin.Android Application 

  1. I have created a button and added click event.
  2. Then added OnActivityResult Override method as shown below. 
    protected override void OnActivityResult(int requestCode, [GeneratedEnum] Result resultCode, Intent data)
    {
    
     IntentResult result = IntentIntegrator.ParseActivityResult(requestCode, (int)resultCode, data);
     if (result != null)
     {
      if (result.Contents == null)
      {
       Log.Debug("MainActivity", "Cancelled scan");
       Toast.MakeText(this, "Cancelled", ToastLength.Long).Show();
      }
      else
      {
       Log.Debug("MainActivity", "Scanned");
       Toast.MakeText(this, "Scanned: " + result.Contents, ToastLength.Long).Show();
      }
     }
     else
     {
      base.OnActivityResult(requestCode, resultCode, data);
     }
    }
  3. Here we can handle the results returned from Zxing Scanner App.
  4. Then add the following lines in click event, which is help us to call the Zxing app to scan the barcodes.
    button.Click += (s, e) =>
    {
     IntentIntegrator intentIntegrator = new IntentIntegrator(this);
     intentIntegrator.InitiateScan();
    };
  5. The working principle is similar to the official Zxing Java Library.

Full Code

You can find full code here.
namespace ZxingSample
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            LinearLayout ll = new LinearLayout(this);
            Button button = new Button(this);
            button.Text = "Click to Scan using Zxing";
            button.Click += (s, e) =>
            {
                IntentIntegrator intentIntegrator = new IntentIntegrator(this);
                intentIntegrator.InitiateScan();
            };
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(Android.Views.ViewGroup.LayoutParams.MatchParent,
                Android.Views.ViewGroup.LayoutParams.WrapContent);
            ll.AddView(button, lp);
            SetContentView(ll);
        }

        protected override void OnActivityResult(int requestCode, [GeneratedEnum] Result resultCode, Intent data)
        {

            IntentResult result = IntentIntegrator.ParseActivityResult(requestCode, (int)resultCode, data);
            if (result != null)
            {
                if (result.Contents == null)
                {
                    Log.Debug("MainActivity", "Cancelled scan");
                    Toast.MakeText(this, "Cancelled", ToastLength.Long).Show();
                }
                else
                {
                    Log.Debug("MainActivity", "Scanned");
                    Toast.MakeText(this, "Scanned: " + result.Contents, ToastLength.Long).Show();
                }
            }
            else
            {
                base.OnActivityResult(requestCode, resultCode, data);
            }
        }
    }
}

Demo

zxing app 1

zxing app 2

zxing app 3

zxing app 4

Download Code

You can download the full source code from GitHub. If you like the post, do like and share the article and star the repo on GitHub.