Custom Page Template for Windows apps

In almost all Windows 8 or phone project involved in we use a create custom page class which derives from the Page class. Doing this allows you centralize functionality such as:

  • Providing a global appbar across your entire app
  • Centralized isloading indicator management
  • Setting different visual states depending on screen resolution

It's very simple to do. Almost too simple. You create a class in your solution inheriting the Page class:

namespace MyApp.Base
{
public abstract class PageBase : Page
{
 protected PageBase()
 {
 // Create global appbar 
 // Hook into this.SizeChanged to set visual states depending on screen width // Create centralized loading mechanism
 }
}
}

To use the new class called PageBase you need to inherit and use that on your xaml.cs and xaml pages. Replace your code with this;

<base:PageBase
xmlns:base="using:MyApp.Base"
....

and in you code behind you should have this instead;

public sealed partial class MainPage : PageBase

That's all it takes guys! - Using his simple maneuver you can now extend the functionality as much as you like and save your self a ton of duplicated code across pages inside your app and it only takes 5 minutes to set up. 

Pro tip: You can do the exact same thing for UserControl's!

Feel free to let me know if you have any issues with the implementation.
 

Extra: More on OTF and TTF fonts in Windows Phone and Store apps

Working with custom fonts in Windows Store and Windows Phone projects requires you to know the 'full font name'. Make sure you get the name completely right, otherwise it wont work! Most of times the name in the character map tool built in to Windows works. - How ever sometimes it does not display the right one, depending on how you have installed the font.

To aviod having a TTF font not working or a OTF font not working in Windows Store or Windows Phone, I recommend using this tool http://us.fontviewer.de/download.html to the right full font name.

In case everything else fails: Remember you always enable 'copy always' for the files, and set the build properties to Content

In xaml you can create font families and reference them on your page:

<Page.Resources>
<FontFamily
x:Key="FontBook">ms-appx:////Styles/Fonts/FuturaStd-Book.otf#Futura Std</FontFamily>
<FontFamily
x:Key="FontHeavy">ms-appx:////Styles/Fonts/FuturaStd-Heavy.otf#Futura Std</FontFamily></Page.Resources>

If you are facing any problems working with fonts - let me know on twitter, and I'll help you out.

Guides in Blend now available for Windows Store, Windows Phone and WPF projects

Guys, great news has arrived. The guide functionality in Blend first demoed by Unni Ravindranathan at the 2013 //build/ conference is now available for all xaml platforms in Blend with the release of Visual Studio 2013 RTM. If you haven't checked out Unni's session, make sure you do - It's really good and give a great insight into what's new for xaml in Visual Studio 2013 and Blend. You can find the session right here; http://channel9.msdn.com/Events/Build/2013/3-321 Dante Gagne wrote a nice blog post covering this topic as well, make sure you check it out.

This small tool guide tool included in Blend will help you achieving pixel perfect design and make the process much easier.

And hey - you can actually export the guides and use them on multiple pages - how cool is that!

Happy coding and thanks for reading, Deani

Convert Hexcodes to Color

Converting a color code string, e.g. "#FFB4DA55" to a Windows.UI.Color proved to be not that simple. Atleast there isn't any buildin way of doing so, so I decided to create a little helper class to do so.

The HelperClass both converts ARBG (colors with alpha values included and RGB colors to Windows.UI.Color.

 

 public class ColorConverterHelper
 {
 public Color HexToColor(String hexString)
 {
 Color outputColor;

 if ((hexString.StartsWith("#")) && (hexString.Length == 9))
 {
 byte a = Byte.Parse(hexString.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);
 byte r = Byte.Parse(hexString.Substring(3, 2), System.Globalization.NumberStyles.HexNumber);
 byte g = Byte.Parse(hexString.Substring(5, 2), System.Globalization.NumberStyles.HexNumber);
 byte b = Byte.Parse(hexString.Substring(7, 2), System.Globalization.NumberStyles.HexNumber);
 outputColor = Color.FromArgb(a, r, g, b);
 }
 else if ((hexString.StartsWith("#")) && (hexString.Length == 7))
 {
 byte r = Byte.Parse(hexString.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);
 byte g = Byte.Parse(hexString.Substring(3, 2), System.Globalization.NumberStyles.HexNumber);
 byte b = Byte.Parse(hexString.Substring(5, 2), System.Globalization.NumberStyles.HexNumber);
 outputColor = Color.FromArgb(255, r, g, b);
 }
 else
 {
 outputColor = Colors.White;
 }

 return outputColor;
 }
 }

I hope the source helps you solving problems like it did for me. Feel free to reach out to me if you have any questions or problems with the implementation.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Resources used in WDID Talk in Aarhus, 10/05/13

The 10th of may I talked about "The power of design and animation for Windows Phone" on behalf of the Windows Phone Developers Group in Denmark. Thanks to everyone that attended. I hope you've enjoyed the session.

The slides and the complete source is available here:

SLIDES: http://sdrv.ms/16lAYjQ

SOURCE: http://sdrv.ms/10mCASa

 

Thanks again for joining in.

@deanihansen

CollectionViewSource and design time data in Blend

The CollectionViewSource is nothing new - it exists both in WPF and Silverlight and in Windows Store applications. This sample will be based on using it in a Windows Store app, but the basic principles applies to all platforms.

The CollectionViewSource works as a Proxy over a collection classes and enables grouping. This is extremely powerful if we are working with a GridView and we want to display groups of collections.

Example on group of collections:

WorkshopViewModel that contains a list of groups - List<Group> Groups - and each group contains a list of members - List<GroupMembers> Members

And instead of having a ItemsControl that first creates all the groups for us, and then inside each item, having a new items control that then displays all the members, we can use the CollectionViewSource and a GridView and voilà – job now done.

 

Creating a CollectionViewSource with designtime data in Blend

Sorry, too good to be true - it can’t be done. At least not by using the UI, as far as I know. But what we can do instead is typing in the XAML we need for it, and placing it inside the resource dictionary of the page.

<common:LayoutAwarePage.Resources>

<CollectionViewSource
x:Name="csv"
Source="{Binding Groups}"
ItemsPath="Members" 
IsSourceGrouped="true"
d:Source="{BindingGroups,Source="{d:DesignInstance Type=viewmodel:WorkshopViewModel, IsDesignTimeCreatable=True}}" />
 </common:LayoutAwarePage.Resources>

Here’s works:

x:Name: This is the name of the collection, we’ll use this when we are referencing it from our GridView

Source: This is where we create the binding to the parent groups in the ViewModel.

ItemsPath: This is the name of the collection inside the parent. So we have a group, and this contains a collection of members called Members.

IsSourceGrouped: Indicates whether our source, is already grouped, which it is, since it is a collection containing items, where each item has its own collection.

If you just put in the following XAML:

<CollectionViewSource x:Name="csv" />

You can see the the CollectionViewSource is available through the resource tab inside Blend.

Here we can set our bindings, and put in the ItemsPath, and IsSourceGrouped.

 

One last line that’s VERY VERY important, is this one:

d:Source="{Binding Groups, Source={d:DesignInstance Type=viewmodel:WorkshopViewModel, IsDesignTimeCreatable=True}}"

Because the CollectionViewSource works as a proxy and is referenced as a StaticResource is does not get the your design time data even if you’ve set the d:DataContext on the Page.

Therefore you’ll need to set your design time data explicitly on the CollectionViewSource itself too.

And voilà – you got design time data.
 

Making it work with a GridView.

I’ve used the CollectionViewSource on a GridView

One thing here you should note is, when you are creating your binding for the GridView. Do NOT drag the resource onto the GridView, from the Resource tab in Blend. This will create an incorrect binding!

Make sure your binding looks like this:

<GridView ItemsSource="{Binding Source={StaticResource csv}}" />

With the Binding source being a StaticResource.

You can download my complete sample with the CollectionViewSource, Design time data and everything, right here.

Feel free to reach out to me if using a CollectionViewSource gives you any problems.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

New Expression Blend resource on Channel9

Channel 9's DevRadio, by Jerry Nixon, recently looked at some of the new things with xaml and Expression Blend. Here is one thing you should definitely check out:

Building your Windows 8 Apps with XAML and Blend Navit Saxena and Hari Menon from the Microsoft Blend team to the show as they discuss the latest features and improvements made in Blend as it pertains to XAML developers and its integration with Visual Studio 2012