Blend Bits 24–Templating Part 2

The previous post took a simple Checkbox and played with its template a little but we see quite a few more templates if we wander into a control like a ListBox.

Dropping a ListBox onto the artboard and then setting up some data that it can bind to ( using the sample data feature that I talked about here ) takes about a minute or so;

image

then there’s a bunch of templates to think about here.

Items Panel Template

One of those templates is the one that’s being used for the panel that makes up the ListBox.

Blend makes that easily accessible via the “Additional Templates” menu;

image

and by default this gives me a StackPanel which is why the ListBox lays out items the way that it does – i.e. stacked up vertically one under the other. Maybe I want a WrapPanel for my ListBox so I change the layout container here;

image

and then if I come out of editing that template;

image

then that’s not very nice;

image

as I’d really not like that ScrollBar to think that it has the responsibility of making my WrapPanel content scroll off to the right of the ListBox so I can fix that with;

image

and a quick resize makes that a little more attractive;

image

and that’s the role of the items panel template.

The Item Template

Another template that’s in play is the one that’s displaying the data on a per-item basis and Blend made one of those when I dragged my sample data to the ListBox so it’s given me a little bit of a head-start here.

Getting to the template is pretty easy;

image

and then Blend lets you edit this kind of template ( a DataTemplate ) in-place in the ListBox rather than re-focusing the environment around the content of the template itself. That is;

image

and I can edit that to my heart’s content playing with the visuals in anyway that I want setting up a few backgrounds, fonts, effects and so on;

image

and so that’s the ItemTemplate and the editing experience is pretty rich.

Item Container Style

What the heck is the item container style? If you were to run our UI as it stands and point a tool like Silverlight Spy at it then you’d see something unexpected ( unless you’ve been here before in which case, go read something else Smile );

image

ListBoxItem eh? Where the heck did that come from? I seem to remember my ItemTemplate containing a Grid but not a ListBoxItem. Also, in using the ListBox I see that I get a funny blue selection rectangle which I don’t remember creating;

image

who’s responsible for this travesty? Winking smile It’s the Item Container Style. Here’s how Blend surfaces it;

image

and if I wander into editing that style then Blend does an interesting thing in that it lets me create a style;

image

but it drops me into editing a template for a ListBoxItem

image

and if I go back “up” the hierarchy to the style;

image

then I see that I’m actually editing;

image

an ItemContainerStyle and it’s this style that sets a Template property that Blend (rightly) figured out was what I actually wanted to edit. Heading back into that template;

image

I can see that the ListBoxItemTemplate wraps a few extra pieces around whatever DataTemplate I choose as my ItemTemplate;

image

and it does this to provide somewhere to indicate selection, focus etc. and I can see that from the States panel;

image

so that’s another template that comes into play when working with a ListBox and I’ve mostly ended up editing it when I want to change that blue rectangle.

The ListBox Template Itself

As you’d expect, the ListBox has a template itself. I must admit that I don’t find myself editing it anything like as often as the previous 3 but, for completeness, you can always open it up;

image

and that gives you;

image

and then if you really want to start getting funky you can make the leap from editing one template to editing the templates of the controls that live within the template. For example, there’s a ScrollViewer here that we might want to re-template;

image

which gives us a view;

image

and that contains 2 ScrollBars which have templates so we might edit one of those which gives us…

image

and it can all start to get a little “deep”;

image

but the concept is the same one so long as the tool can deal with the hierarchy Smile

Looking at those ScrollBar templates, there’s a little plus-mark that indicates that a particular element forms a recognised part of the ScrollBar and a feature of Silverlight’s control model is this idea that a templated control may need to know which element in the template is meant to play which role or part.

Blend supports this via the Parts panel which I’ll put into another post…

UK TechDays Virtual Client Conference–Resources

At the UK TechDays online conference last week there were a number of sessions around Silverlight and Windows that I wanted to provide follow-up resources on here.

Session: Modern Windows Applications

  1. Visit Develop For Windows
  2. Download the WPF Ribbon Control and get the information on it here
  3. Download the Windows API Code Pack
  4. Read more about the Code Pack
  5. Learn about the Task Bar with WPF 4 ( and part 2 )
  6. More on the Windows 7 TaskBar
  7. More on Windows 7 Libraries
  8. Windows 7 Sensors
  9. Restart/Recovery for Applications
  10. WindowChrome – altering the non-client area of the window.
  11. Subscribe to the Windows Team blog.

Session: User Interfaces with Touch

  1. Some recent local resources on touch;
    1. Touched ( Part 1 )–Getting Touch for Free
    2. Touched ( Part 2 )–Raw Touch Events
    3. Touched ( Part 3 )–Manipulation and Gesture Support
    4. Touched ( Part 4 )-Simple Example
    5. Touched ( Part 5 )–Touch-Ready Controls
  2. Read more about WPF 4 Multi-touch and more
  3. Check out the Native Extensions for Silverlight Preview 2

Session: Silverlight Platform Overview

  1. Visit Silverlight.Net
    1. Watch videos
    2. Try the QuickStarts
    3. Checkout hands-on labs
    4. Read books
    5. Read whitepapers
  2. Watch the Silverlight Firestarter
  3. Visit Channel 9
    1. Follow Silverlight TV
    2. Subscribe to the Silverlight tag
  4. Follow Silverlight Q&A on StackOverflow.
  5. Subscribe to the Silverlight Team blog.

Session: Buffers Guide to Expression Blend

  1. Visit Expression on the web.
  2. Learn Blend via tutorials, starter kits, etc.
  3. Check out the Toolbox resources
  4. Local resources on Blend;
    1. 20 recent posts on Blend
  5. Subscribe to the Expression Blend team blog.

Session: Silverlight for Line of Business Applications

  1. Refer back to the general section on Silverlight here.

Session: Silverlight and Multi-tier Applications

  1. Silverlight Networking Videos on Channel 9
  2. Visit the RIA Services Site
  3. Visit the OData site.
  4. WCF Data Services on MSDN.
  5. Understand the WCF subset in Silverlight.
  6. Understand the security options in Silverlight for service access.
  7. and again
  8. and again
  9. and again
  10. Understand the Client/Browser HTTP stacks in Silverlight

Session: WCF RIA Services

  1. Visit the RIA Services Site
  2. RIA Services on MSDN
  3. Watch Deepesh at TechEd 2010
  4. Subscribe to Deepesh’s blog.

Session: MVVM and RIA Services

  1. Watch John’s session from PDC 2010.
  2. Read Josh’s article on MVVM.
  3. Subscribe to John’s blog.
  4. Follow the RIA Services resources from the previous session.

Session: Silverlight Apps with PRISM

  1. PRISM on CodePlex
  2. PRISM on MSDN
  3. PRISM videos on Channel 9 ( previous PRISM version )
  4. Subscribe to Karl’s Blog

Session: Premium Media Experiences with Silverlight

  1. Learn about the Silverlight Media Framework.
    1. Watch videos on Silverlight.net
  2. Learn about IIS Media Services
  3. Subscribe to David’s blog.

Blend Bits 12: States, Groups, Transitions

One of the most powerful ideas in Silverlight UI development is the idea that interfaces and controls within them present altered UI depending on what combination of states are currently active.

A simple example. I might have this UI for navigating my way through a set of photos.

image

It’s just a simple Grid with an Image and a couple of Buttons in it and a semi-transparent Rectangle placed over the top which is meant to be used to indicate that the control is disabled.

State Groups

Blend puts states into groups. A control can be in one (and only one) state from each of its state groups so a group contains mutually exclusive states.

A good example would be the states Enabled/Disabled as a control can’t really be both. I can set this up in Blend by making use of the States panel which is dauntingly empty when you first approach it;

image

apart from that one button over to the right which can create a new state group for you as in;

image

and another little button over to the right lets me create my 2 states within the group and I can just click to name the things;

image

and then the little red dot is very significant as it highlights that property changes that I now make are not regular property changes but are, instead, the properties that apply only in that particular state.

In my Enabled state for instance, I’d like the disabled rectangle to go away so I change its Visibility;

image

and as I now move between the 2 states on the artboard I can see the difference between them;

image

image

Not only can I set up states, I can also define the transition between the states and I can do that generally across all the states in the group or specifically for a transition from State A to State B.

image

Above is the default transition and on the right is where I can set up an effect to be applied as we move between states, the easing function to apply to that effect and how long that effect is to last.

On the top right ( with the arrow ) is the button that toggles whether Blend shows these transitions as you move between states in the designer itself. By default it is off.

I chose a Blinds effect and gave it a long time period so that I could try and get a screen capture of it and I can see the transition happening here;

image

That’s ok if I want one transition to be used from any state to any other state but I might want to use different transitions depending on which states are involved and there’s UI for that;

image

which lets me define different transitions for the general case of entering or leaving this state and also for a specific transition from Disabled->Enabled.

I’m not sure I’d really want a Blinds effect when the control went from enabled to disabled but it perhaps illustrates the point.

I could see some other states being useful for whether I show my Next/Prev buttons in that I might only want to show them when the mouse is over the picture and I might only show them based on whether there are any Next/Previous images to actually move to. Hence 4 states perhaps;

image

and my I want the buttons to show up ( or not ) depending on those states so I just set their visibility and I also set up a 0.5 second transition to fade from one state to another.

There are Actions for moving to a particular state so I could use the usual trick of Triggers and those Actions to drive these state changes although I’d need some data to be able to drive all the states but as an example it’s easy enough do drive the 2 that represent “mouse over” and “mouse not over”;

image

and if I do a similar thing for the MouseLeave event then that all wires up quite nicely and does the right thing in terms of presenting the controls only when the mouse is over the UI.