Introduction

This contribution shows a simple and effective way to restyle a control as another control.

In this example, we change the Controltemplate of a "square" RibbonRadioButton, and make it look like a "round bulletted" RadioButton. However, some rewiring is required, to make it ACT like a RadioButton.

Building the Sample

Just download, unzip, open and run!

Description

In this sample, we change the Control Template for the RibbonRadioButton. The new template simply contains the other control, in our case a normal RadioButton.

But that isnt enough.Now we need to "wire" through the properties from the TemplatedParent.

XAML

Edit|Remove

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:rb="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
		x:Class="WpfApplication70.MainWindow"
        Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
		<ControlTemplate x:Key="RibbonRadioButtonControlTemplate1" 
			TargetType="{x:Type rb:RibbonRadioButton}">
            <RadioButton 
				GroupName="{Binding Path=., RelativeSource={RelativeSource AncestorType=rb:RibbonGroup}}" 
				Content="{TemplateBinding Label}" 
				IsChecked="{Binding IsChecked}" />
		</ControlTemplate>
	</Window.Resources>
    <Grid>
    	<rb:Ribbon HorizontalAlignment="Left" Margin="111,86,0,88.867" Width="289.14">
	    	<rb:RibbonGroup>
			     <rb:RibbonRadioButton Label="1. Option one" IsChecked="{Binding OptionOne}" />
			     <rb:RibbonRadioButton Label="1. Option two" IsChecked="{Binding OptionTwo}" />
			     <rb:RibbonRadioButton Label="2. Option one" IsChecked="{Binding OptionOne}" 
				 	Template="{DynamicResource RibbonRadioButtonControlTemplate1}"  />
			     <rb:RibbonRadioButton Label="2. Option two" IsChecked="{Binding OptionTwo}" 
				 	Template="{DynamicResource RibbonRadioButtonControlTemplate1}" />
			</rb:RibbonGroup>
      	</rb:Ribbon>
    </Grid>
</Window>

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:rb="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" 
        x:Class="WpfApplication70.MainWindow" 
        Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
        <ControlTemplate x:Key="RibbonRadioButtonControlTemplate1"  
            TargetType="{x:Type rb:RibbonRadioButton}"> 
            <RadioButton  
                GroupName="{Binding Path=., RelativeSource={RelativeSource AncestorType=rb:RibbonGroup}}"  
                Content="{TemplateBinding Label}"  
                IsChecked="{Binding IsChecked}" /> 
        </ControlTemplate> 
    </Window.Resources> 
    <Grid> 
        <rb:Ribbon HorizontalAlignment="Left" Margin="111,86,0,88.867" Width="289.14"> 
            <rb:RibbonGroup> 
                 <rb:RibbonRadioButton Label="1. Option one" IsChecked="{Binding OptionOne}" /> 
                 <rb:RibbonRadioButton Label="1. Option two" IsChecked="{Binding OptionTwo}" /> 
                 <rb:RibbonRadioButton Label="2. Option one" IsChecked="{Binding OptionOne}"  
                     Template="{DynamicResource RibbonRadioButtonControlTemplate1}"  /> 
                 <rb:RibbonRadioButton Label="2. Option two" IsChecked="{Binding OptionTwo}"  
                     Template="{DynamicResource RibbonRadioButtonControlTemplate1}" /> 
            </rb:RibbonGroup> 
          </rb:Ribbon> 
    </Grid> 
</Window>

This is a small sample, but a worthy one, because there are a few interesting concepts here.

Firstly, although the Controltemplate has been completely replaced, the control still acts the same to "external" use, by the application.

The control now has a RadioButton in place to the square RibbonRadioButton design, however the round checkbox you see is just a dumb object. To make it ACT like a radio button, we have to pass through events and state properties, to make it react to IsChecked and to display the Content.

Also, to make it group with other buttons, we have to traverse the visual tree to a parent RibbonGroup object. The object itself acts as the GroupName.

Source Code Files

MainWindow.xaml - where all the magic is!