Nooks and Crannies of Expression Blend: Artboard Objects List

I can’t even find this one in the Keyboard Shortcut list provided in the User Guide of Expression Blend, so I made up a name for it: The Artboard Objects List:

ArtboardObject List

Known from several drawing programs, this list shows the objects under the mouse cursor when you hold Ctrl and Click the Right Mouse Button. It highlights the currently selected object and lists all other objects overlapping each other from the topmost at the top of the list to the one at the bottom on the bottom of the list. Notice that the order of this list is opposite to the default order in de Objects and Timeline Panel (when you have not changed the order of the panel using the Sort by Z-order option at the bottom left of that panel). Actually, this order is logical for what it shows: the stack of objects in the Artboard under your mouse cursor.

Notice also the option to Pin or UnPin the Active Container. This makes is easier to insert newly created objects in a container like the RegularPolygon Shape in the Grid here inside the RadioButton…

Njoy!

A Style for the Silverlight CoverFlow Control Slider

I’ve been working with the Silverlight CoverFlow Control lately and think the default Silverlight Slider at the bottom of the screen sticks out like a sore thumb:
SilverlightCoverFlowControl
So, I’ve create a new Style for the Slider, resembling the original Cover Flow slider.
CoverFlowSlider
This is a Style for a Silverlight slider control, meant to be used on a black or dark background. It has rounded sides for the Track as well as the Thumb. The Track looks like it is lower because of the inner shadow at the top. The Thumb also has a shadow, but its surface is flat. This is only the Horizontal Template, so nothing will show when it is used vertically.
The Project File is on my SkyDrive, but the Style is simple enough to reproduce it here…
De XAML is a regular Slider with a Style:
<Slider Style="{StaticResource CoverFlowSliderControl}" Maximum="100" LargeChange="10" SmallChange="1" Value="50"/>
The Track has its own style, used in the ControlTemplate later on:
<Style x:Key="CoverFlowSliderTrackStyle" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="12" />
 <Setter Property="RadiusX" Value="12" />
 <Setter Property="StrokeThickness" Value="2"/>
 <Setter Property="Stroke">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 <GradientStop Color="#FF202020" Offset="0"/>
 <GradientStop Color="#FF404040" Offset="1"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 <Setter Property="Fill">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 <GradientStop Color="Black" Offset="0"/>
 <GradientStop Color="#FF202020" Offset="0.4"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 </Style>
The Thumb is no more than two rectangles, but both have their own Style:
<Style x:Key="CoverFlowSliderThumb" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="10" />
 <Setter Property="RadiusX" Value="10" />
 <Setter Property="StrokeThickness" Value="2" />
 <Setter Property="Stroke" Value="#FF4B4B4B"/>
 <Setter Property="Fill">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.43,-0.02">
 <GradientStop Color="#FF252525" Offset="1"/>
 <GradientStop Color="#FF787878" Offset="0"/>
 <GradientStop Color="#FF424242" Offset="0.622"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 </Style>
 <Style x:Key="CoverFlowSliderThumbCover" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="8" />
 <Setter Property="RadiusX" Value="8" />
 <Setter Property="StrokeThickness" Value="0" />
 <Setter Property="Fill" Value="#FF404040" />
 <Setter Property="Margin" Value="3" />
 </Style>
 <Style x:Key="ThumbStyle" TargetType="Thumb">
 <Setter Property="Margin" Value="0,2" />
 <Setter Property="Width" Value="50" />
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="Thumb">
 <Grid Margin="2,0">
 <Rectangle x:Name="Thumb" Style="{StaticResource CoverFlowSliderThumb}"/>
 <Rectangle x:Name="ThumbCover" Style="{StaticResource CoverFlowSliderThumbCover}"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="Effect">
 <Setter.Value>
 <DropShadowEffect Direction="360" Opacity="0.5" ShadowDepth="3"/>
 </Setter.Value>
 </Setter>
 </Style>
There are two Repeatbuttons to the left and to the right of the Thumb. They are invisible and use the same Style:
<Style x:Key="RepeatButtonStyle" TargetType="RepeatButton">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="RepeatButton">
 <Grid>
 <Rectangle RadiusY="6" RadiusX="6" StrokeThickness="2" Fill="Transparent"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
Finally, here is the Style for the Slider Control with the ControlTemplate that uses all Styles above…
<Style x:Key="CoverFlowSliderControl" TargetType="Slider">
 <Setter Property="Height" Value="24" />
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="Slider">
 <Grid x:Name="HorizontalTemplate">
 <Grid.ColumnDefinitions>
 <ColumnDefinition/>
 <ColumnDefinition Width="Auto"/>
 <ColumnDefinition/>
 </Grid.ColumnDefinitions>
 <Rectangle x:Name="Track" Grid.ColumnSpan="3" Style="{StaticResource CoverFlowSliderTrackStyle}"/>
 <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Style="{StaticResource RepeatButtonStyle}"/>
 <Thumb x:Name="HorizontalThumb" Grid.Column="1" Style="{StaticResource ThumbStyle}"/>
 <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Style="{StaticResource RepeatButtonStyle}"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
The result is a Cover Flow Slider that nicely fits in with the rest of the Cover Flow Control:
CoverFlowResult
Njoy!
Check out the Comments below about why this picture is up here…
Slide the Slider
Download the source for this Slider

When dynamically creating objects in code, use Styles

When you need to create objects in code, you can actually build up the entire look and feel in code.

This results in large blocks of code that do nothing special, but set the visual properties of an object:

Grid grdNow = new Grid();

 

//create Circle

Ellipse cirNow = new Ellipse();

cirNow.Height = 25;

cirNow.Width = 25;

cirNow.VerticalAlignment = VerticalAlignment .Center;

cirNow.HorizontalAlignment = HorizontalAlignment.Center;

cirNow.Fill = new SolidColorBrush (Colors.Red);

cirNow.Margin =new Thickness(5,5,5,5);

 

//create TextBlock

TextBlock txtNow = new TextBlock();

txtNow.VerticalAlignment = VerticalAlignment.Center;

txtNow.HorizontalAlignment = HorizontalAlignment.Center;

txtNow.Foreground = new SolidColorBrush(Colors.White);

txtNow.FontWeight = FontWeights.Bold;

txtNow.FontSize = 14;

txtNow.Margin =new Thickness(0,0,0,2);

txtNow.TextWrapping = TextWrapping.NoWrap;

txtNow.Text="now";

 

//add objects to grid

grdNow.Children.Add(cirNow);

grdNow.Children.Add(txtNow);

 

The drawback of this is that it is a lot of code and hard to maintain. The looks are integrated in the code and that is not what you want.

In Silverlight and WPF there is a standard model to separate the code from the look and feel of the application you’re building. It’s called XAML.

XAML is a markup language that’s easily generated by code and easily maintained by non-programmers with tools of even by hand.

When you are creating objects on the fly you should use Styles. These determine the way the object looks. Only keep the properties necessary for dynamically placing your object on the screen in your code:

Grid grdNow = new Grid();
Ellipse cirNow = new Ellipse();
TextBlock txtNow = new TextBlock();

cirNow.Style = App.Current.Resources["NowStyle"] as Style;
txtNow.Style = App.Current.Resources["NowTextStyle"] as Style;

grdNow.Children.Add(cirNow);
grdNow.Children.Add(txtNow);

This is a lot less code. Below is the markup that you shouldn’t have to worry about when you use Styles in your C# code.

You can even just create an empty Style block in App.xaml: <Style x:Key=”NowStyle” TargetType=”Ellipse” /> and thus use it with default values.

The look of these dynamically created objects can be changed later on or even be themed using a separate ResourceDictionary. A designer can come in at any time and change these properties using a Tool like Expression Blend.

<Style x:Key="NowStyle" TargetType="Ellipse">
    <Setter Property="Height" Value="25"/>
    <Setter Property="Width" Value="25"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Fill" Value="Red"/>
    <Setter Property="Margin" Value="5"/>
</Style>
<Style x:Key="NowTextStyle" TargetType="TextBlock">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="0,0,0,2"/>
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="Text" Value="nu"/>
</Style>

So, when you find yourself creating a lot of C# code to set the visual properties of a dynamically created objects: Stop!

Create a Style in XAML and refer to that Style instead.

Njoy!

DEMO: 5 gotchas combining SketchFlow, Visual Design and Silverlight Banners

Recently we created a demo. It was in SketchFlow, but it was not really a sketchy demo. Some screens are in the typical SketchFlow look, but for three important scenarios we’ve created a Visual Design. For the Homepage and a Product page in the demo we even created a Silverlight Banner, including the navigation inside the banner.

We’ve actually presented it inside the SketchFlow Player with panels collapsed. We gained the ease with which to connect the screens, in combination with the Behaviors the make parts of the demo interactive. And we combined real Silverlight applications inside the SketchFlow demo and they worked just fine. This is a demo that is meant to impress a customer.

I’ve collected some some gothas we run into when creating this demo:

  1. Large images are not include as a Resource, but as Content. In the Blend Options screen you’ll find a slider setting the limit for large images. You’ll get a warning when you import an image larger than that limit. You can choose to include the image as Content, not as Resource. This will result in the image not showing in your SketchFlow Player. So be sure to include all images in a subfolder in the MyProject_Screens folder and make sure the path in the Image Source is correct. When images show up in the root of a deployed SketchFlow project, you’re in trouble…
  2. When you use a Silverlight application inside a SketchFlow Page, you can use the NavigateToScreenAction inside your UserControl, but screens will not show up in the list in the Properties Panel. It has no use to create a reference to the SketchFlow project. You can add the correct path manually. You can find the names of the Screens in the Projects Tab.
    <i:EventTrigger EventName="MouseLeftButtonDown">
        <pi:NavigateToScreenAction TargetScreen="MyProject_DemoScreens.Screen_1"/>
    </i:EventTrigger>
  3. You can use Components as Masterpages. Remove all elements in the Visual Design that change between pages and put the rest in a Component screen. This allows you use this UserControl as the first element of a page. You can create separate boxes with content on the page to link to different pages in the prototype.
  4. Alternatively, use HyperlinkButtons with NavigateToScreenActions Behaviors to create “HotSpots” on a background image if you want to navigate to different screens. You’ll have to edit the HyperlinkButton ControlTemplate to remove the FocusVisual that appears when you click the control. Then they are invisible, but still catch the Click Event for the NavigateToScreenAction. It will navigate to the screen you enter as a Target.
  5. Use SketchFlowAnimation or GoToStateAction Behaviors for interactive elements on the page. This way you can use highlights and let pop-ups appear and disappear. SketchFlow Behaviors rock!

Njoy!

Create a Button Control from an Expression Design drawing

I’ve placed a PushButton Design file in the Expression Gallery. A thousand people have actually downloaded the .design file. Only one question rose, asking how to implement that drawing as a Button Control. Here are the steps to do that:

PushButton

In Design:
– Click the square on the Layer named PushButton to select all elements
– Select File/Export and in the dialog choose XAML Silverlight 4 Canvas, Leave Text Editable, set Live Effects to Convert to XAML,  call it PushButtonNormal.xaml, remember where it is located after export. Click Export All.
– Click the square on the second Layer named PushButton Pressed to select all elements
-Select File/Export and use the same settings and location. Name it PushButtonPressed.xaml. Click Export All.

In Blend:

– Start a new Blend Silverlight Application, Call it PushButtonControl
– Open MainPage.xaml in the Code Editor using View/Active Document View/XAML View.
– Create a closing the tag for the Grid Named LayoutRoot.
– Open the PushButtonNormal.xaml file in Notepad. Cut the inner Canvas named PushButton, Paste in inside the LayoutRoot Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Open the PushButtonPressed.xaml file in Notepad. Cut the inner Canvas named PushButton_Pressed, Paste it under the PushButton Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Resolve naming conflicts for Ellipses, you can only have objects with unique names.
– Switch to Design Vieww using View/Active Document View/Design View.
– Right Click the PushButton Layer in the Objects and Timeline Panel. Select Group into…/Grid from the context menu.
– Right Click the PushButton layer in the Objects and Timeline Panel. Select Make into Control… from the context menu.
– In the dialog select the Button control and name it PushButtonControl. Click OK.
– This will create a Button Control and open ControlTemplate Editing Mode. A ContentPresenter is added to the Button. Because the PushButton container is a Canvas you have to reposition this using the Left and Top properties.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Right Click the PushButton_Pressed layer in the Objects and Timeline Panel. Select Cut from the context menu.
– Left Click the [Grid] layer in the Objects and Timeline Panel. Select the [Grid] button in de Breadcrumbs at the top left of the Artboard to go into Template Editing Mode again.
– Right Click the [Grid] layer and select Paste from the context menu. This will place the Pressed state of the button over the Normal state. Remove the top most Ellipse. This is the transparent shadow and should not show twice. Drag the PushButton_Pressed layer up so it is above the [ContentPresenter] layer. The word Button should appear.
– Set the Opacity Property of PushButton_Pressed to Zero (0%).
– Now you should have a [Grid] with 3 layer in it: PushButton, PushButton_Pressed and [ContentPresenter]. The Normal state should be visible. The word Button should be visible in it.
– Open the States Panel (Window/States should have a check before it) and select the Pressed State. The Pressed state recording should go on, showing a red frame around the Artboard.
– Set the Opacity of PushButton_Pressed back to 100%.
– Click the Base layer at the top of the States Panel and switch between the Pressed and Base state. Make sure the Buttons overlap exactly.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Select File/Save all
– Press F5 to build the project, so you can test it.

Optimization would include replacing the Canvases with Grid containers while keeping all Ellipses in their places. This would allow for better control of button size and placement of the ContentPresenter.

Njoy!

Easy as Pie: Percentage Pie-Charts with the Expression Blend 4 Pie Shape

During the evolution of Silverlight and Expression Blend we’ve had to create Pie Charts for various projects. Often these were to illustrate the state of a percentage value in the application. Thus we’ve build our own a few times over. Now, with the new Pie Shape in Expression Blends 4 this has become a no-brainer. Here´s how:

 PieShape01  PieShape02 

  1. Create a new Silverlight Application project in Blend 4
  2. Open the Asset Panel and select the Shapes category
  3. Select the Pie Shape
  4. DoubleClick the Pie Shape at the bottom of the ToolBox so it is added to the Artboard with default values of StartAngle 90 and EndAngle 360
  5. Name it Pie1 in the Objects and Timeline panel. This way you can use code to access its properties.
  6. If you want you can give it a Fill Color to see it better.
  7. Add an event handler called UpdateArcEndAngle on the MouseLeftButtonUp event of the LayoutRoot Grid.
  8. In the Code Behind file (MainPage.xaml.cs) add a line of code to update the StartAngle of the Arc:private void UpdateArcStartAngle(object sender, MouseButtonEventArgs e)
    {
        Pie1.StartAngle += 45;
    }
  9. Build the project and click the Pie to update it with 45 degrees each time you click it. When the Pie has reached the 360 degrees, it with start again at 45.

Of course, you can style a Pie Shape any way you want. Now it is easier than ever to show a percentage Pie Chart…

 Pie01  Pie02

 Pie03

Njoy!

Focus on FocusVisualElement in Silverlight buttons

The FocusVisualElement is the equivalent of the dotted line that you see in Windows interfaces and on browser pages around an object on the page that “has the focus”. This means that it will receive the input a user is giving with a mouse, keyboard or touch. Actually, web designers don’t really like these dotted lines, because they degrade the look of their interface. It may disturb the carefully crafted look and feel of the page. But this FocusVisualElement has a function.

Normally I’m not so eager to use buttons as controls for showing examples. It usually doesn’t lead to an interesting visual result. As a designer my examples should look more interesting. Fortunately in Silverlight you can create other shaped and colored buttons easily using the Make into Control… option in the contextmenu of graphic elements gathered in a Grid. In this case the I’d like to focus on the FocusVisualElement element, so Buttons are my first choice.

In Silverlight the FocusVisualElement is an actual graphical element that is part of a control’s ControlTemplate. In Blend you can access this template by selecting Edit Template/Edit Current (I’d really like a keyboard shortcut here, but there isn’t, yet).

In template editing mode you can find the FocusVisualElement in every Silverlight control. It’s shape depends on the type of control, but in a Button it is a light blue Rectangle. By default this Rectangle has its Opacity set to Zero and the Focused State makes it visible. This leads to the notion that you can change the looks of this Focused State to anything you’d like:

UnFocused

  LinkFocused

ButtonFocused2  ButtonFocused

In these images I show how a HyperlinkButton could get a Glow Effect when it is focused. But there’s no reason to leave it at that. The oval Button plays an animation when it is focused. Apart from the Opacity, a TranslationX, Scale and a PointAnimation is applied to a semitransparent Ellipse when the Focused State is triggered. This makes the Ellipse move van left to right. The animation is AutoReversed and repeated Forever.

You can use the VisualStateManager to create the animations. You can also show the TimeLine and create an Storyboard that you paste in de <VisualState x:Name="Focused" /> Visual State. When you create a Button using Make into Control… you can copy the Visual States out of the ControlTemplate of a normal Button and use them in your own.

Make sure your animation for the Focused State of controls are low-key. You don’t want to irritate your users with flashing graphics only because a control is focused!

Working code from these Buttons is on my SkyDrive

Njoy!

Overlapping TabItems with the Silverlight Toolkit TabControl

OverlappingTabs

Standard TabItems are not overlapping, but designers like them to. You may encounter a design with overlapping tabs that you have to create and implement. This is not a simple task, certainly when the tabs have a tapered side that overlaps the tab to the right of it. The Z-Index of these tabs are opposite to the standard layout.

Control Vendors have custom versions of a TabControl, that use properties for overlap. The Toolkit TabControl currently doesn’t support overlapping tabs, but by updating templates and a bit of C# code you can get the same effect. Here’s how it’s done:

Creating an overlapping tab in Expression Design:

OverlappingTabsCreate01

  1. Start Design, start a new file with a size of 640 x 480 pixels.
  2. Add a rectangle, 50 pixels wide, 25 pixels high and make its CornerRadius 3 pixels. Make sure the Rectangle is selected.
  3. Choose Object. Convert Object to Path. This way you can change the vertices of the shape.
  4. Select the Direct Selection tool (second from the top in the Toolbox) and select the bottom right two vertices by dragging a selection area around them.
  5. Drag the two vertices to the right, about half the width of the rectangle. Hold the Shift key to constrain the translation horizontally.
  6. Zoom in to the right hand side of the shape. With the Pen Tool selected, at the right bottom corner delete the second vertice from the bottom by clicking on it.
  7. Hold the Alt Key and click the other vertice to make it a rounded point (fig. 1).
  8. Select the Direct Select Tool and move the second vertice from the top to the right. Select the Pen Tool, hold the Alt Key and drag from this anchor point in the direction of the line of the tab, so the sharp corner becomes smooth.
  9. Using the Direct Selection Tool, move the left vertice at the left bottom corner down to the bottom of the tab, delete the other by clicking on it with the Pen Tool selected (fig. 3).

OverlappingTabsCreate02

figure 1: Create a round point at the bottom right corner.

OverlappingTabsCreate03

figure 2: Create a smooth corner at the top right corner.

OverlappingTabsCreate04

figure 3: Remove a anchor point to create a straight corner at the lower left corner.

Double click the Magnifying Glass Icon at the bottom of the toolbox to show the entire drawing. It helps to place the top right corner of the tab at the 0,0 coordinates using the Action Bar at the bottom of the screen. Check if the Foreground color is white and the border is black. Make sure the tab is selected, showing its bounding box and transformation handles, and select Edit, Copy from the menu.

Implementing overlapping tabs in Expression Blend:

  1. Start Blend, Begin a new Silverlight project, Open MainPage.xaml.
  2. Open the Asset Panel, enter Tab in the search box, select TabControl and drag a rectangle on the Artboard. You’ll get a TabControl with two tabs. A reference to System.Windows.Controls.dll is added to the project references and a namespace xmlns:controls is added to your MainPage.xaml file.
  3. The TabControl is a container for the TabItems. It has a four Grids to place tabs on all sides of the tab area. Tabitems are placed in these grids. The TabItems consist of a Header and a Grid as you can see in the Object and Timeline Panel when a tab is selected. Right click a Tab and select Edit Template, Edit a Copy… from the context menu, choose a name and a location for the ControlTemplate and click OK.

OverlappingTabsImplement01

figure 4. Creating a TabItem ControlTemplate

  1. You’ll enter Template Editing Mode for the TabItem. The Objects and Timeline panel shows eight grids and a FocusVisualElement Border. For each of the four sides (Top, Bottom, Left, Right) you’ll see a Selected and a Unselected Part. Control Parts are recognizable by the green icon next to their name. You can also find them in the Parts Panel.
  2. Locate the TemplateTopSelected Grid in the Object and Timeline Panel and open all the borders and grids that are part of it by clicking the small triangles in from of it. Drag the ContentControl named HeaderTopSelected up to the TemplateTopSelected Grid so it moves to the same hierarchical level. Now you can delete the rest of the content of the TemplateTopSelected Grid. Also delete all the animations that reference those shapes if they are not deleted by Blend.
  3. With this Grid selected, choose Paste from the edit menu. This will place the tab you created in Expression Design into the grid. Remove its Margins to make the tab fit inside the Grid.
  4. Drag the layer of the new Path up so it is placed right beneath the TemplateTopSelected Grid and above the Focus and Disabled visuals in the Objects and Timeline Panel. Move the HeaderTopSelected Content Control beneath the Path.
  5. Repeat Step 3 and 4 for the TemplateTopUnselected Grid. Make its Foreground a slightly darker color than the selected state of the tab.
  6. Set for both the TemplateTopSelected as the TemplateTopUnselected Grid the left margin to –20 pixels. This will ruin the bounding box placing in Blend, but move the tabs to the left at runtime.
  7. Make sure the Grid for the selected state of the tab has a Path at the bottom, that makes the connection with the tab area beneath it. It is important that a tab connects to the area that shows when a tab is selected.
  8. You may want to delete the FocusVisualTop border because it is rectangular and your tabs are not. Also remove any animations targeting this control.
  9. Scope up to the Control Level using the breadcrumbs at the top of the screen or the Return Scope to [UserControl] button at the top of the Objects and Timeline Panel.
  10. Right Click the TabControl and Select Edit Additional Templates, Edit Layout of Items [ItemPanel], Create New. Make sure it is a StackPanel with its Orientation set to Horizontal. Scope up to the Control Level.
  11. Right Click the TabControl (not a tab) and Select Edit Template, Edit a Copy… Give the System_Windows_Controls_Primitives:TabPanel a left margin of 20, but leave the other margins as they are: margin=”20,2,2,-1″ compensating for the negative left margin on the first TabItem.
  12. Use the Visual State Manager to create a state for a MouseOver that is a light gray between the selected and unselected Foreground colors. A transition time of half a second gives the right effect.

        <controls:TabControl x:Name=”TabControl” Width=”500″ Height=”100″
             Style=”{StaticResource TabControlStyle1}”
             ItemsPanel=”{StaticResource ItemsPanelTemplate1}”
             SelectionChanged=”TabControl_SelectionChanged”>
            <controls:TabItem x:Name=”Tab_1″ Header=”Tab 1″
                 Style=”{StaticResource TabItemStyle1}”>
                <Grid Background=”#FFE5E5E5″>
                    <TextBlock Text=”Area 1″ Margin=”20″/>
                </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_2″ Header=”Tab 2″ 
                Style=”{StaticResource TabItemStyle1}”> 
                <Grid Background=”#FFE5E5E5″>
                    <TextBlock Text=”Area 2″ Margin=”20″/>
                </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_3″ Header=”Tab 3″
                 Style=”{StaticResource TabItemStyle1}”>
                 <Grid Background=”#FFE5E5E5″>
                      <TextBlock Text=”Area 3″ Margin=”20″/>
                 </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_4″ Header=”Tab 4″
                 Style=”{StaticResource TabItemStyle1}”>
                 <Grid Background=”#FFE5E5E5″>
                     <TextBlock Text=”Area 4″ Margin=”20″/>
                 </Grid>
            </controls:TabItem>
        </controls:TabControl>

Getting the ZIndex right

All this will create the right shape and states of the the TabControl, but the order of the tabs is still wrong. By default the first tab is selected and a right tab will overlap a left tab. With overlapping tabs this should be the other way around. Setting the Canvas.ZIndex property of the TabItems in XAML won’t help. The control is initialized with the wrong settings at runtime.

A little C# helps. Thanks to Rachel, who solved this problem in WPF, we can set the overlapping tabs in the right order when the SelectionChanged event of the TabControl is fired:

private void TabControl_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

    TabControl tabControl = sender as TabControl; 
    tabControl.Dispatcher.BeginInvoke( new Action(() =>
            UpdateZIndex(sender as TabControl)));
}

private void UpdateZIndex(TabControl tc)

    if (tc != null)
    {
        foreach (TabItem tabItem in tc.Items)
        {
            tabItem.SetValue(
                        Canvas.ZIndexProperty,
                        (tabItem == tc.SelectedItem ?
                        tc.Items.Count :
                        (tc.Items.Count-1) – tc.Items.IndexOf(tabItem)));
        }
    }
}

The UpdateZIndex method is invoked in a way that updates all the TabItems. This way a left tab will show above a right tab the way you want in overlapping TabItems.

OverlappingTabs

fig 5. Overlapping tabs have a reversed ZIndex.

Working code is at my SkyDrive

Joe Gershgorin has refactored the code to use a Behavior. This also supp0rts longer text in the headers. You can find his version at: http://www.bitspy.com/OverlappingTabs_Silverlight4.zip

Njoy!

Mix Keynote bij Microsoft NL

Ik had het voorrecht om te gast te zijn bij de presentatie van de keynote bij Microsoft Nederland. In combinatie met de SDN had de Silverlight en Expression Insiders usergroup een aantal plaatsen te vergeven. Mensen die zich ingeschreven hebben op Sixin.nl hebben een e-mail gehad met een link naar het inschrijvingsformulier voor het evenement. Ze hebben een ochtend de tijd gehad om zich in te schrijven.

Uiteindelijk waren er zo’n dertig mensen vanuit verschillende gebruikersgroepen en invalshoeken naar het nieuwe Microsoft hoofdkwartier gekomen om de aftrap van de MIX 2010 op een groot scherm in een grote vergaderzaal mee te maken. Er waren drankjes en borrelhapjes, maar zodra de videostream op gang was gekomen was iedereen ademloos aan het luisteren en kijken. In sneltreinvaart zijn verschillende mensen en evenzoveel verschillende demo’s aan het oog voorbijgekomen. Enkele opmerkelijke feiten heb ik via Twitter kunnen verspreiden, totdat mijn telefoon het opgaf omdat hij te lang had aangestaan.

De tweets gingen over de 60% marktpenetratie van Silverlight (in Nederland 72%), de mogelijkheid om fullscreen Silverlight video te kijken op een tweede (of derde) scherm, Silverlight als techniek achter Pivot, Blend 4 als gratis update voor Blend 3, dat e-bay een appstore heeft waar Silverlight apps verkocht kunnen worden en dat Silverlight 4 vandaag Release Candidate is geworden. De RTW wordt eind april verwacht, waarschijnlijk gelijk met Visual Studio 2010.

Maar de nadruk van de keynote van MIX10 lag niet op Silverlight en niet op de Expression tools. De hoofdpersoon van de avond was Windows Phone 7 series, met een uitgebreide demonstratie van de mogelijkheden van de telefoon, inclusief verschillende typen applicaties, door Joe Belfiore. ScottGu bouwde ter plekke de eerste Twitterclient voor WP7 en een collega van hem maakte binnen 8 minuten een foto-applicatie in Expression Blend 4. De Silverlight versie op WP7 is geen Silverlight lite of aparte Silverlightversie. Het is gewoon Silverlight. Alle kennis die je als developer of designer hebt opgedaan over Silverlight kan je 100% inzetten voor het maken van applicaties voor WP7. Er worden in sneltreinvaart een aantal games getoond die gemaakt zijn in XNA en gespeeld op de telefoon, de computer met de muis en een televisie met een XBox controller. Als je apps of games op WP7 wilt krijgen gaat dat via de Marketplace hub. Exacte voorwaarden worden later nader bekend gemaakt. Alle gereedschappen om Windows Phone 7 apps te maken zijn gratis beschikbaar. De ontwikkelsoftware is beschikbaar via developer.windowsphone.com.

Na de presentatie was er tijd om even bij te praten over de nieuwe mogelijkheden. Daarna was er een live verbinding met een aantal Nederlandse bezoekers van MIX10 en de mogelijkheid om vragen te stellen en beantwoord te krijgen. In het restaurant van het Microsoft gebouw kwamen pizza’s en drankjes beschikbaar, die onder begeleiding van stevige discussies zijn verorberd. Dank Microsoft NL voor een geslaagde avond. Thuis de bits downloaden en installeren en aan de slag voor Windows Phone 7 Series met Silverlight…

Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls.

Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control.

Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10×10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you  room to work with and a more realistic view on the tab.

<ControlTemplate TargetType=”TabItem”>
    <Grid x:Name=”Root” d:DesignWidth=”150″ d:DesignHeight=”25″>

This needs the Blend NameSpaces at the top of the page to work:

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

Njoy!

SketchFlow Behavior CheatSheets

Personally, I think that not enough Behaviors for Blend and SketchFlow are available, but luckily Christian Schormann recently presented some SketchFlow Behaviors that make Conditional Navigation and Global States possible in SketchFlow prototypes. For my workshop on SketchFlow for PICNIC09, I created two CheatSheets in SketchFlow, because working with Behaviors is too complex to explain quickly in a workshop. Since the workshops are done, I’d like to share these CheatSheets with you so you can learn quickly how to use the behaviors Christian created.

ConditionalNavigationCheatSheet GlobalStateCheatSheet

The Conditional Navigation behaviors enables you to navigate to a different screen based on a TargetScreen variable that is set using events in the interface.

The Global State behavior is similar but makes it possible to navigate to a screen that shows a particular state, depending on a GlobalState variable, setting the state.

If you can’t reach a result using these cheatsheet, please read the explanation from Christian on his blog. Check out the CheatSheets and enjoy using SketchFlow!

How to place a vector illustration in Silverlight 2 Application Resources

Recently, I did a presentation on how to structure a Silverlight Application using Styles and Resources. This covered several topics about structuring XAML using only the Blend User Interface as a tool.

When you create a Style, Blend goes in Style Recording mode (even though there is no visual indication of that) and all properties you set in this mode are collected in your styles automatically. Just remember to begin creating a Style, you can’t convert inline properties to styles momentarily.

You can create a Resource from almost everything (although you cannot always use them as such) using the small square to the right of the input box for the property in the Property Panel. Using the Resource Panel in Blend reorganizing Resources is straightforward. You can even move User Control Resources to the application level by dragging the layer to the Application Resource Dictionary in the Resource panel.

Placing animations in App. xaml is certainly possible with the technique I mentioned earlier. You’ll have to start the animation using code.

All this helps to set up a more structured version of your Silverlight Application. But… One thing missing from this list is how to remove large vector illustrations in XAML from you pages and place them as a resource in the application level. That way large chunks of XAML are out of the way and they can be reused using only one line of code: efficient and good for your application’s performance. With the following technique, you can put ANY large, coherent piece of XAML away as a resource. Anything that you can stash in a Grid panel, for example.

The trick is the use of a Content Control and to set it’s Template property to a ControlTemplate that is used as a Resource:


<ContentControl Template="{StaticResource ctpBullet}" />

 

      <ControlTemplate x:Name="ctpBullet" TargetType="ContentControl">
            <Grid Width="12" Height="12" VerticalAlignment="Top" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Ellipse x:Name="Bullet" Grid.RowSpan="2" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF870000">
                    <Ellipse.Fill>
                        <RadialGradientBrush RadiusX="0.67158" RadiusY="0.671574" Center="0.34738,0.263298" GradientOrigin="0.34738,0.263298">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFF0000" Offset="0.512712"/>
                                <GradientStop Color="#FFCF0000" Offset="0.817797"/>
                                <GradientStop Color="#FFFF0000" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="0.34738" CenterY="0.263298" Angle="57.8044"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Path x:Name="BulletGlow" Margin="2" Stretch="Fill" Data="F1 M 23.0627,100.787C 26.3052,100.787 28.9338,103.416 28.9338,106.659C 28.9338,109.901 26.3052,106.595 23.0627,106.595C 19.8202,106.595 17.1916,109.901 17.1916,106.659C 17.1916,103.416 19.8202,100.787 23.0627,100.787 Z ">
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="1.19041" RadiusY="0.858456" Center="0.332587,0.223982" GradientOrigin="0.332587,0.223982">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFED4D0" Offset="0"/>
                                <GradientStop Color="#FFF27037" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <SkewTransform CenterX="0.332587" CenterY="0.223982" AngleX="22.4347" AngleY="0"/>
                                    <RotateTransform CenterX="0.332587" CenterY="0.223982" Angle="71.469"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

So, clean up your XAML markup. With this trick you can remove those large vector illustrations from you screen layout and place them out of the way in app.xaml.

Njoy!

Intellisense for Expression Blend 2 SP1 working again!

Tonight I found this short cryptic message by Bennage on the MSDN Code Gallery site:

Blend 2.0 SP1
bennage
Oct 1 at 4:37 PM 
FYI I was able to get the plugin working against 2.0 sp1 simply by recompiling the source against the 2.0 sp1 assemblies.

As a designer, it was a bit too short and cryptic for me. But I decided to have a go anyway. This it what I had to do do make Intellisense working again for Blend 2 SP1:

  1. Download the original BlendSense_Install.zip from the MSDN Code Gallery site:
    http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
  2. Install the Addin as explained on the Homepage: http://code.msdn.microsoft.com/BlendSense
    Blend.bat, Addins folder with a DLL and the Schemas Subfolder should all be in place. If you have a failed attempt to install BlendSense for Blend 2 SP1, you’ll probably be in good shape 😉
  3. Download the Code from the MSDN Code Gallery site:
    http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
  4. Upzip it to your visual studio or Blend projects directory:
    c:\users\YOU\Documents\Expression\Expression Blend Projects
  5. Start Visual Studio or Expression Blend and load the Expression.Blend.Intellisense project
  6. Open the Solution Explorer or Project tab and check the References  folder to find several dll’s that are missing or invalid, marked by a yellow exclamation mark
  7. Right-click on the References folder and select Add Reference…
    Click the Browse tab in the Add Reference dialogbox and browse to your Blend 2 SP1 location: “c:\program files\Microsoft Expression\Blend 2”
  8. Select all the DLL files that are missing by keeping the Ctrl key down while clicking the filenames. Click OK. The yellow exclamation marks in the Solution Explorer or Project tab References folder will disappear.
  9. Build the project using Build/Rebuild Solution. If all is well, the build will succeed.
  10. Check the debug folder in de Expression.Blend.Intellisense folder for a DLL called Expression.Blend.Intellisense.dll (if you made a release build you’ll find it in the Release folder of course).
  11. Copy this file to the Add-In folder in the Expression Blend program folder: “c:\program files\Microsoft Expression\Blend 2\Addins” Replace the existing file with the same name but smaller in size with this new DLL. Don’t paste it in the Blend program folder, but in de Add-in folder.
  12. Run Blend.bat from the Blend Program folder.
    This contains the command:
    start Blend.exe -addin:Addins\Expression.Blend.Intellisense.dll
  13. Blend wil start and ask you to open your last project. Open the project.
    Press F11 twice or click the XAML tab at the top right of the working area in Blend.
  14. Press Ctrl + Spacebar inside any XAML statement to find intellisense working!

Thanks bennage for the original post at: http://code.msdn.microsoft.com/BlendSense/Thread/List.aspx and of course many, many thanks to Stefan Dobrev for making it all possible at http://blogs.telerik.com/StefanDobrev/Posts/08-08-04/IntelliSense_for_Expression_Blend.aspx

Hope this helps (I know it will!) Njoy!

WPF 3D presentation at Software Development Conference (1): Deep

Last week Tuesday at de Software Development Conference I finally gave the presentation called Deep, Deeper, Deepest on WPF 3D I had been preparing for weeks. Even though the attendance stuck to 18 indidividuals, evaluations showed a score of 7,6 with high scores for Use of Visual Aids. I will be posting screenshots, executables and code, along with a description of the demos. This will be spread over three consecutive posts. Today is about Deep:

Deep Demo Screenshot
Deep Demo Screenshot

Some people may have seen this first demo. It is called Deep and shows a Xbox box in the middle of the window. The demo is now filled with all features of 3D Graphics: model, geometry, camera, lights and textures. I created animations for it and several elements are controlled by sliders. The intention was to show off the capability for product presentations in WPF. This demo uses a Viewport3D, a control that participates in 2D screen layout like any other, but can only contain 3D information itself. The box is rotated using the buttons and the sliders. Using the textboxes to the left, the Width, Height and Depth are changed to update the size of the box. The Sphere to the left makes rotating the box possible, with the help of Hittesting on the Sphere. Rotating the camera is achieved, using the sliders at the top right hand side of the screen. Buttons below that will animate the camera to different views. The slider at the bottom right of the screen kan dim the lights to demonstrate the difference between AmbientLight, DirectionalLight and SpotLight. URLs of textures in the textboxes at the bottom of the screen allow the textures to be changed using Data Binding.

The Demo executable and the source code are available from the public folder on my SkyDrive at:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

This makes a wonderful toy, playing around with all the possibilities a single model has using a 2D interface with buttons, sliders and textboxes. It works primarily through Element Binding to Sliders and Textboxes and uses Buttons to start the animations. You can also download and use the Code from the link above.

Njoy! 

Sommige mensen hebben willicht de eerste demo al gezien. Het heet Deep en heeft een Xbox doos in het midden. Die demo is nu verder ingevuld, zodat alle onderdelen van 3D Graphics aan bod komen: model, geometry, camera, lights, textures. Daarvoor heb ik animaties gemaakt en bovendien zijn de onderdelen via sliders te besturen. De bedoeling is om de mogelijkheden voor een productpresentatie in WPF zichtbaar te maken. Deze demo maakt gebruik van een Viewport3D, een control dat gewoon in de 2D layout van een scherm meedoet, maar zelf uitsluitend 3D informatie kan bevatten. De doos is met de buttons en sliders om te draaien en met de tekstboxen links kan de Width, Height en Depth aangepast worden om een ander formaat doos te tonen. De bol links maakt het mogelijk om via HitTesting op de bol de rotatie van de box aan te sturen. De camera wordt gedraaid met de sliders rechtsboven. De knoppen eronder animeren de camera naar een bepaalde view. De sliders rechtsonder kunnen de lichten doven en zo het verschil tussen AmbientLight, DirectionalLight en SpotLight inzichtelijk maken. URLs van textures maken het mogelijk om deze snel te veranderen.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Dit levert erg leuk speelgoed op, waarmee je kan spelen met alle mogelijkheden die een enkel model heeft via een 2D User Interface met buttons, sliders en tekstboxen. Het werkt voornamelijk met Element Binding aan sliders en tekstboxen. Het gebruikt Buttons om de animaties te starten. De code kan je ook downloaden via de link hierboven…

Nooks and Crannies of Expression Blend – Part 1

Working in Blend for more than a year and a half now, you should think I  have seen about every screen and dialog there is. Recently I’ve been working with WPF 3D a lot and I found the Material editor in Blend… More surprisingly even was the discovery of the Grid Column en Rowdefintions Dialogs. No more struggling to set the star size of a Column exactly or in XAML. It was there all the time. I’ll keep on the look for more Nooks and Crannies of Expression Blend. If you know one, let me know…