A complete guide to working with custom fonts in your Windows and Windows Phone app

in , ,

One thing that really make an app stand out is using a special font or typeface (set of fonts in different weights and styles). It's not without reason that it's said that the font / typeface is one of the corner stones in visual indentity branding.
The Windows apps use Segoe UI and Segoe WP per default. While they are both very modern, simplistic, highly modern and current they are used by almost all apps out there. 
That alone is a reason for you to choose a custom font. No body wan'ts a product that looks just like all the others on the shelf.

A lot of wildly popular fonts such as Proxima Nova and Helvetica comes with a pretty high cost (+1,000$) for a independant developer. 
Fortunately there's free and absolutely beautiful alternatives out there!  
A great place to start is at Google Fonts. They got a lot of nice and free fonts mostly used in webdevelopment but they work perfectly in your app too. Find a typeface you like, download it and let's implement it in our app.

Implementing a custom font in Windows or Windows Phone app

1) First, you need to include the font or fonts in the project. Simply add the font to the project as a file.

 

 

 

 

2) Secondly, you need to change the build setting for the font files.
The setting should say:
Build action - Content
Copy to Output directory - Copy if newer

You can change the build settings by selecting the files, right click and say properties to see the properties panel, and change the settings.

 

 

3) Refer to the new font wherever you want to use it.
The easiest way to do that is by using the designer in Blend and Visual Studio 

You'll find your fonts which is added to the project at the very top of the items list.  If they are not there, something is wrong at you might want to fall back to the way it's done in VS2013. More about that later. 

 

4) In the code you should see one of these two in your code: 

 <TextBlock
FontFamily="ms-appx:///Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"
FontSize="16"
 Text="Hello stranger! Thank you for visiting blendrocks" />

or this:  FontFamily="Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"

Here's a few very important things that you need to know when working with custom fonts:

  • The font weight property should never be used. Always refer the correct font and set the weight using the file instead. 
  • If you add the font familiy to a resource dictionary you might want to reference the absolute path ms-appx:/// rather that using a relative path.
  • This part "#Helvetica Neue LT Std" is a suffix containing the Preferred Family. It's required in order for the custom font to work. The suffix has to be absolutely correct and it's case sensitive.
    • The easiest way to find it is to use a tool called dp4 font viewer. It's free and can be found downloaded here. Find your font through the program, go to the info tap copy the Preferred Family.
    • Do NOT use Windows built in font viewer as it does NOT show the correct preferred font family.

Using this technique, you should be able to use all open type and true type fonts inside your Windows and Windows Phone app.

Pro tip: To make it easier for your self, you can create a FontFamily resource inside your resource dictionary and just reference it wherever you want to use the custom font.
Your xaml could look something like this:

<FontFamily x:Key="HelveticNeueMediumFont">
Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std</FontFamily>
nd 
<TextBlock
FontFamily="{StaticResource HelveticNeueMediumFont}"
FontSize="16"
Text="Hello stranger! Thank you for visiting blendrocks" />

For Visual Studio and Blend 2013 users

Unfortunately the dropdown containing fonts doesn't work nearly as good. So you have to write it in xaml instead. But if you use the dp4 font viewer tool and you copy the xaml shown above, you should be good to go. If not please reach out to me and I'll do my best to help you.

For Windows Phone 8 developers

To implement a custom font on Windows Phone 8 you have to reference the font a bit different. You should not use ms-appx://. Instead you should write "/AssemblyNameHere;component/path".
The assemblyname is usually the same as the project. But to be sure, remember to check it by right clicking the project in the solution explore and selecting properties. In the popup you'll find the Assembly name right away. In this sample the Assembly name is AwesomeFontSample:

<TextBlock 
Text="&#xF004;"
FontFamily="/AwesomeFontSample;component/Fonts/fontawesome-webfont.ttf#FontAwesome" 
/>

You can download a Windows Phone 8 sample here.


Wrap up

Working with custom fonts is easy when working with TextBlocks  But if you want to use is through out the app you might have to modify the template of certain controls suchs a ComboBox and Buttons.
Feel free to reach out to me if you need help on implementing your custom fonts or if you have comments or feedback to the article above. 

Happy coding!

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

CollectionViewSource and design time data in Blend

in , ,

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.

Video: Increase your XAML Productivity with Blend for Visual Studio (1h 27 min)

in , ,

The 26th of March I held a webtalk online on increasing the XAML productivity with Blend for Visual Studio.

Per request the webtalk was recorded and is now available.

The slides and the source code is available through this link http://sdrv.ms/ZgFMoL

The talk was hosted by the Windows Developers in Denmark usergroup.

Thanks for reading.
I hope you’ll enjoy the video. If you have any comments or feedback feel free to reach out to me in comments or on twitter @deanihansen.

The property value indicator in the Blend and Visual Studio designer

in ,

One of the most essential tasks in Blend is to work with properties.

When working with properties it’s important to understand that all properties have a default value. If you don’t set the property in XAML the control will use the default value.

For instance; the group will stretch both its horizontal and vertical alignment unless you tell it to do otherwise by setting the property.

Example

Example

All properties result have a visual indicator in Blend, indicating how its value is set or obtained.

Here the white square indicates the value is set locally. The property’s value can be set in lot of different ways - it can be set as a local value, as a binding, StaticResource or as an ambient property.

All these different ways of setting the property have a separate colored indicator in Blend. We are now going to talk a bit about these different indicators.

 

The property value indicator in Blend

All the different indicators is shown using the Grid control in a Windows Store application.

The default value

The default value - when the value when a property is not set - will appear as grayed out in Blend or Visual Studio.

Here we see the margin is the default value.

The xaml looks like this:  <Grid />

In the xaml of the grid we can see the value is no where to be found. The control will therefore use it's value for the property.

 

The local value

Setting a property explicitly in xaml – for instance by changing the property to a value in Blend, we will see that the indicator will be white, indicating a local value has been set:

Having set the Margin results in a local indicator, and the xaml looks like this: <Grid Margin="10,0,10,0" />

Important note: if you set the local value to the same as the default value, it’s still set locally and the default value doesn’t apply even though it's the same.

Example with locally declared margin with the same value as default: <Grid Margin="0,0,0,0" />

The square still white since we explicitly declared the margin locally in the xaml.

 

The StaticResource value

One of the great benefits of working with xaml is that it’s very easy to obtain a high reusability of different kinds bindings and resource references. 

For instance you could have a page background color you would use across all pages inside your app. By declaring the color as a central resource and reference the very same resources on all your pages you’ll get a much cleaner and easy maintainable code.

By Referencing a resource as a staticresource the indicator will turn green.

And the xaml will look like this:

<Page.Resources>
<SolidColorBrush x:Key="RubinRedBrush" Color="#FF6A0E0E"/>
</Page.Resources>
<Grid Background="{StaticResource RubinRedBrush}" />

Pro tip: To create this kind of resource you can click the white indicator, and then click Convert to new Resource.

The Ambient value

Sometimes you can see a property’s indicator be blue and the tooltip for the property saying ambient. The reason for this is the fact that the value is obtained through a style or a template.

If the background comes from astyle on the grid the indicator would be blue like this:

The reason for the blue indicator is because we've set the style on the grid using xaml like this:

<Page.Resources>
<Style x:Key="GridStyle" TargetType="Grid">
<Setter Property="Background" Value="#FFA80D0D"/>
</Style>
</Page.Resources>
<Grid Style="{StaticResource GridStyle}" />

 

The binding value

Bindings is one of the fundamental things when working with xaml and mvvm. If you create a binding in Blend or Visual studio the indicator in the deisgner will turn yellow.

The yellow color means the binding is set and it will now use the binding to obtain it's value.

The xaml example: <Grid Background="{Binding BackgroundBrush}" />

Pro tip: The binding can be created by clicking the indicator and choosing Create data binding…

Final words

The visual indicator can be a great help to see how the value you are working on is set, and where to look if you want to alter the value. If you are referencing a resource you can in most cases edit the resource directly by clicking the indicator and choosing 'Edit resource'. But remember.. You are then changing the resource that more controls or pages could be referencing.

Thanks for reading and happy coding. Please reach out to me if you have questions or need help understanding how indicators work in Blend and Visual Studio.

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

Working with RGB, HLS, HSB & CMYK in Blend and Visual Studio

in ,

A very nice feature in Blend is the fact that it supports multiple color systems. Per standard it's using RGB, which you can see in the properties view of any element containing some kind of ColorBrush. But actually Blend gives you the option of putting in CMYK, HLS and HSB too!

The way you can change between the different color modes is by clicking the underlined letters next to the colorpicker.

Note: If you choose CMYK, HLS or HSB colors, they get converted to a RGB color.

Remember to reuse the same color through out your app – do this by creating the color as a resource and then just reference it.

The easiest way to create a color as a resource is to click the tiny square next to the property and choose Convert to New Resource

Feel free to reach out to me if you need additional help or insight in working with RGB, HLS, HSB & CMYK in Blend or Visual Studio.

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

LineStackingStategy on TextBlock in Windows apps

in ,

LineStackingStrategy is a property on the TextBlock controls.
If used right you can control the LineHeight and make text lines get closer or further away from to each other. This can be useful to increase readability for text, creating multiline header etc.

The TextBlock have three options for the LineStackingStrategy property: MaxHeight, BlockLineHeight and BaselineToBaseline.

MaxHeight is the default property value on a TextBlock. What MaxHeight does is that it looks at the tallest element in the line and that item determine the stack height of the specific line.

BlockLineHeight sets the height is determined the LineHeight property value. Each line will have the minimum nessecary lineheight per default dertimined by the fontsize.

BaselineToBaseline stacks the height determined by adding LineHeight to the baseline of the previous line. 
Important: Even though you change the LineStackStrategy from default, you have to set the LineHeight to actually apply it.

Visual example of the LineStackingStrategy applied

There is used a 18pt LineHeight to demo this. You see the big difference when you have different fontsizes inside a text. The column on the left is how it looks with default settings:

If you have problems working with lineheight just reach out to me. I'd be more than happy to help you.
Thanks for reading.

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