Paul blog

Explaining thoughts and findings is a great way to learn

A WPF Radio Button Control Template for Touch Screen Application

I love the WPF’s ability to completely restyle a standard control. Each WPF Control has a default Control Template that contains the visual tree of that control to define how it displays itself and its contents. We can change the structure and appearance of a control by modifying the ControlTemplate of that control. We can override the default control template to make it appear exactly as we want. It will only replace the visual tree of the control not the behavior of the control.

In a touch screen application, we usually make bigger size control than the control size of traditional application. Here a custom control template has been made for radio button to use it in touch screen application. Here i did not use any good looking gradient. By using good-looking gradient, you can make this control look stunning.

The used XAML for Radio Button Control Template  is in the following

   1: <Style TargetType="{x:Type RadioButton}" >
   2:           <Setter Property="Template">
   3:               <Setter.Value>
   4:                   <ControlTemplate TargetType="{x:Type RadioButton}">
   5:                       <BulletDecorator Background="Transparent">
   6:                           <BulletDecorator.Bullet>
   7:                               <StackPanel Orientation="Horizontal" >
   8:                                   <Grid Width="40" Height="40">
   9:                                       <Ellipse Name="MainEllipse" Width="40" Height="40">
  10:                                           <Ellipse.Fill>
  11:                                               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  12:                                                   <GradientStop Color="#FFC8C8C8" Offset="0"/>
  13:                                                   <GradientStop Color="#FFF7F7F7" Offset="0.991"/>
  14:                                               </LinearGradientBrush>
  15:                                           </Ellipse.Fill>
  16:                                       </Ellipse>
  17:                                       <Ellipse Margin="10,10,10,10"    Fill="#C0C0C0" Width="Auto" Height="Auto">
  18:                                       </Ellipse>
  19:                                       <Ellipse x:Name="Selected" Margin="10,10,10,10"     Width="Auto" Height="Auto" >
  20:                                           <Ellipse.Fill>
  21:                                               <SolidColorBrush Color="Navy"   />                                                
  22:                                           </Ellipse.Fill>
  23:                                       </Ellipse>
  24:                                   </Grid>
  25:                                   <ContentPresenter Margin="5,0,0,0" VerticalAlignment="Center"/>
  26:                               </StackPanel>
  27:                           </BulletDecorator.Bullet>
  28:                       </BulletDecorator>
  29:                       <ControlTemplate.Triggers>
  30:                           <Trigger Property="IsMouseOver" 
  31:                                Value="true">
  32:                               <Setter TargetName="MainEllipse" Property="Fill" 
  33:                                   Value="LightBlue"/>                         
  34:                           </Trigger>
  35:                           <Trigger Property="IsChecked" Value="false">
  36:                               <Setter TargetName="Selected" Property="Visibility" Value="Collapsed"/>
  37:                           </Trigger>                          
  38:                       </ControlTemplate.Triggers>
  39:                   </ControlTemplate>
  40:               </Setter.Value>
  41:           </Setter>
  42:       </Style>

Stack panel is used to stack the visual and the content horizontally. Here we used three ellipses to define the visual. First Ellipse defines the outer elliptical shape. Second one is inner ellipse when radio button is not selected. Third one is also inner ellipse when radio button is selected.

When creating a Control Template, we need to specify the type of object that this template is intended for. The type is simply the same type as the style TargetType="{x:Type RadioButton}.Two triggers are used, one is fired when the radio button is checked and it changes the inner ellipse so that it looks like selected. Another one is mouseover, but in touch screen application, Mouse over has no effect. Content Presenter in the Control Template displays the contents of a Content Control.

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-17-2009 9:31 PM by Razan | with no comments
Filed under: , ,