Implementing Multiple Location Timezone Feature in .NET MAUI

Please, support my blog by clicking on our sponsors ad!

 With globalization and remote work, dealing with multiple time zones in an app can greatly enhance user experience. This guide will help you build a .NET MAUI application that displays the current time in multiple locations.

Below is output:

Implementing Multiple Location Timezone Feature in .NET MAUI

Table of Contents

1. Introduction
2. Setting Up Your .NET MAUI Project



3. Adding Timezone Support
4. Creating the User Interface



5. Fetching Timezone Data
6. Displaying Multiple Timezones



7. Conclusion

Introduction

In this tutorial, we'll create a .NET MAUI application that allows users to view the current time in various locations around the world. We will use the TimeZoneInfo class in .NET to manage time zones and a ListView to display the times.

Setting Up Your .NET MAUI Project

First, create a new .NET MAUI project in Visual Studio:

1. Open Visual Studio and create a new project.
2. Select .NET MAUI App and click Next.
3. Name your project, choose a location, and click Create.
4. Select .NET MAUI App template and click Create.

Adding Timezone Support

Using TimeZoneInfo

The TimeZoneInfo class provides functionality for working with time zones in .NET.

using System;
using System.Collections.Generic;

namespace TimezoneApp
{
    public class TimezoneService
    {
        public List<string> GetAllTimezones()
        {
            var timezones = new List<string>();
            foreach (var timezone in TimeZoneInfo.GetSystemTimeZones())
            {
                timezones.Add(timezone.Id);
            }
            return timezones;
        }

        public DateTime GetTimeInTimezone(string timezoneId)
        {
            var timezone = TimeZoneInfo.FindSystemTimeZoneById(timezoneId);
            return TimeZoneInfo.ConvertTime(DateTime.UtcNow, timezone);
        }
    }
}

Creating the User Interface

Create a simple UI to display the list of time zones and their current times.

MainPage.xaml

Fetching Timezone Data

In your code-behind file, populate the ListView with timezone data.

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using Microsoft.Maui.Controls;

namespace TimezoneApp
{
    public partial class MainPage : ContentPage
    {
        private readonly TimezoneService _timezoneService;

        public MainPage()
        {
            InitializeComponent();
            _timezoneService = new TimezoneService();
            LoadTimezones();
        }

        private void LoadTimezones()
        {
            var timezones = _timezoneService.GetAllTimezones();
            var timezoneData = new List<TimezoneViewModel>();

            foreach (var timezone in timezones)
            {
                timezoneData.Add(new TimezoneViewModel
                {
                    Name = timezone,
                    Time = _timezoneService.GetTimeInTimezone(timezone).ToString("HH:mm:ss")
                });
            }

            TimezoneListView.ItemsSource = timezoneData;
        }
    }

    public class TimezoneViewModel
    {
        public string Name { get; set; }
        public string Time { get; set; }
    }
}

Displaying Multiple Timezones

The application will display a list of timezones with their respective current times, updating every minute. You can enhance this by adding features like timezone conversion or allowing users to select their preferred timezones.

Adding Refresh Timer

To refresh the time display every minute:

using System.Timers;

// Add this in your MainPage class

private Timer _timer;

protected override void OnAppearing()
{
    base.OnAppearing();
    _timer = new Timer(60000); // 60 seconds
    _timer.Elapsed += (s, e) => LoadTimezones();
    _timer.Start();
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    _timer.Stop();
}

Conclusion

You've built a .NET MAUI application that displays the current time in multiple locations using the TimeZoneInfo class. This feature is invaluable for global users, helping them keep track of time across various locations. You can further enhance the application by allowing users to add or remove timezones and customize their display.

Additional Resources

• Microsoft Docs: TimeZoneInfo

#DotNetMAUI, #TimeZoneFeature, #MobileApp, #MAUITutorial, #AppDevelopment