How to change #WindowsPhone 8 Lock Screen background?

As a WPDev, you might want to provide your users an option to change the Lock Screen of their Windows Phone 8 device. It can be from a locally stored images within the app XAP, a RSS feed, Camera Roll and/or periodically from a push notification.

In this blog post, we will learn how to integrate the functionality in your app to simply load and set the lock screen background from a set of images available within the app xap.

Windows Phone 8 provides the users to change the lock screen background image. The default app that supports this is the Bing app. There are plenty of other apps available in the market too, which allows the users to change the lock screen background from a set of images available in camera roll, RSS feeds likes Flickr, Picasa etc. and make it look awesome.

Today, let’s start discussing the simplest way to load an image from the application XAP itself and set it as the background of the lock screen.

Before implementing this in your apps/games, make sure to add an extension named “LockScreen_Background” in the WMAppManifest.xml file of your Windows Phone 8 project. This will make your app as one of the Lock Screen background image provider and then you will be able to change the image from your application.

To do this, right click on the WMAppManifest.xml file of your WP8 project and click on “View Code”. Alternatively, you can open this file in a notepad too. Now navigate to the end of the <Tokens> tag and add the following extension to include the lock screen background support:

<Extensions>
    <Extension ExtensionName="LockScreen_Background" 
               ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" 
               TaskID="_default" />
</Extensions>

Points to Note: You must add the above extension just below the end of the Tokens tag.

Playing with the Code

Now it’s time to play with the code. Let’s assume that, we have a JPEG image named “lockscreen-background.jpg” in the “Assets” folder of our project. Now add one button in your XAML page and register a button click event to it. Also mark the click event as asynchronous by adding the “async” keyword.

In the event implementation, first check whether your app is the current lock screen background provider by calling the property “LockScreenManager.IsProvidedByCurrentApplication”. If it is not, request the user to grant the app access to set itself as the background image provider by asynchronously calling “LockScreenManager.RequestAccessAsync()” method.

Now if it has permission to change the lock screen background and is the current provider, set the image URI of the lock screen by calling the method “LockScreen.SetImageUri(uri)” method. Here you can find the sample source code (both in C# and VB.NET) of the above implementation:

C# Code

private async void OnButtonClicked(object sender, RoutedEventArgs e)
{
    // first check whether your app is the current lock screen background provider.
    // if not, request access to set the lock screen background provider
    if (!LockScreenManager.IsProvidedByCurrentApplication)
    {
        await LockScreenManager.RequestAccessAsync();
    }

    // again check whether user provided permission to set the app as the background provider
    if (LockScreenManager.IsProvidedByCurrentApplication)
    {
        const string localImageUrl = "ms-appx:///Assets/lockscreen-background.jpg";
        var uri = new Uri(localImageUrl, UriKind.Absolute);

        // set the lock screen background image
        LockScreen.SetImageUri(uri);
    }
}

VB.NET Code

Private Sub OnButtonClicked(sender As Object, e As RoutedEventArgs)
    ' first check whether your app is the current lock screen background provider.
    ' if not, request access to set the lock screen background provider
    If Not LockScreenManager.IsProvidedByCurrentApplication Then
        Await LockScreenManager.RequestAccessAsync()
    End If

    ' again check whether user provided permission to set the app as the background provider
    If LockScreenManager.IsProvidedByCurrentApplication Then
        Const  localImageUrl As String = "ms-appx:///Assets/lockscreen-background.jpg"
        Dim uri = New Uri(localImageUrl, UriKind.Absolute)

        ' set the lock screen background image
        LockScreen.SetImageUri(uri)
    End If
End Sub

Points to Note: If you are setting the image from App Resource, the relative path of the image URL must start with “ms-appx:///”.

Demo

Now when you or your user run the app, it will check whether it is already set as the current lock screen image provider. If it is not, it will ask the user to confirm setting the current app the provider. The following message (left) will pop up in the screen, when the method named “LockScreenManager.RequestAccessAsync()” excutes:

You will be able to find the current provider and all the providers in the lock screen settings page, as shown in the above screenshot (right). Read the blog post “How to Launch WP8 built-in Apps using URI Schemes?” to learn how to open the lock screen settings page from your app/game.

I hope, this blog post was easy to understand and gave you enough information on how to change the background image from a set of images available in the application XAP as predefined resource. In the next post, we will learn how to set it dynamically. Till then, Happy Coding!

Don’t forget to subscribe to my blog’s RSS Feed and Email Newsletter. I am also available on Twitter and Facebook. Connect with me to get all the updates. Have any question on this topic? Don’t hesitate to ask your queries below in the comments section.