How to disable display timeout in WinRT

For those of you who are building multimedia related apps, you’ll want to consider disabling the display timeout of the user’s device. This prevents the screen from dimming or locking while the user is playing/recording media.

In my case, I have a view where the user is doing some video recording. so I don’t want the screen to time out on that page

1)  Create a class scope variable::

private DisplayRequest dRequest;

2) On your OnNavigatedTo event, grab a new DisplayRequest and get a deferral

if (dRequest == null)

{

     dRequest = new DisplayRequest();

     dRequest.RequestActive();

}

3) when the user is done, set it back to normal in the OnNavigatingFrom event:

if (dRequest != null)

{

     dRequest.RequestRelease();

     dRequest = null;

}

That’s it!

I’ll be also using this on media playback page, but in that case I wont use a “page loaded/unloaded” approach. Instead, I’ll wait for the media to be loaded into the MediaElement before getting the deferral and get the release on media ended.

Remember to be respectful when playing with power like this, do not do this for your whole app. Be mindful and skillful and apply it to just the parts that truly need it.

EmailMessage class Approach for Windows

Unfortunately, there is no EmailMessage class for big Windows. It is such a nice feature of Windows Phone to be able to quickly compose an email programmatically and launch the built-in email app. However, I have created a working approach for the windows portions of my Universal Windows apps and I wanted to share it with you.

My first attempt was with using a ShareContract, but it doesn’t allow you to fill in the “To:” field and sometimes my error report data was too long to fit into DataTransferManager’s SetText() method.

So I decided to take a look at using a UriScheme to launch another app, I do this in many of my Windows Phone 8 apps to share data. I found a perfect solution for my needs with WinRT’s Launcher class. Here is the finished result:


private async Task<bool> ReportErrorMessage(string detailedErrorMessage)
{
var uri = new Uri(string.Format("mailto:email.address@outlook.com?subject=Error Report&body={0}", detailedErrorMessage), UriKind.Absolute);

var options = new Windows.System.LauncherOptions
{
DisplayApplicationPicker = true,
DesiredRemainingView = Windows.UI.ViewManagement.ViewSizePreference.UseLess,
PreferredApplicationPackageFamilyName = "microsoft.windowscommunicationsapps_8wekyb3d8bbwe",
PreferredApplicationDisplayName = "Mail"
};

return await Windows.System.Launcher.LaunchUriAsync(uri, options);
}

I needed this so that user can send me error reports when there is an unexpected crash, here’s an explanation of the code:

  1. I created a Task<bool> that accepts a string to pass the error message.
  2. I construct a “mailto” uri, which lets me prefill the email’s To, Subject and Body fields (notice that I am using the detailedErrorMessage string for the email body)
  3. The most interesting part with the Launcher is that you can set some great LauncherOptions like; “open with” app picker, screen size, preferred app, UI options, content type and more. I highly recommend that you take a look at the LaunchUriAsync documentation to see what’s available to fit your needs.
  4. Lastly, I made a return statement from LaunchUriAsync so I can let the caller know it was successful or not.

I hope this helps you prepare something until Windows 10 (hopefully) shares some of Windows Phone’s awesome built-in features like EmailManager.

Adding Telerik Universal

Telerik has released a new toolset, UI for Windows Universal. You can now use many components like Charts and Calendars in a shared XAML page in your application. If you already have the Telerik Windows Phone or Windows 8.1 XAML controls, you now have a license for the Universal controls, too.

It is very simple to add it to your project. Let me show you in a quick File > New example:

1- Open Visual Studio 2013 and create a new Universal Store app.

Select File > New > Project > Visual C# > Store Apps > Universal Apps and choose the HubApp template (you can choose Blank App if you prefer, we’re only going to use the Shared folder to add content).

S1

2- After the project generates, let’s focus on the solution Explorer. First, lets add the Telerik reference to the Windows project.

Right click on References > Add Reference > select Windows 8.1 (in the left tree) > Extensions. Now you’ll see a list of extensions, choose “Telerik UI for Windows Universal

S2

3- Now add the Telerik extension to the Windows Phone project.

The steps are the sames as you did in step 2, but the extension’s name is “Telerik UI for Windows Phone 8.1

S3

4- Now we are ready to start building, let’s add a RadCalendar to a shared XAML page.

  1. Build the solution (F6)
  2. Right click on the Shared Project and select Add > New Item > Blank Page
  3. In the Visual Studio Toolbox type in “RadCalendar“, drag and drop it onto your new blank page. You can also type it in, but make sure you add the namespace (see screenshot)

S4

You can also see how the control will on Phone by simply toggling the view:

S5

That’s all there is to it!

Here are some more resources for you:

One last thing I should mention is that not all the Windows 8.1 controls are Universal right now. We are hard at work to bring more over. Here is a list as of Q3 2014:

Read-only Address Bar for Webview

If you are having a Windows Store application fail certification or being unpublished because you have violated Policy 2.1.2  – requires a visible address bar that displays a secure connection to users when they enter financial information or complete a transaction (see policy definitions).

The reason for this rule is because you are bringing the user to a site that is using HTTPS and the user may be entering in secure information. You need to give the user confidence that you are not spoofing the website and stealing the entered information.

This is easily remedied by adding a TextBlock (which is read-only) to the page and displaying the web address every time a page loads. Conveniently, the WebView has a perfect event handler for this: OnNavigationStarting.

You can get the web address through the Uri property of the WebViewNavigationStartingEventArgs and then set it to the Text property of your TextBlock. This is better explain with some example code.

Let’s say you have a page with a webview, you want to add a TextBlock to the top. You’ll want to create a Grid with two rows, set the first row’s height to Height=”Auto”. Put the TextBlock in Row 0 and the WebView in Row 1.

Now, let’s hook into NavigationStarting of the WebView, and in the event handler grab the Uri and set it to your TextBlock.Text property.

Here is what you should have (put some placeholder text so you can see what it looks like, also use gray for a foreground text color so the user knows it is read-only).

&amp;lt;Grid Background=&amp;quot;White&amp;quot;&amp;gt;
            &amp;lt;Grid.RowDefinitions&amp;gt;
                &amp;lt;RowDefinition Height=&amp;quot;Auto&amp;quot;/&amp;gt;
                &amp;lt;RowDefinition/&amp;gt;
            &amp;lt;/Grid.RowDefinitions&amp;gt;
            &amp;lt;TextBlock x:Name=&amp;quot;MyAddressBarTextBlock&amp;quot; 
                           Text=&amp;quot;http://www.somewebsite.com&amp;quot; 
                           Foreground=&amp;quot;Gray&amp;quot; /&amp;gt;
            &amp;lt;WebView x:Name=&amp;quot;MyWebView&amp;quot; 
                     NavigationStarting=&amp;quot;MyWebView_OnNavigationStarting&amp;quot;
                     Grid.Row=&amp;quot;1&amp;quot;/&amp;gt;
&amp;lt;/Grid&amp;gt;

…and here is what your event handler should look like:

private void MyWebView_OnNavigationStarting(WebView sender, WebViewNavigationStartingEventArgs args)
{
     try
     {
        //the event args contain the web address, get it from args.Uri and hold it in a local variable
        string websiteAddress = args.Uri.ToString();

        //now set the address to the Textblock's text property
        MyAddressBarTextBlock.Text = websiteAddress;
      }
      catch (Exception ex)
      {
         //do something with the error
      }
}

That’s all there is to it! Every time the WebView is going to load a page, the NavigationStarted event will fire and your TextBlock will show the upcoming address.

Here are some screenshots from the my sample…

WinAddressBar2 WinAddressBar

PhoneWebAddressBar2 PhoneWebAddressBar

Happy Coding!
Lance

Extra Credit and Sample Universal App:
This example is barebones, I challenge you to make a user control that houses the WebView and TextBlock, then you can reuse it across your app instead of doing this on every page. I’ve written a demo Universal app for you that has the following:

  • UserControl in the Shared folder (ReadOnlyWebView.xaml)
  • ProgressRing for loading content
  • Extends Source DependencyProperty and exposes Refresh method
  • Instantiates the custom control in MainPage.xaml for both Phone and Windows projects

This should wet your appetite and show you how to extend it further.

DOWNLOAD THE SAMPLE UNIVERSAL APPLICATION