Search

I have the following requirements for this radio button style:

• It must be re-sizable
• The rounded ends must stay perfect half circles in proportion to the height of the button
• It must behave correctly in Blend
• Optional Extra: It would be nice to not have to manually edit XAML in Blend

The first post in the theme can be found here. If you haven't done much styling of controls before then I recommend you start there since it introduces practices to keep your styles manageable.
This far in the series, I'm focusing on specific parts of the more complex controls.
In this post, we are branching out into the Silverlight Toolkit to style the Accordian control.

The ContentControl is often overlooked when building Silverlight apps. It’s used inside many controls such as the Button or ChildWindow, but it also turns out to be quite useful on it’s own for separating content from presentation.

The challenging bit was getting the selected item in the list box to cast a glow on the things around it. The glow seems to escape the list box itself. The reason this wasn't straight forward is that the ListBox control clips its content to keep everything inside the scrollable area. My first instinct was just to set negative margins on something inside the ListBoxItem's template (ItemContainerStyle), but that's when it became obvious that it was being clipped.

In the context of animation, one of the biggest features in Flash that is missing from Silverlight 3 is an Opacity Mask layer. I haven't seen any mention of this in to Silverlight 4, but I could be mistaken. The only feature that we have in Silverlight 3 is the OpacityMask on each element, which is either a Brush or an image - (Image Brushes don't tile either, but that's a post for another day).

This is the 6th in a series on creating a "Chrome and Glass" Silverlight theme in Expression Blend. The purpose of the theme is to look at all the common controls and point out any interesting or difficult aspects of styling their templates. If you haven't styled many controls before then I recommend you begin with the first post in the series.

Apart from describing the steps to style each of the controls for this particular theme, I've been trying to describe some of the techniques and knowledge that can be applied generally to any theme or style.

• In part 1 we covered creating style resources in a resource dictionary.

• In part 2 we covered editing control templates as part of a style, including states.

• In part 3 we knocked off a couple of the easier controls to style, although we added some extra elements to the control template.

In this post, we are going to dig down into a control that is made up of a collection of other controls: the ListBox. But we are going to begin by styling the other controls that make up the ListBox.