Namespaces in Expression Blend 3: ‘d’ and ‘mc’

I have been using the (brilliant I might add) Expression Blend 3 environment for a while now to mock up some WPF but mainly Silverlight 3 applications. This is a blessing for one simple reason which is that Visual Studio 2008 has NO support for a design view of the Silverlight 3 UI layout. A nice syntax highlighted intellisense code view is all you get. I never used Silverlight 2 (and only jumped in from version 3) but I gather there was some support in Visual Studio 2008 but this could be a little patchy at times, so it seems Microsoft have skipped design view visual layout support for Silverlight 3 in VS 2008 in favour of focussing on VS 2010.

I tend to mock up all of my layouts in Blend 3 now and do some XAML tweaking back in VS 2008 when adding the C# to the code-behind files. I know you can now add C# code to Blend 3 but it is not really something I would seriously use very often. A very common scenario is that VS and Blend are open at the same time on the same project which seems to work reasonably well (dual screen monitor set-up helps!).

Anyway, all the time I have been using Blend 3 I have noticed, but largely ignored, the xmlns:d and xmlns:mc namespaces and the couple of additional UserControl tag attributes that appear automatically courtesy of Blend 3 such as mc:Ignorable="d" and d:DesignWidth="649" d:DesignHeight="460". These did not appear when starting projects in VS 2008 and adding simple XAML so they used to be a bit annoying when I began to use Blend 3 to mock up UI layouts (mainly as I did not know really what they were for and how they were affecting my UI).

It was only yesterday that it became clear that they really did have a practical usage after all. They in fact do not actively alter the UI layout at all at runtime, and affect only the design view. I happened to want to create a Silverlight application that consumed the whole available browser window, and achieved this by placing a Canvas control inside a Grid control with all the widths set to auto and Stretch mode. In design view I could not see any layout! This was because everything of course was collapsed as it had no specific width or height set. However if you click the UserControl object in the ‘Objects and Timeline’ panel there appears a little blue triangle at the bottom right of the UI layout. Click and drag this to see the containers and to add/edit as required BUT without having to specify a width and height if you need auto settings (as I did). This little trick is very helpful, but you must have the namespaces above to make it work.

In fact in one of the projects I deleted the references in XAML but then needed to increase the design time only view layout. Blend only added back in the namespaces and the design width and height and I had a build error. This was annoying as it looked like everything was there that I needed! But the thing that was missing was the mc:Ignorable="d" attribute! Not a mistake I will be making again!

No Workspace Zoom in Expression Blend 3!

I found out today that there’s no zoom option available in Expression Blend 3 for the workspace. As you can see from the screen shot below, in Expression Blend 2 you can specify how much the whole workspace is zoomed in by.

Expression Blend 2 workspace options.

This was a really useful feature, and I was particular looking to use it for enlarging unfamiliar sections of the UI so I could quickly check out what new buttons do etc. In Expression Blend 3 the zoom workspace option has been removed, as seen below.

Expression Blend 3 workspace options.

I was rather disappointed to learn this, but apparently this feature may make a return in some future version of Blend according to the Expression Blend program manager. Let’s hope so..

Roll on Expression Blend 4!

Flexible Panel Layouts

The sheer number of panel layout combinations can be overwhelming to WPF newcomers, I know it was for me! Having been used to traditional Windows Forms and fairly simple UI panel layouts, WPF really removes all the restrictions on what can be done, but takes a little getting used to.

While experimenting with simple layouts I came across a nice way to use a ScrollViewer control inside of an Expander. This is typical of my experiences of WPF thus far, in that the WPF layout is so flexible in what you can do some things are not immediately obvious until you start playing around with different combinations. In this case it was when I had three expanders inside a parent expander, as show below.

Now, if users behave themselves and don’t resize the main Window then every thing is fine. But if you decrease the height of the Window then, when all three child Expander controls are expanded, some controls will disappear of the screen!

Hmm, not really desirable. So, a nice remedy that will keep users happy is wrap the child Expander controls inside of a ScrollViewer control. When the user resizes the Window that would normally obscure other controls, the Window displays a scroll bar so the missing controls can be bought back into view again. All the code for thr three child Expanders is wrapped inside a StackPanel control, so all we need to do is to place this code inside a ScrollViewer container. The full code for the parent Expander is shown below.

<ScrollViewer VerticalScrollBarVisibility="Auto">
   <StackPanel Width="230">
      <Border Margin="10" Background="#FFE6E6E6" CornerRadius="8" Padding="5" BorderBrush="#FF4F4F4F" BorderThickness="1">
         <TextBlock Text="Expand/collapse the sections below to view available options." TextWrapping="Wrap" Height="31.92"/>
      </Border>
      <Expander x:Name="expander1" Margin="8,8,0,0" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	   <TextBlock FontSize="13.333" FontStyle="Italic" Foreground="#FFEA3939"><Run FontSize="14.667" Text="Expander #1"/></TextBlock>
    	 </Expander.Header>
    	 <Border Width="190" BorderThickness="0,0,0,0.5" BorderBrush="#FF949494">
    	    <StackPanel Height="85.718">
    	       <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
               <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
            </StackPanel>
         </Border>
      </Expander>
      <Expander x:Name="expander2" Margin="8,8,0,0" Background="Transparent" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	    <TextBlock Text="Expander #2" Foreground="#FF55C724" FontStyle="Italic" FontSize="14.667"/>
    	 </Expander.Header>
    	 <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="100">
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	 </StackPanel>
      </Expander>
      <Expander x:Name="expander3" Margin="8,8,0,0" Background="Transparent" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	    <TextBlock Text="Expander #3" Foreground="#FF2A4BE0" FontStyle="Italic" FontSize="14.667"/>
    	 </Expander.Header>
    	 <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="100">
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
         </StackPanel>
      </Expander>
   </StackPanel>
</ScrollViewer>

Now when the Window height is reduced, a scroll bar automatically appears to allow the parent Expanders content to be viewed by dragging the scroll bar up and down.

The ScrollViewer attribute VerticalScrollBarVisibility="Auto" describes how the vertical scroll bar should be rendered. If set to just “visible” then the scroll bar will always be visible even when it isn’t needed (in which case it appears, but is disabled). Setting it to “Auto” means that it is only displayed when required, as shown above.

Hello world!

When testing a new development platform it is customary to compile a “Hello World” application, and so here is the corresponding blog version..

So, on this blog I will be primarily be focusing on WPF, but there will undoubtedly be plenty of stuff on C#, .NET, and Visual Studio as well. In the future (and time permitting!) I may post on XNA development too.

I am very interested right now in exploring the 3D aspects of the WPF API, and seeing what can be done with it; hopefully .NET 4.0 will bring even more goodies to experiment with! I have been using Visual Studio 2010 (currently in CTP beta 1) and according to the WPF3D team Blog all the top new features will be in the beta 2 release so can’t wait for that.

Any comments, ideas, collaborations will be welcomed, just stop by and say hello!