The team blog of the Expression Blend and Design
Hello! In this article, I’d like to provide you with some information and tips that you’ll find useful when styling a Silverlight 3 Button.
Visual states. CommonStates (Normal, MouseOver, Pressed and Disabled) and FocusStates (Unfocused and Focused).
Template parts. None.
Template binding. Try template binding Background, BorderBrush, Foreground, BorderThickness or Padding.
Make Into Control, where content is text. A visual designer has comped out some Button states:
The comp artwork is then imported into Blend 3. Here’s the XAML for the Normal state. Note, this XAML is not yet a styled Button, it is still just artwork consisting of Panels and Shapes and text.
<Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
<TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
Practice making the artwork into a Button with the following steps.
Make Into Control, where content is a graphic. A visual designer has comped out some Button states:
The comp artwork is then imported into Blend 3. Here’s the XAML for the Normal state.
<Grid Width="17" Height="17">
<Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D"/>
<Path x:Name="content" Fill="LightGray" Stretch="Fill" Width="7" Height="7" Data="M196.89876,311.82065 L204.06047,311.82065 L200.42426,304.87872 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
You should now have a working Button!
Good stuff Thanks. But why would the recommendation be to replace the content presenter in the button template with static content? Wouldn't it make more sense to stick to the content model and place a content presenter in the template, or at the very least (in the first example) Template bind the text property to the content property?
Thanks for this tutor (and the whole serie). It is important to get tricks from people who really know what is possible to do with the software.
Blend is a fantastic tool, still not perfect, but all the work done from the 1st release is on the good road and V3 is really cool. Thanks to Blend team.
Nice. I'd really love to see how you rotate text so it fits into a button that's very narrow and tall. (The problem is in the sequence of the transform, occurring after the text is in the button, so it doesn't stay in the button, or it gets truncated before it can be rotated.)