The Ultra-Mobile PC is still a relatively new form factor in the PC World. I've written a sample application that illustrates some of the published design guidelines for UMPC's and includes a managed Power and Network aware class so you can add this functionality to your application.
Ultra-Mobile PC's are a great new addition to the set of hardware platforms to run your applications. They run XP, and now Vista, and being very small and light they are well suited for mobile use. From a development point of view there is not that much to do (if anything) in order to make sure your application runs well on this PC's. The sample I've created focuses on three things:
- Creating a re-usable header bar XAML component so my application can show the user mobile power/network status when in full-screen mode
- Using the rich vector graphics of Windows Presentation Foundation (WPF) to scale my application's content well for any sized display resolution
- Making sure I choose controls that work well with any input hardware (Mouse, Digitizer, Touch)
The sample includes the InkCube WPF sample that ships in the Windows Vista SDK as the main window content. I added this to have something of interest in this application, but this could be any XAML code.
The sample I chose allows you to create ink on any side of a cube and in real-time. The ink is rendered on the cube while it is rotating (see screen shot). In adding the sample, however, I did modify the layout and controls slightly to be optimized for the smaller resolution touch displays.
Header Bar Sample Component Overview
In looking at the Origami Experience product that Microsoft ships on UMPC's, I created a 'headerbar' in XAML with some C# back-end code to provide my user with information about the system. The information is comprised of items that add value to a mobile user: Battery status, network connection status and system time/date.
There are many articles that include sample code for this functionality (such as this one by Dr.Neil Roodyn: Mobile PC Power Management) but I have included the managed wrappers for both network and power notification for use in this WPF application. I also added a few simple icons and tooltip data for the user and combined the two sets of notifications (Power and Network Status) into one class in the application.
The following sections detail the code I used and reasons for some of the layout choices:
Full Screen Mode
It's pretty obvious how to implement this Full Screen mode, which makes it an inexpensive addition to any application, and allows it to utilize the entire real estate of the display. Here is the code:
void OnFullScreenClick(object sender, RoutedEventArgs e)
if (Application.Current.MainWindow.WindowStyle != WindowStyle.None)
this.MinimizeControl.Visibility = Visibility.Visible;
this.CloseControl.Visibility = Visibility.Visible;
Application.Current.MainWindow.WindowState = WindowState.Maximized;
Application.Current.MainWindow.WindowStyle = WindowStyle.None;
this.FullScreentext.Text = "2";
this.MinimizeControl.Visibility = Visibility.Collapsed;
this.CloseControl.Visibility = Visibility.Collapsed;
Application.Current.MainWindow.WindowState = WindowState.Normal;
FullScreentext.Text = "1";
Even though this is a WPF sample, I still work with a lot of developers using Native C++ Win32 APIs. Just in case you want this type of behavior in your Win32 application, here is the C++ version:
BOOL ToggleFullScreen(HWND hWnd)
long lWindowStyle = GetWindowLong(hWnd, GWL_STYLE);
if(wp.showCmd == SW_SHOWMAXIMIZED)
SetWindowLong(hWnd, GWL_STYLE, lWindowStyle | WS_BORDER );
wp.showCmd = SW_SHOWNORMAL;
wp.length = sizeof(wp);
SetWindowLong(hWnd, GWL_STYLE, lWindowStyle & ~WS_BORDER );
wp.showCmd = SW_SHOWMAXIMIZED;
wp.length = sizeof(wp);
Power and Network Status
Smart use of power is a must in today's mobile world. I have re-purposed some existing sample code to present icons for power status and network status in this sample. To use the code, you need to instantiate the
class and add handlers to watch for system changes to either power or network status. The calls for both of these topics are still from Win32, but the managed wrappers are included to make it easier to call from .NET. Here is a snippet of that code:
void OnLoaded(object sender, RoutedEventArgs e)
powerAndNetworkStatus = new PowerNetworkAware();
powerModeChangeHandler = new
SystemEvents.PowerModeChanged += powerModeChangeHandler;
networkChangedHandler = new NetworkAvailabilityChangedEventHandler(
NetworkChange.NetworkAvailabilityChanged += networkChangedHandler;
The event handlers simply call the
UpdateNetworkStatus helpers to update the
PowerNetworkAware class data and then choose which icons to display.
ToolTip myTooltip = new ToolTip();
myTooltip.Content = powerAndNetworkStatus.currentNetworkLabel;
this.NetworkStatusIndicator.ToolTip = myTooltip;
String networkImageName = @"Images/wirelessgood.ico";
if (powerAndNetworkStatus.networkStatus == "Disconnected")
networkImageName = @"Images/wirelessnone.ico";
else if (powerAndNetworkStatus.networkStatus == "Connectivity Lo")
networkImageName = @"Images/wirelesslow.ico";
BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri(networkImageName, UriKind.RelativeOrAbsolute);
this.NetworkStatusIndicator.Source = bi;
The icons for power and network will update themselves based on the system events above. Since your machine may be connected to more than one network, I've chosen to display the status, name and speed of the fastest available network. So if you're running on a notebook/tablet with both wireless and wired Ethernet, you'll get the status of the wired connection until you un-plug it.
I've added a click handler for these items as well so the user can get to the associated control panel applets. Following is the code I used for this:
void PowerStatusClick(object sender, RoutedEventArgs e)
Process.Start("rundll32", "shell32,Control_RunDLL powercfg.cpl");
void NetworkStatusClick(object sender, RoutedEventArgs e)
Process.Start("rundll32", "shell32,Control_RunDLL ncpa.cpl");
Tips on optimizing content for small resolutions (such as the UMPC)
Microsoft has published a Mobile PC Development Guide that suggests best-practices for developing Mobile PC and UMPC applications. This sample attempts to use those principles in its design. The main items to consider here are to:
- Make sure the application scales well to the active resolution
- Use controls that work well with both Mouse and Touch interaction - such as using buttons rather than slider controls
- Create controls that are sized appropriately for the display - adding the full-screen ability and making buttons easily targeted with touch
- Think about how the user may be interacting with this application if they are mobile - providing data at a glance and reducing the density of data
Other considerations for power management are to disable CPU intensive functionality if the PC is on battery or if the application is minimized. In this sample, I could have chosen to disable the rotating, animated cube if the application is minimized or not in the foreground. This would reduce the load on the CPU and in turn, save battery power.
Points of Interest
Aside from the design guidelines and existing Power/Nework samples I used in researching this, I found the Viewbox in WPF to be the perfect control in making the content of my application scale well for any resolution/display. Each of the controls I used for the header bar are a gray-based gradient so they remain colourless. This is interesting since I chose to load whatever desktop image that Windows is currently using as the background of this sample. Having colourless controls enables them to work well with any background color/image.
9th of March, 2007 - Created article