How to Build a Gauge Control for Universal Windows App

In this tutorial I will show you how to build a Gauge Control for your Universal Windows App. This is how it looks.

Here are the steps to building a custom Gauge control for your universal Windows app:

Step 1: Add Gauge class in the Shared Project

Add Gauge class to Controls folder in the Shared project. Replace the empty Gauge class with the following code.

Step 2: Add a Reference to Controls Directory in MainPage.xaml

Add a xmlns reference to Controls directory in MainPage.xaml.

Step 3: Add the Style for Gauge Control in Page Resources

Now add the style for Gauge control in <Page.Resources></Page.Resources>.

Instead of adding the Style in MainPage.xaml you could add the Style in SharedResources.xaml folder. Follow our tutorial on Shared theme resources to see how to use shared resources in universal Windows Apps.

Using Shared Theme Resources in Universal Windows Apps.

Step 4: Add the XAML for Gauge Control in the Page

Now simply use the Gauge control in your page.

Deploy the app to see if it works.

Feel free to download the source code for reference or clone it from Github.

Download full project Gauge.zip

Using Shared Theme Resources in Universal Windows Apps

Using Resource Dictionary to store reusable Styles and DataTemplates is a clean way of building an app. In Universal Windows Apps you can have shared Theme Resources which can be used in both Windows Phone and Windows project. To handle scenarios where some resources are platform specific and others are shared you could have two resource dictionaries.

  • SharedResources: For shared resources(In shared project)
  • PlatformSpecificThemes: For platform specific resources(In each of the platform specific projects using the same name)

The solution should something similar to the image shown below.

We will use the same name PlatformSpecificThemes in both the Windows Phone and Windows project for our platform specific resources. What the compiler will do for us is that it will automatically resolve the resource to be used in each of the projects. Anything contained in the “Shared” pseudo-project gets compiled individually into each platform-specific project.

Here are the steps to add shared theme resources in your app:

Step 1: Add a new Resource Dictionary in the Shared Project

Add a new Resource Dictionary named SharedResources.xaml in your Shared project. We have added this resource dictionary under Themes folder. This resource dictionary will contain resources which will be common for both the apps. Styles and Templates defined in this file cab be used on both Windows Phone and Windows.

Step 2: Add a new Resource Dictionary in each of the Platform Specific Projects

Next, we add a new Resource Dictionary file named PlatformSpecificThemes.xaml in each of the platform specific projects ie. Windows Phone and Windows. We keep the folder structure same for all the three projects. The platform specific resource file is kept under Themes folder in both the Windows Phone and Windows apps. You can refer to the project structure screenshot at the beginning of the tutorial.

Step 3: Define Resources in App.xaml

In the App.xaml file of the Shared project define the ResourceDictionary to be used by your projects.

From there, just put any XAML resources you need in the platform-specific PlatformSpecificThemes.xaml file and they will become available throughout your application. Any styles or other resources will work in the Visual Studio designer window and the new XAML static resource auto-completion will continue to work exactly as you’d expect.

The App.xaml file looks similar to this after defining the ResourceDictionary.

Note that ReSharper may continue to show an error but the project will build successfully.

This also makes it easier to share pages and user controls between platforms. You can reference platform-specific styles, DataTemplates, or any other static resource from shared pages/controls as long as a resource exists with the same name on each platform.

Using Platform Specific Resource in Shared Page.

Here’s an example with a shared page. The style MyTextBlockStyle sets the text color to red on Windows and green on Windows Phone. (By the way, you can switch between viewing within the context of Windows or Windows Phone by using the drop-down box.)

In the PlatformSpecificThemes.xaml for Windows Phone project add the following style.

In the PlatformSpecificThemes.xaml for Windows project add the following style.

In the MainPage.xaml add a TextBlock that uses MyTextBlockStyle.

When you deploy the solution on Windows you will see the text appear in red and when you run it on Windows Phone it will appear green.

Here’s how the page looks on Windows.

And here’s how the page looks on Windows Phone.

Using Shared Resource in Platform Specific Project

This is a more general scenario where resources defined in the shared project can be used in any of the platform specific projects. We define a SolidColorBrush named ThemeColor in our SharedResources.xaml file and we can then use it in any of the projects ie any XAML page in the shared project or in Windows Phone or Windows.

We add a BlankPage.xaml in each of the platform specific projects and add the following XAML code in both of them.

Here’s how the XAML is rendered on Windows Phone.

Here’s how it is rendered on Windows.

Notice the following,

  • Both the apps picked up ThemeColor resource from SharedResource.xaml
  • The apps picked up MyTextBlockStyle resource from their PlatformSpecificThemes.xaml

Please, feel free to download the source code for reference or clone it from Github.

Download project SharedThemeResources.zip

Wrap Grid with Variable Sized Items for Windows Phone 8.1

In this tutorial I will show you how to wrap variable sized ListView Items in Windows Phone 8.1. This is how our end product looks.

.wrap_grid

Here are the steps:

Step 1: Create a custom WrapGrid

Firstly we would be creating a custom WrapGrid by overriding MeasureOverride and ArrangeOverride methods of Panel. So we have added a new class WrapPanel in our project under Controls folder.
controls_folder

The WrapGrid class to be added is as follows.

Step 2: Define ItemsPanelTemplate

We will be defining the ItemsPanelTemplate for the ListView to be used. Define this as local resources.

Step 3: Define DataTemplate for the ListView

Next we arbitrarily define a DataTemplate for the ListView which we are using. Define this as local resources.

Step 4: Define ListView Style

For our convenience and for allowing reusability we will be defining a Style for our ListView as local resource.

Step 5: Add a ListView in MainPage.xaml

Next, we add a ListView in our MainPage.

Step 6: Add a AddItems method to populate items.

We call this function in the OnNavigatedTo event handler to set the ItemSource of our ListView.

That’s it. Try running the app in the emulator and see the magic for yourself. Download the full source code for your reference.

Windows Phone 8.1/Windows 10 WinRT

Download full project Wrap Grid 8.1

Windows Phone 8.1 Silverlight

Code for implementing it in Windows Phone 8 is quite similar. You can grab the following project if you are working on Windows Phone 8 or Windows Phone 8.1 Silverlight.

Download full project Wrap Grid WP8