{"id":277,"date":"2017-11-05T09:42:10","date_gmt":"2017-11-05T14:42:10","guid":{"rendered":"http:\/\/blog.cubicleninja.com\/?p=277"},"modified":"2026-06-07T10:28:42","modified_gmt":"2026-06-07T15:28:42","slug":"xamarin-forms-background-tasks-with-messagingcenter","status":"publish","type":"post","link":"https:\/\/blog.cubicleninja.com\/?p=277","title":{"rendered":"Xamarin.Forms Background Tasks with MessagingCenter"},"content":{"rendered":"

When developing mobile applications, a common need is to be able to perform some task (long-running or otherwise) off the main thread and ensure that your main thread can respond appropriately when it completes.\u00a0 There are multiple ways to accomplish this sort of requirement, but I’m going to focus on how to handle it using the MessagingCenter<\/a>.\u00a0 I covered a fairly simple “call and response” usage of MessagingCenter in my previous post for creating a\u00a0Creating a Cross-Platform Soundboard<\/a>, this one will leverage similar concepts but take things a bit further.<\/p>\n

We\u2019ll start out in Visual Studio and create a project of type\u00a0Visual C#<\/strong>\u00a0->\u00a0Cross-Platform<\/strong>\u00a0->\u00a0Cross Platform App (Xamarin).<\/strong><\/p>\n

\"MessagingCenter1\"<\/a><\/p>\n

On the next screen, select\u00a0Master Detail<\/strong> for the template and\u00a0Portable Class Library (PCL)<\/strong> for the Code Sharing Strategy.<\/p>\n

\"MessagingCenter2\"<\/a><\/p>\n

Churn, churn, churn goes the Visual Studio for a bit and then you’ll be prompted to select the UWP targets, I’m just going to leave them set at their defaults and hit\u00a0OK<\/strong>.<\/p>\n

The\u00a0Master Detail<\/strong> template adds in several files to help you understand the MVVM concepts and starts you off with an application you can actually run to see how it all fits together.\u00a0 Feel free to play around a bit with that if you’d like, but for our purposes, we’re going to delete out all of the files that were auto-generated into the\u00a0Models<\/strong>,\u00a0Services, ViewModels, <\/strong>and Views<\/strong> folders.\u00a0 This should leave us with a\u00a0Portable\u00a0<\/strong>project\u00a0that looks something like this:
\n\"MessagingCenter3\"<\/a><\/p>\n

Now that we have a mostly clean project, we’ll begin building back up our sample application.\u00a0 Right-click on the\u00a0Helpers<\/strong> folder, select\u00a0Add -> Class<\/strong> and give it a name of\u00a0MessagingCenterObject<\/strong>.\u00a0 In the new class file that opens, give the class a public accessor and add two public properties of type string:\u00a0\u00a0result<\/strong> and\u00a0message<\/strong>.<\/p>\n

namespace MessagingCenterTest.Helpers\n{\n    public class MessagingCenterObject\n    {\n        public string result { get; set; }\n        public string message { get; set; }\n    }\n}\n<\/pre>\n
The next piece we want to add will be a ViewModel.\u00a0 Right-click on the\u00a0ViewModels<\/strong> folder and select\u00a0Add -> Class<\/strong>.\u00a0 For the name of the class, put in\u00a0MainViewModel.cs<\/strong> and then click Add<\/strong>.<\/p>\n
Give your new class a public accessor and set it to inherit from\u00a0ObservableObject<\/strong> ( ObservableObject is a helper class that was added automagically for us by the template — you’ll need to add a using statement for the namespace to reference it – the reason we want to inherit from the ObservableObject is because it provides some base wiring that allows us to easily add binding properties that will update the UI when they are changed ).\u00a0 Add two public properties to the new\u00a0MainViewModel<\/strong> class named Title<\/strong> and\u00a0Label<\/strong>, both of type\u00a0string<\/strong> and make sure to use the\u00a0SetProperty<\/strong> helper for them.\u00a0 We also need a private MessagingCenterObject<\/strong> and a public\u00a0Command<\/strong>.\u00a0 \u00a0The\u00a0Command<\/strong> is what we will use with a button in our view to fire off a message.\u00a0 This ends up with a class that looks like this<\/p>\n
using MessagingCenterTest.Helpers;\nusing Xamarin.Forms;\n\nnamespace MessagingCenterTest.ViewModels\n{\n    public class MainViewModel : ObservableObject\n    {\n        private MessagingCenterObject msgObj;\n        public Command ButtonCommand { get; set; }\n\n        private string _title;\n        public string Title\n        {\n            get { return _title; }\n            set { SetProperty(ref _title, value); }\n        }\n\n        private string _label;\n        public string Label\n        {\n            get { return _label; }\n            set { SetProperty(ref _label, value); }\n        }\n\n        public MainViewModel()\n        {\n            Title = \"Main View\";\n            Label = \"Waiting to Start\";\n            \/\/ Initialize our messaging center object\n            \/\/ it's blank for now because we don't need any parameters to the start\n            msgObj = new MessagingCenterObject();\n\n            \/\/ We set the Button command so that when it fires it sends a start message\n            \/\/ to the MessagingCenter\n            ButtonCommand = new Command(() =>\n            {\n                MessagingCenter.Send<MessagingCenterObject>(msgObj, \"StartProcessing\");\n            });\n        }\n    }\n}\n<\/pre>\n
With the\u00a0ViewModel\u00a0<\/strong>prepared, right-click on the\u00a0Views<\/strong> folder and select\u00a0Add -> New Item.\u00a0\u00a0<\/strong>From the template selection screen, select\u00a0Xamarin.Forms<\/strong> on the left, then the\u00a0XAML<\/strong> based\u00a0Content Page<\/strong> on the right, and give it a name of\u00a0MainView.xaml<\/strong><\/p>\n
\"MessagingCenter4\"<\/a><\/p>\n
For the view, we’ll use a simple\u00a0Grid<\/strong> with two rows, one for a text label and one for a button.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             xmlns:vm=\"clr-namespace:MessagingCenterTest.ViewModels\"\n             x:Class=\"MessagingCenterTest.Views.MainView\"\n             Title=\"{Binding Title}\">\n    <!-- Make sure to add an XML namespace for your ViewModel namespace up above, mine is aliased to vm -->\n    <!-- Add in the BindingContext and wire it in to the MainViewModel we created earlier-->\n    <ContentPage.BindingContext>\n        <vm:MainViewModel><\/vm:MainViewModel>\n    <\/ContentPage.BindingContext>\n    <ContentPage.Content>\n        <Grid>\n            <Grid.RowDefinitions>\n                <RowDefinition Height=\"*\"><\/RowDefinition>\n                <RowDefinition Height=\"44\"><\/RowDefinition>\n            <\/Grid.RowDefinitions>\n            <Grid.ColumnDefinitions>\n                <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\n            <\/Grid.ColumnDefinitions>\n            <!-- Set the text of the label to the Label property in our viewmodel -->\n            <Label Text=\"{Binding Label}\" Grid.Row=\"0\" Grid.Column=\"0\" HorizontalOptions=\"CenterAndExpand\" VerticalOptions=\"CenterAndExpand\" \/>\n            <!-- Set the button to fire our viewmodel ButtonCommand when it is clicked -->\n            <Button Text=\"Start Background\" Command=\"{Binding ButtonCommand}\"  Grid.Row=\"1\" Grid.Column=\"0\"><\/Button>\n        <\/Grid>\n    <\/ContentPage.Content>\n<\/ContentPage><\/pre>\n
Before we go any further, we need to modify the\u00a0App.xaml.cs<\/strong> file to properly point to our new view.\u00a0 Open the file and change the code in the\u00a0SetMainPage()<\/strong> method to the following:<\/p>\n
        public static void SetMainPage()\n        {\n            Current.MainPage = new MainView();\n        }<\/pre>\n
Right now, if you run the project, you will get a display that has a\u00a0label that displays “Waiting to Start” and a button.\u00a0 Clicking the button wouldn’t have any effect at this point because we are sending a message but no one is listening (sad, I know).\u00a0 Let’s provide something to listen and respond to the message.<\/p>\n
Right-click on the\u00a0Helpers<\/strong> folder, select\u00a0Add -> Class,\u00a0<\/strong>and give the file a name of\u00a0BackgroundListener.cs<\/strong>.\u00a0 Modify the class so that it is\u00a0public<\/strong> and\u00a0static<\/strong>.\u00a0 We’ll need to do a few things in here to get it prepared properly:\u00a0 create a few static properties to help maintain state, provide a static method to initialize the class, and set up our MessagingCenter subscriptions.\u00a0 Our example is going to be very simplistic, the background process is just going to wait for a set period of time and then send a message back out saying it has completed a processing round.\u00a0 \u00a0In the real world, you could use this for things such as reaching out to a web service to periodically refresh data, polling for other application updates, etc.<\/p>\n
The code for the BackgroundListener class is below, it’s commented to explain what the different pieces are doing.<\/p>\n
using System.Threading.Tasks;\nusing Xamarin.Forms;\n\nnamespace MessagingCenterTest.Helpers\n{\n    public static class BackgroundListener\n    {\n        \/\/ The MessagingCenterObject that we'll use for passing data back and forth\n        private static MessagingCenterObject msgObj;\n        \/\/ A simple int to keep track of how many loops we've done\n        private static int loopCount = 0;\n        \/\/ A boolean to keep track of whether or not we are already processing\n        private static bool processing = false;\n        \/\/ A boolean to keep track of whether or not we are already initialized\n        private static bool initialized = false;\n\n        public static void InitListener()\n        {\n            \/\/ Because we subscribe to events during the initialization, we want to ensure we don't initialize multiple times\n            if (!initialized)\n            {\n                initialized = true;\n\n                msgObj = new MessagingCenterObject();\n                loopCount = 0;\n                processing = false;\n\n                \/\/ When initialized, start listening for the \"StartProcessing\" message\n                MessagingCenter.Subscribe<MessagingCenterObject>(msgObj, \"StartProcessing\", async (sender) =>\n                {\n                    \/\/ Only start processing if we aren't already doing so, this is to prevent feedback loops\n                    \/\/ from multiple starts\n                    if (!processing)\n                    {\n                        processing = true;\n                        loopCount = 0;\n                        await ProcessLoop();\n                    }\n                });\n\n                \/\/ When initialized, start listening for the \"ContinueProcessing\" message\n                MessagingCenter.Subscribe<MessagingCenterObject>(msgObj, \"ContinueProcessing\", async (sender) =>\n                {\n                    await ProcessLoop();\n                });\n            }\n        }\n\n        private static async Task<bool> ProcessLoop()\n        {\n            \/\/ pause for 2 seconds before doing anything\n            await Task.Delay(2000);\n\n            \/\/ Set the message and result value of our MessagingCenterObject\n            msgObj.message = $\"Completed Processing Loop {++loopCount}\";\n            msgObj.result = \"Success\";\n\n            \/\/ Send our MessagingCenterObject back out into the world as a \"FinishedProcessing\" message\n            MessagingCenter.Send<MessagingCenterObject>(msgObj, \"FinishedProcessing\");\n\n            return true;\n        }\n    }\n}\n<\/pre>\n
Before testing this out, we have two more adjustments to make; we need to modify our\u00a0MainViewModel<\/strong> so that it subscribes to the\u00a0FinishedProcessing<\/strong> event and add a line to our\u00a0App.xaml.cs<\/strong> to spin up the\u00a0BackgroundListener.<\/strong><\/p>\n
Modify the\u00a0MainViewModel.cs<\/strong> file and add the following lines to the bottom of the\u00a0MainViewModel()<\/strong> public constructor<\/p>\n
            \/\/ Subscribe to the \"FinishedProcessing\" Message\n            MessagingCenter.Subscribe<MessagingCenterObject>(msgObj, \"FinishedProcessing\", (sender) =>\n            {\n                \/\/ Update the label based on the message received\n                Label = sender.message;\n\n                \/\/ Fire off a ContinueProcessing message to continue the communication\n                MessagingCenter.Send<MessagingCenterObject>(msgObj, \"ContinueProcessing\");\n            });<\/pre>\n
Finally, modify the\u00a0App.xaml.cs<\/strong> and change the public constructor to look like the following<\/p>\n
        public App()\n        {\n            InitializeComponent();\n\n            \/\/ start up the backgroundlistener for the application\n            BackgroundListener.InitListener();\n\n            SetMainPage();\n        }<\/pre>\n
At this point, you can run the application on any of the platforms and be able to watch the call-and-response between your ViewModel and the background listener process.<\/p>\n
In the next post, I’ll go over some slightly more complex concepts with MessagingCenter such as handling messages across multiple views and how to properly unsubscribe from MessagingCenter events to ensure you keep your event stack clean.<\/p>\n","protected":false},"excerpt":{"rendered":"
When developing mobile applications, a common need is to be able to perform some task (long-running or otherwise) off the main thread and ensure that your main thread can respond appropriately when it completes.\u00a0 There are multiple ways to accomplish this sort of requirement, but I’m going to focus on how to handle it using … Continue reading “Xamarin.Forms Background Tasks with MessagingCenter”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6,9,10,12],"tags":[14,16,30,40,42],"class_list":["post-277","post","type-post","status-publish","format-standard","hentry","category-android","category-csharp","category-ios","category-mobile","category-uwp","category-xamarin","tag-android","tag-c","tag-ios","tag-uwp","tag-xamarin"],"_links":{"self":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=277"}],"version-history":[{"count":1,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":21820,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts\/277\/revisions\/21820"}],"wp:attachment":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}