CODEWITHSUNDEEP
androidiosxamarinxamarin.androidxamarin.forms
pax
pax

Reputation: 1915

Xamarin.Forms how display internet connection CHANGED?

Structure of my app:

public partial class App : Application
  {

    public App()
    {
      InitializeComponent();

      MainPage = new MdpMainPage();
    }

MdpMainPage is a MasterDetailPage: 

<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <pages:HomePage />
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

My HomePage is a CarouselPage and it contains three pages of type ContentPage.

<CarouselPage>
    ...some namespaces...
    <CarouselPage.Children>
        <pages:HomePageA />
        <pages:HomePageB />
        <pages:HomePageC />
    </CarouselPage.Children>
</CarouselPage>

I would like to use JamesMontemagno's ConnectivityPlugin to WATCH for internet connection CHANGES.

DisplayAlert box should pop up when the application starts and it should tell us either:

DisplayAlert("Internet connection found.", "Wait for the application data to update.", "OK");

...or...

DisplayAlert("No internet connection found.", "Application data may not be up to date. Connect to a working network.", "OK");


If there was internet connection at the start of the application and it gets lost during the using of the app, another message box should pop up saying:

DisplayAlert("Internet connection lost.", "Application data may not be up to date. Connect to a working network.", "OK");


If there was no internet connection at the start of the application and somehow later the device connects successfully, the firstly mentioned message box should appear:

DisplayAlert("Internet connection found.", "Wait for the application data to update.", "OK");


I've tried to figure out the correct implementation with the help of the provided Documentation.
Unfortunately, James Montemagno doesn't bother to explain in detail how to use the ConnectivityPlugin, so beginners like myself tend to end up confused.

I know I should use the following code snippets:

/// <summary>
/// Event handler when connection changes
/// </summary>
event ConnectivityChangedEventHandler ConnectivityChanged; 


public class ConnectivityChangedEventArgs : EventArgs
{
  public bool IsConnected { get; set; }
}

public delegate void ConnectivityChangedEventHandler(object sender, ConnectivityChangedEventArgs e);

CrossConnectivity.Current.ConnectivityChanged += async (sender, args) =>
{
  Debug.WriteLine($"Connectivity changed to {args.IsConnected}");
};

...but I don't know where to put them.

I've tried a couple of combinations, but to no avail so far.

Do I put some in the App.xaml and some in the MasterDetailPage?

Or rather one of the Detail pages?

Or in each of the detail pages?

Please don't think I didn't google around. Because I did and everybody seems to have a different opinion on how to flavor the basic Montemagno recipe, which is very confusing.

Could somebody provide the simplest, cleanest way to implement this? Nothing fancy really, just message boxes that inform the user about changes in connectivity.

Help would be much appreciated.
Thank you all.

Upvotes: 1

Views: 1744

Answers (1)

Timo Salom&#228;ki
Timo Salom&#228;ki

Reputation: 7189

Let's say you have a dozen pages in your application. It wouldn't make sense to have connectivity code in all of them. A better place to subscribe to the events would be your App.xaml.cs inside the OnStart method (could also be inside the constructor). This is what I have in one of the projects:

protected override void OnStart()
{
    CrossConnectivity.Current.ConnectivityChanged += (sender, args) =>
    {
        MessagingService.Current.SendMessage("connectivityChanged", args.IsConnected);
    };
}

MessagingService is from James Montemagno's Xamarin.Forms Toolkit but you can also use Xamarin's Messaging Center.

Then, on each ViewModel of those pages that want to subscribe to this message of a connection change will subscribe to it like this:

MessagingService.Current.Subscribe ("connectivityChanged", async (e) => 
{
    //Show a dialog or something to inform about the connectivity change.
});

This way you'll have everything decoupled.

Edit: I just noticed you're probably looking to show the alert from a code behind of the page. You could simply subscribe to the event on your MasterDetailPage like this:

public class MainPageCS : MasterDetailPage
{
    public MainPageCS() 
    {
        MessagingService.Current.Subscribe<bool>("connectivityChanged", (args, connected) =>
        {
            if (connected)
                DisplayAlert("Internet connection found.", "Wait for the application data to update.", "OK");
            else
                DisplayAlert("Internet connection lost.", "Application data may not be up to date. Connect to a working network.", "OK");
        });
    }
}

Any time the connectivity changes, your App.xaml.cs handles the event and sends a message to the MessagingService which is received by the MasterDetailPage that reacts to it.

Edit 2: Put this into your App.xaml.cs so the connection gets checked only when the app starts.

protected override void OnStart()
{
    Device.BeginInvokeOnMainThread(async () =>
    {
        var isConnected = CrossConnectivity.Current.IsConnected;

        await MainPage.DisplayAlert("Connection", $"Connected {isConnected}", "OK");
    });
}

Upvotes: 2

Related Questions