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 RadioButton.
Template binding. CommonStates (Normal, MouseOver, Pressed and Disabled), CheckStates (Unchecked, Checked and Indeterminate), FocusStates (Unfocused and Focused) and ValidationStates (Valid, InvalidUnfocused and InvalidFocused).
Template parts. None.
Template binding. Try template binding Background, BorderBrush, Foreground, BorderThickness or Padding.
Make Into Control. A visual designer has comped out some RadioButton 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 RadioButton, it is still just artwork consisting of Panels and Shapes and text:
<Grid> <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
<Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
<TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/> </Grid>
Practice making the artwork into a RadioButton with the following steps.
You should now have a working RadioButton!