SWE/UX

When designing UI’s in WPF and Silverlight, you may wish to make your layout fluid and auto-expandable in order to take the most out changing UI context. For instance, when data quantity and quality changes, available space may also change and objects in the layout need to adapt to these changes. When an auto layout is needed, no width nor height are specified which can be troublesome since the design view tends to collapse available space. For instance, a variable size user control with a data-binded listbox has no child items in design time, so you’ll see nothing but a small dot. This is because Cider, the Visual Studio Designer, and Blend designer, have no reason to show it otherwise since there’s no content and, as such, the ability to publish and preview isn’t possible.

 

In expression blend however, there’s a nice feature that solves this issue, and it’s only enabled at design time. When you create a new visual object in Blend, you’ll notice the following xml namespace declaration:

...
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
...

 

This enabled a “d” keyword that can be attached to a visual object in order to set its size only at design time. At runtime, the regular sizing settings are considered. So, if we had the following User Control, with data items applied at runtime through databinding:

<UserControl x:Class="NetBrainwork.Temp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListBox Name="DemoListBox" ItemsSource="{Binding MyCollection}"></ListBox>
</UserControl>

This is what you would see in Blend:

 

 

So you see that testing background coloring, for instance, isn’t very practical with this view. So the solution lies in the two Blend design-time attached properties: DesignWidth and DesignHeight, available in the namespace specified above. Notice the two right and bottom rectangular adorners in the previous picture: they’re Blend’s way of settings these values. If you resize your control with those rectangles you’ll be setting your desired design-time size. The XAML output would be something like this:

<UserControl x:Class="WpfUnderTheHood.Temp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="200" d:DesignHeight="200">
    <ListBox Name="DemoListBox" ItemsSource="{Binding MyCollection}"></ListBox>
</UserControl>

And this is what you’d see:

 

Like I said earlier, at runtime this setting isn’t considered, and auto layout is applied.

 

Technorati Tags: WPF, Silverlight

Today I decided to encapsulate the circular progress indicator I use in Scrum Sprint Monitor in a reusable behavior. This served as a learning experience as well, since I had not yet had the chance to play with attached behaviors. My requirements were the following: Have a behavior that displays an animation during long running