Making a TextBox only accept numeric input using a behavior – Windows apps

Recently I came across a Windows app dev situation where I needed to have a TextBox only accept numeric input. The usual solution for this would be to hook into the KeyDown event and put some filtering logic in the code behind. However, I needed this ‘numeric input only’ behavior in multiple places throughout my app, so I decided to create a behavior instead.

Creating the behavior gives me multiple benefits
-   Centralizing my logic in case of maintenance
-   Keeping it out of my code behind for my pages and usercontrols
-   The behavior of the TextBox is completely transparent when reading down through the xaml.

The behavior is to found here on @Sorskoot‘s website, blendbehaviors.net

The source is here as well:

Thanks for reading, and please let me know if you find the code useful.

Happy coding!
Deani

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

Great news has arrived. The designer in Blend now supports guides! 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.
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 hey – you can actually export the guides and use them on multiple pages – how cool is that!

Happy coding and thanks for reading,
Deani

Using 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.

Remember you need to embed the font-file as a resource and make sure the font is embedded as a part of the project.
Rightclick the font, and change the build properties to Embedded Resource (Windows Store) or Resource (Windows Phone).

Using a custom TTF or OTF in XAML :

clip_image001

Important: Replace /CustomFonts with your assembly name
For a complete guide to using fonts, check out this blogpost.

Are you facing any problems working with fonts? – let me know in the comments.

New features in Blend for Visual Studio 2013 Preview

Yesterday the Visual Studio 2013 Preview was released together with Windows 8.1 Preview . And this includes a great set of new features for Blend that I will cover in great detail soon.

Major improvements

XAML editor improvements
The XAML editor in Visual Studio 2013 Preview includes IntelliSense for data bindings and resources, smart commenting, and go-to definition.

Rulers and guides
Create custom guides.

Better style editing support
Edit styles and templates in the context of the document where they’re used, even if they’re actually defined in another, shared location  This means no more design time datacontext on every single usercontrol.

Sample data support
The data panel enhances sample data support in XAML projects for the Windows Store. This includes the ability to create sample data from JSON content! – It is now also possible to set the design time datacontext directly in Blend.

View state authoring
The device panel in Blend for Microsoft Visual Studio 2013 Preview and Visual Studio 2013 Preview supports updated view states properties and requirements to support variable minimum widths. Primarily this is due to the fact that Snapped mode no longer isn’t the only mode. It is now possible to have multiple apps next to each other. This ability will make sure your UI looks flawless no matter what mode your app is in.

Other improvements

CollctionViewSource
Blend now offers great support for working with CollectionViewSource, which is something I’ve personally missed a lot.

Behaviors
Finally behaviors is coming to Windows Store. This includes a brand new behavior called IncrementalUpdateBehavior that will make your ItemControls run as smooth and fast as possible.

All this is very very great news for all Blend users out there. Installing the preview does not override your Visual Studio 2012, so go get started. And the best part is, the new Blend features works with all your Windows Store 8.0 projects, so go get started!

Follow me on twitter.

//build/ app for Windows Store and phone

In Bluefragments, where I work, we love to do fun stuff. Lately we have been working on a BUILD app for Windows Store and 7 days ago it was released. The download numbers just passed 1.000!

We wanted to build an app that is great to navigate through the content of the BUILD 13 conference. At the same time it should work as an archive over the previous BUILD conferences allowing the user to watch recorded sessions and published slides and demos.

If you haven’t tried it out, please give it a spin and send us your thoughts – it’s available here.

Currently we are working hard to finish our BUILD app for Windows Phone as well. And believe me: It looking good!! And the first version will include the BUILD 13 program. Stay tuned!

If you got any feedback, please don’t hesitate to contact us directly at buildapp@bluefragments.com.

Remember to follow me on twitter for the latest blogposts and news about the build app.

A complete guide to working with custom fonts

One of the things that necessary to create a truly unique and powerful design on both Windows Phone and Store is the right typography. I absolutely love Segoe UI and Segoe WP. I think it is very modern, simplistic, highly modern and current but there are beautiful alternatives out there as well!

Check out Google Fonts for a lot great fonts.

However when you want to create a beautiful and esthetic design where both your content and layout truly shines you should consider using another font than Segoe UI if something else fits your design better.

Since Silverlight 2.0 both truetype (ttf) and open type (otf) fonts have both been supported and for Windows Store and Windows Phone it’s no exception.

The approaches on both platforms is quite alike, and the way you embed either type of font is completely the same.

How to guide

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

image

2) Secondly, you need to embed the file as a resource and make sure the font is embedded as a part of the project.

Rightclick the font, and change the build properties to Embedded Resource (Windows Store) or Resource (Windows Phone)

image   image

3) Refer to the new font wherever you want to use it.
image

Important: Replace /CustomFonts with your assembly name. And make sure you use the ‘font friendly name’ after the #. The way you find the font friendly name is by double clicking the font and looking up the name inside the dialog that pops up:

image

What comes after “Font name:” is the friendly name.

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

Extra

4) To make it easier for your self, you can create a FontFamily resource inside your resource dictionary and just refer to it wherever you want to use the custom font.

image

5) If you wish to apply the font universally inside your app, you can create a TextBlock style that uses the FontFamily, and use that as a default style for all TextBlocks.

Create the FontFamily resource in Blend, by choosing ‘Convert to new Resource’, after clicking the indicator next to the font family, and place it inside a resource dictionary.

image >>> image

Then you select a TextBlock in the “Objects and timeline” and go the menu ‘Object’ > ‘Edit Style’ > ‘Create empty’ and place it inside a resource dictionary.

image

Lastly you need to apply the FontFamily Resource to the style.

image

So when you look inside your resource dictionary you should see the following code:

image

And since the style doesn’t have a x:Name set all TextBlocks will use this style unless they have a style or local value set that tells it to do something else.

The result should looks something like this:

image

Thanks for reading and remember to follow me on twitter for the most recent posts

The Source is available hereNote: the sample is made for Windows Store apps but the differences is mentioned in the post above.

Two free online talks this month!

Windows Developers in Denmark is hosting two talks this month, and the first one is already TONIGHT!

Tonight!!!: ONLINE TALK WITH FILIP SKAKUN FROM THE FRESH PAINT TEAM

In this talk Filip Shakun, from the Microsoft Fresh Paint team, talk about how it is to come back to Microsoft Corp. for the 3rd time. Filip Shakun tried different positions both in and outside Microsoft hunting for the perfect UX job. He’s highly specialized in the XAML technology and is they one behind the WinRT XAML Toolkit.

http://windev02.eventbrite.com

MOVE YOUR WINDOWS PHONE APP TO WINDOWS 8
The second talk is our own Thomas Martinsen, from Bluefragments, that talks about porting apps from Windows Phone to Windows 8. The talk focuses on Portable Class Libraries and the patterns that should be used when working with code across multiple platforms. The talk faces some of the challenges as well as different degrees of portability that can be achieved using Portable Class Libraries.

Both talks is held online and requires the Lync 2010 Attendee Client. You can download the client on http://lync2010.windowsdev.dk

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.

image

Creating a CollectionViewSource 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.

Here’s how it work out:

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:

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

image

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

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

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:

With the Binding source being a StaticResource.

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

Thanks for reading and remember to follow me on twitter and facebook for the newest blogposts on using Blend.

Webtalk: XAML Productivity with Blend for Visual Studio

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.

[vimeo http://www.vimeo.com/63386483 w=500&h=375]
Increase XAML productivity with Blend for Visual Studio

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.

@deanihansen

The property value indicator in Blend

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.

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

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 gray out in Blend.

clip_image002

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 hasn’t been set, and hereby does the default value for this property apply.

 

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:

clip_image003
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 declaring it locally and here by the default value doesn’t apply.
Example:

clip_image004

The square still white since we explicitly declared the margin in xaml:
<Grid Margin=”0,0,0,0″ />

 

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 of property values – this can be achived for instance by declaring the values as a resources.
For instance you could have a background color you would want to use multiple places inside your page or application. By declaring the color as a resource and reference the same resources all the places you would want to use the color, you’ll get a much cleaner and easy maintainable code.

Referencing a resource will result in a green indicator.

clip_image005

And the xaml will look like this:

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

Note: 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, that’s referenced as a StaticResource.

Here the background comes from the style on the grid. This will result in the blue indicator here:

clip_image006

If we look at the Style property for the grid it looks like this:

clip_image007

And the xaml for both of them looks like this:

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

Note: A style can be created by going to Object in the top menu, then selecting edit style and create empty.. For a complete guide on creating styles, see the following blogpost.

 

The binding value

Bindings is one of the fundamental things when working with xaml is bindings. If you create this binding in Blend the indicator will turn yellow.

clip_image008

This means the binding is set and it will now use the binding to obtain the value. Note it’s the same color for all kind of bindings. The xaml:

<Grid Background=”{Binding BackgroundBrush}” />

Note: 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.

Thanks for reading and happy coding.
Remember to follow me on twitter and join the facebook group for the latest posts and more information on Blend and design.

RGB, HLS, HSB & CMYK in Blend

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.

image

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

image

Happy coding and remember to follow me on twitter: @deanihansen

Creating an AppBar

The AppBar is one of the fundemental parts of the design philosophy for Windows Store apps;

- Do more with less

This means removing all distractions for the user, and the user enjoy the content, not the chrome. Removing distractions, such as buttons from the screen, requires them to live some where else inside your app – their new home; The AppBar.

Fortunately creating an AppBar is REALLY easy. Check out this video to see how you do it using Expression Blend:

[vimeo http://www.vimeo.com/62191608 w=500&h=281]

Hint: You already have a ton of symbols on your PC for the AppBar in the font: Segoe UI Symbol. You can find it using the Character map included in Windows.  Go to your Windows 8 Start scren, and type in Char and it should pop right op. 
image

The video also shows how you can use the symbols from the font.

Happy coding!

Expression Blend talk on Danish Developer Conference

If you live in Denmark and you have the chance, you should strongly consider checking out this years Danish Developers Conference.
The dates are the 2/4 and the 4/4 this year.
There is a lot of GREAT speakers and sessions on exciting stuff. I’m having a session there on Designing with Expression Blend. Besides this, some of the highlights are of course the Keynote with Jon Galloway, three sessions on Visual Studio and Web with Mads Kristensen from Microsoft Corp, and Thomas Martinsen from Bluefragments talks about portable class libraries in depth.
Besides this there is plenty of goodies like sessions on creating games with Unity, advanced sessions on Windows Phone and Windows 8 Development and MUCH more.

If you are not already going, there is really no excuse. This years line up is awesome!

Check out the website and get your ticket asap!

See you at DDC13!

pssst! – Check out the great DDC13 Windows Store app by Bluefragments! Microsofts own app got owned! Winking smile

LineStackingStategy in Expression Blend

LineStackingStrategy is a property on the TextBlock controls. If used right you can control the LineHeight and make text lines get closer to each other. This can be useful and give a nice visual impression in some cases, like in multiline headers.

The TextBlock have three properties for LineStackingStrategy;

MaxHeight 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.
Note: If you change your LineHeight on a TextBlock it will not affect it since MaxHeight overrules it and decides the LineHeight .
BlockLineHeight The stack height is determined by setting the LineHeight value. Each line will have the minimum nessecary lineheight per default.
BaselineToBaseline The stack height is 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:

image

Setting the LineStackingStrategy and LineHeight in Blend

When you select your TextBlock it’s available in the Text category in the Properties Pane.
You have to Extend the category by clicking the downpointing arrow to see it.image

At the top of your Text category in the Properties Pane you have three tabs; Font, Paragraph and Line indent. You find the LineHeight inside the Paragraph part.

image

The source code for this post is available here.

Thanks for reading.

Happy coding !