How To Bring Wifi Connectivity To Xamarin.Forms Application

Introduction

 

This article demonstrates how to bring wifi connectivity to Xamarin.Forms.

 

Let's start.

 

Step 1 

 

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.

 

Select Cross-Platform app, then give your project a Name and Location.

 

Step 2 

 

Add the Following NuGet Packages to Your project. 

• Xam.Plugin.Connectivity 

Go to Solution Explorer and select your solution. Right-Click and select "Manage NuGet Packages for Solution".

 

 

Now, Select the following NuGet Package and select your project to install it.

 

 

Step  3

 

Next, add an image to Open Solution Explorer >> Project Name.Android >> Resources >> Right Click the drawable.

 

 

 

Next, a dialogue box will open. Choose image location and add images.

 

 

Step 4

 

Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the Design View of this page. 

 

 

 

The Code is given below.

 

 We are Create a Lable and Image inside the StackLayout and image name is copy and paste the image source "Untitled1".

 

 

 

Xaml Code  

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WifiConnectivity"
             x:Class="WifiConnectivity.MainPage">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="Connect Wifi" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Large"/>
        <Image Source="Untitled1.jpg" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="80" WidthRequest="80"/>
    </StackLayout>

</ContentPage>

Step 5

 

Open Solution Explorer >> Project Name >> Right Click >> New Item.

 

 

 

The dialogue box will open. Now, add the XAML page 

 

 

 

Step 6

 

Open Solution Explorer >> Project Name >> page1.xaml. Open the Design View of this page. 

 

 

 

The code is given below 

 

 

 

Xaml Code 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WifiConnectivity.Page1">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="No Wifi" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                <Image Source="Untitled.jpg" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="80" WidthRequest="80"/>
            </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step  7

 

 Open Solution Explorer >> Project Name >> App.xaml.cs.Open the Design View of this page.

 

 

 

This Code is copied your project.

 

 

 

C# Code 

using Plugin.Connectivity;
using Plugin.Connectivity.Abstractions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace WifiConnectivity
{
    public partial class App : Application
    {
        public App ()
        {
            InitializeComponent();

            MainPage = CrossConnectivity.Current.IsConnected ? (Page)new MainPage() : new Page1();
        }

        protected override void OnStart ()
        {
            // Handle when your app starts
            base.OnStart();
            CrossConnectivity.Current.ConnectivityChanged += HandleConnectivityChanged;
        }

        private void HandleConnectivityChanged(object sender, ConnectivityChangedEventArgs e)
        {
            Type CurrentPage = this.MainPage.GetType();
            if (e.IsConnected && CurrentPage != typeof(MainPage))
                this.MainPage = new MainPage();
            else if (!e.IsConnected && CurrentPage != typeof(Page1))
                this.MainPage = new Page1();
        }

Step 8

 

Next, select the build & deploy option, followed the list of an Android Emulators or simulator, you can choose any API (Application Program Interface) Level Emulator and simulator to run it.

 

Output 1

 

After a few seconds, you will see your app working.

 

Wifi Connected to Mobile in the result is "Connected Wifi".

 

 

Wifi not connected to Mobile in the result is "No Wifi".

 

 

 

Finally,  We have successfully created Xamarin.Forms Wifi connectivity.