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

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

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

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

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.


Create a Resource in Expression Blend

Heres a small guide to how you get started creating resources inside Expression Blend and place it any given resource dictionary.

1.  Select a given Framework Element in the Objects and Timeline tab. In this example we will Select a TextBlock.

 

 

2. Select the Foreground property and change the color in the Color Editor inside the the Property tab.

 

 

 

 

3. Click the white square and choose: Convert to new resource.

Tip: The white square means the property have a value set locally on the page or in the control and that it's different from the default template. 

Tip: You can reset to the default template anytime by clicking the square and then click Reset.

4. Name (unique key) the resource, choose in what resource dictionary you want to define the new resource in and then click OK.

 

 

5. DONE! You have now created a new resource and applied it to your textblock.

You can see it has been added to your TextBlock by the white square you clicked before, is now green.

If you look in the XAML - the resource is now created, and your TextBlock is actually already using it by referencing it using the StaticResource.

Pro tip:
In Blend you have a tab called resources - check it out. It gives you a complete overview of all the defined resources inside your project. You can copy, delete, edit and move the resources as you like. Most people don't know about it but it offers a great overview that I use offen when ever I work with resources.. 

Pro tip 2:
The tutorial above actually works in Visual Studio's properties panel when using the designer as well.

 

Feel free to reach out to me if you have any comments or difficulties with resource creation.

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

Create a "Open in Blend" Visual studio keyboard shortcut

A few months ago, I created a new shortcut in Visual Studio that enables me to open my active file in Blend. Soon I realized that I should have done that a long time ago. - now it’s my favorite shortcut that boosts my productivity.
No more using the mouse to right-click > Open in Blend.
I choose the press shortcut combination CTRL + K, CTRL + B – works like a charm.

Here's a quick tutorial to set your own keyboard shortcut to Open active file in Blend:

  1.  TOOLS > Options… - Environment > Keyboard
  2.  Show commands containing: type in blend - Choose: View.View.OpeninBlend (notice it’s NOT View.OpeninBlend
  3. Make sure you have the following setting: Use new shortcut in: Global - Set your own Press shortcut keys combination 
  4.  Click Assign
  5. Click Ok

You're now all set. Feel free to ping me if you have problems getting it to work. Enjoy your new keyboard shortcut.

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

Improve your app design

Do you want your app to be fun and cool to play around with? Get improved ratings and reviews mentioning your amazing design? Then this post is your you.

What I’ve recently noticed is that most of the apps available either on the Windows Store or Windows Phone marketplace are visually dull.
Most of the apps have great ideas with exciting and cool content but they doesn’t deviate the Visual Studio provided templates. While I've helped quite a few developers out there improving their apps and increasing their user engangement. 
While you can use the design review program offered here on the site you can also do something your self. Here's a few bullets from my list of thing people should try to avoid or do:

  • Do not use the boring black background with white text.
  • Make your app colorful
  • Use animations and transitions. Atleast those which is offered platform
  • Spend some extra time working on great store icons with the right look and feel
  • Don't just use the default templates found in Visual Studio. Make something up your self.
  • Keep your UI simple and clean, and yet tasteful.
  • Use livetiles
  • Use a splashscreen and indicators while loading content
  • Keep your app fluid and responsive
  • Use the design guidelines as guidelines at design.windows.com - not as a list of rules
  • Be creative.

Pro tip: Look at other apps you think looks great and try do what they do, but watch out. You have to own way and style. Nobody want’s a rip-off.

Creating a great design and UI is not an always easy task. It takes time.. Lots of time. Feel free to reach out if you want to discuss how you can take your design to the next level or if you have additional things you'd like to see in the post.

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