locked
RibbonRadioButton Aspect RRS feed

  • Question

  • I am developing a Ribbon for my WPF application and I need to add two RibbonRadioButton into a RibbonGroup. I already did this, and everything works perfectly:

    <rb:RibbonGroup>
         <rb:RibbonRadioButton Label="Option one" IsChecked="{Binding OptionOne}"  />
        <rb:RibbonRadioButton Label="Option two" IsChecked="{Binding OptionTwo}" />
      </rb:RibbonGroup>

    But the RibbonRadioButtons look like a "conventional buttons" and I need them to look like the classic pushable RadioButtons we all know which are made up of a little circle and a label.

    So, Is there a way to change the look of the RibbonRadioButtons??

    Thanks in advance

    Wednesday, August 22, 2012 7:57 PM

Answers

  • Here is the RibbonRadioButton style, as generated out of Expression Blend:

    <Style x:Key="RibbonRadioButtonStyle1" TargetType="{x:Type rb:RibbonRadioButton}">
    	<Setter Property="Background" Value="Transparent"/>
    	<Setter Property="BorderBrush" Value="Transparent"/>
    	<Setter Property="BorderThickness" Value="1"/>
    	<Setter Property="CornerRadius" Value="2"/>
    	<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    	<Setter Property="HorizontalContentAlignment" Value="Center"/>
    	<Setter Property="MouseOverBorderBrush" Value="{Binding Ribbon.MouseOverBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="MouseOverBackground" Value="{Binding Ribbon.MouseOverBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="PressedBorderBrush" Value="{Binding Ribbon.PressedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="PressedBackground" Value="{Binding Ribbon.PressedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="CheckedBorderBrush" Value="{Binding Ribbon.CheckedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="CheckedBackground" Value="{Binding Ribbon.CheckedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="FocusedBorderBrush" Value="{Binding Ribbon.FocusedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="FocusedBackground" Value="{Binding Ribbon.FocusedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="ToolTipService.InitialShowDelay" Value="900"/>
    	<Setter Property="ToolTipService.ShowDuration" Value="20000"/>
    	<Setter Property="ToolTipService.BetweenShowDelay" Value="0"/>
    	<Setter Property="QuickAccessToolBarControlSizeDefinition">
    		<Setter.Value>
    			<rb:RibbonControlSizeDefinition IsLabelVisible="False" ImageSize="Small"/>
    		</Setter.Value>
    	</Setter>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type rb:RibbonRadioButton}">
    				<Grid SnapsToDevicePixels="True">
    					<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
    					<Border x:Name="MiddleBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}">
    						<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
    							<StackPanel x:Name="StackPanel" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
    								<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="1,1,1,2" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
    								<Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
    									<rb:RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
    								</Grid>
    							</StackPanel>
    						</Border>
    					</Border>
    				</Grid>
    				<ControlTemplate.Triggers>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Large">
    						<Setter Property="MinWidth" Value="44"/>
    						<Setter Property="Height" Value="66"/>
    						<Setter Property="MinHeight" TargetName="Grid" Value="26"/>
    						<Setter Property="rb:RibbonTwoLineText.HasTwoLines" TargetName="TwoLineText" Value="True"/>
    					</DataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small">
    						<Setter Property="Height" Value="22"/>
    						<Setter Property="Margin" TargetName="PART_Image" Value="1,0"/>
    						<Setter Property="Source" TargetName="PART_Image" Value="{Binding SmallImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="Width" TargetName="PART_Image" Value="16"/>
    						<Setter Property="Height" TargetName="PART_Image" Value="16"/>
    						<Setter Property="HorizontalAlignment" TargetName="TwoLineText" Value="Left"/>
    						<Setter Property="Margin" TargetName="TwoLineText" Value="1"/>
    						<Setter Property="Orientation" TargetName="StackPanel" Value="Horizontal"/>
    					</DataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small"/>
    							<Condition Binding="{Binding IsInQuickAccessToolBar, RelativeSource={RelativeSource Self}}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Height" Value="Auto"/>
    					</MultiDataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.IsLabelVisible, RelativeSource={RelativeSource Self}}" Value="False">
    						<Setter Property="Text" TargetName="TwoLineText" Value="{x:Null}"/>
    					</DataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Collapsed">
    						<Setter Property="Visibility" TargetName="PART_Image" Value="Collapsed"/>
    					</DataTrigger>
    					<Trigger Property="IsMouseOver" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
    					</Trigger>
    					<Trigger Property="IsKeyboardFocused" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding FocusedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding FocusedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
    					</Trigger>
    					<Trigger Property="IsEnabled" Value="False">
    						<Setter Property="Opacity" TargetName="PART_Image" Value="0.5"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="#FF9E9E9E"/>
    					</Trigger>
    					<Trigger Property="IsChecked" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding CheckedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding CheckedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#FFE7CBAD" Offset="0"/>
    									<GradientStop Color="#FFF7D7B5" Offset="0.1"/>
    									<GradientStop Color="#FFFFD38C" Offset="0.36"/>
    									<GradientStop Color="#FFFFC75A" Offset="0.36"/>
    									<GradientStop Color="#FFFFEFA5" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</Trigger>
    					<Trigger Property="IsPressed" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    					</Trigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsChecked" Value="True"/>
    							<Condition Property="IsMouseOver" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsChecked" Value="True"/>
    							<Condition Property="IsKeyboardFocused" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsPressed" Value="True"/>
    							<Condition Property="IsKeyboardFocused" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<Trigger Property="IsInControlGroup" Value="True">
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding Ribbon.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderThickness" TargetName="OuterBorder" Value="0,0,1,0"/>
    						<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
    						<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
    					</Trigger>
    					<DataTrigger Binding="{Binding HighContrast}" Value="True">
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
    						<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
    						<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
    						<Setter Property="CornerRadius" TargetName="MiddleBorder" Value="0"/>
    						<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
    					</DataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="Background" TargetName="MiddleBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    						<Setter Property="Background" TargetName="MiddleBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsInControlGroup, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    					</MultiDataTrigger>
    				</ControlTemplate.Triggers>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>

    You could pull the classic RadioButton template from here and make it look how you wanted.
     

    Or.....

    You can cheat and restyle the ControlTemplate to just show a RadioButton.

    You'll have to rewire it, I show various property wirings here. 

    I also give the RibbonGroup an x:Name and bind GroupName to that.

    <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" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic" mc:Ignorable="d" x:Class="WpfApplication70.MainWindow"
            Title="MainWindow" Height="350" Width="525">
    	<Window.Resources>
    		<ControlTemplate x:Key="RibbonRadioButtonControlTemplate1" TargetType="{x:Type rb:RibbonRadioButton}">
                <RadioButton GroupName="{Binding Name, 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 x:Name="grp1">
    		     <rb:RibbonRadioButton Label="Option one" IsChecked="{Binding OptionOne}" Template="{DynamicResource RibbonRadioButtonControlTemplate1}"  />
    		     <rb:RibbonRadioButton Label="Option two" IsChecked="{Binding OptionTwo}" Template="{DynamicResource RibbonRadioButtonControlTemplate1}" />
    		</rb:RibbonGroup>
          	</rb:Ribbon>
        </Grid>
    </Window>

     

    Hope that answers your question and/or is helpful :)

     

    Regards,
    Pete


    #PEJL

    • Marked as answer by Dante24 Thursday, August 23, 2012 3:35 PM
    Wednesday, August 22, 2012 10:04 PM

All replies

  • Here is the RibbonRadioButton style, as generated out of Expression Blend:

    <Style x:Key="RibbonRadioButtonStyle1" TargetType="{x:Type rb:RibbonRadioButton}">
    	<Setter Property="Background" Value="Transparent"/>
    	<Setter Property="BorderBrush" Value="Transparent"/>
    	<Setter Property="BorderThickness" Value="1"/>
    	<Setter Property="CornerRadius" Value="2"/>
    	<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    	<Setter Property="HorizontalContentAlignment" Value="Center"/>
    	<Setter Property="MouseOverBorderBrush" Value="{Binding Ribbon.MouseOverBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="MouseOverBackground" Value="{Binding Ribbon.MouseOverBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="PressedBorderBrush" Value="{Binding Ribbon.PressedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="PressedBackground" Value="{Binding Ribbon.PressedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="CheckedBorderBrush" Value="{Binding Ribbon.CheckedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="CheckedBackground" Value="{Binding Ribbon.CheckedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="FocusedBorderBrush" Value="{Binding Ribbon.FocusedBorderBrush, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="FocusedBackground" Value="{Binding Ribbon.FocusedBackground, RelativeSource={RelativeSource Self}}"/>
    	<Setter Property="ToolTipService.InitialShowDelay" Value="900"/>
    	<Setter Property="ToolTipService.ShowDuration" Value="20000"/>
    	<Setter Property="ToolTipService.BetweenShowDelay" Value="0"/>
    	<Setter Property="QuickAccessToolBarControlSizeDefinition">
    		<Setter.Value>
    			<rb:RibbonControlSizeDefinition IsLabelVisible="False" ImageSize="Small"/>
    		</Setter.Value>
    	</Setter>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type rb:RibbonRadioButton}">
    				<Grid SnapsToDevicePixels="True">
    					<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
    					<Border x:Name="MiddleBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}">
    						<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
    							<StackPanel x:Name="StackPanel" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
    								<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="1,1,1,2" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
    								<Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
    									<rb:RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
    								</Grid>
    							</StackPanel>
    						</Border>
    					</Border>
    				</Grid>
    				<ControlTemplate.Triggers>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Large">
    						<Setter Property="MinWidth" Value="44"/>
    						<Setter Property="Height" Value="66"/>
    						<Setter Property="MinHeight" TargetName="Grid" Value="26"/>
    						<Setter Property="rb:RibbonTwoLineText.HasTwoLines" TargetName="TwoLineText" Value="True"/>
    					</DataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small">
    						<Setter Property="Height" Value="22"/>
    						<Setter Property="Margin" TargetName="PART_Image" Value="1,0"/>
    						<Setter Property="Source" TargetName="PART_Image" Value="{Binding SmallImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="Width" TargetName="PART_Image" Value="16"/>
    						<Setter Property="Height" TargetName="PART_Image" Value="16"/>
    						<Setter Property="HorizontalAlignment" TargetName="TwoLineText" Value="Left"/>
    						<Setter Property="Margin" TargetName="TwoLineText" Value="1"/>
    						<Setter Property="Orientation" TargetName="StackPanel" Value="Horizontal"/>
    					</DataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small"/>
    							<Condition Binding="{Binding IsInQuickAccessToolBar, RelativeSource={RelativeSource Self}}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Height" Value="Auto"/>
    					</MultiDataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.IsLabelVisible, RelativeSource={RelativeSource Self}}" Value="False">
    						<Setter Property="Text" TargetName="TwoLineText" Value="{x:Null}"/>
    					</DataTrigger>
    					<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Collapsed">
    						<Setter Property="Visibility" TargetName="PART_Image" Value="Collapsed"/>
    					</DataTrigger>
    					<Trigger Property="IsMouseOver" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
    					</Trigger>
    					<Trigger Property="IsKeyboardFocused" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding FocusedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding FocusedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
    					</Trigger>
    					<Trigger Property="IsEnabled" Value="False">
    						<Setter Property="Opacity" TargetName="PART_Image" Value="0.5"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="#FF9E9E9E"/>
    					</Trigger>
    					<Trigger Property="IsChecked" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding CheckedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding CheckedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#FFE7CBAD" Offset="0"/>
    									<GradientStop Color="#FFF7D7B5" Offset="0.1"/>
    									<GradientStop Color="#FFFFD38C" Offset="0.36"/>
    									<GradientStop Color="#FFFFC75A" Offset="0.36"/>
    									<GradientStop Color="#FFFFEFA5" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</Trigger>
    					<Trigger Property="IsPressed" Value="True">
    						<Setter Property="Background" TargetName="OuterBorder" Value="{Binding PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    					</Trigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsChecked" Value="True"/>
    							<Condition Property="IsMouseOver" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsChecked" Value="True"/>
    							<Condition Property="IsKeyboardFocused" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<MultiTrigger>
    						<MultiTrigger.Conditions>
    							<Condition Property="IsPressed" Value="True"/>
    							<Condition Property="IsKeyboardFocused" Value="True"/>
    						</MultiTrigger.Conditions>
    						<Setter Property="Background" TargetName="MiddleBorder">
    							<Setter.Value>
    								<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    									<GradientStop Color="#40FFFEFE" Offset="0"/>
    									<GradientStop Color="#40FFFEFE" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.39"/>
    									<GradientStop Color="#20FFCE68" Offset="0.69"/>
    									<GradientStop Color="#10FFFFFF" Offset="1"/>
    								</LinearGradientBrush>
    							</Setter.Value>
    						</Setter>
    					</MultiTrigger>
    					<Trigger Property="IsInControlGroup" Value="True">
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding Ribbon.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
    						<Setter Property="BorderThickness" TargetName="OuterBorder" Value="0,0,1,0"/>
    						<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
    						<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
    					</Trigger>
    					<DataTrigger Binding="{Binding HighContrast}" Value="True">
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
    						<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
    						<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
    						<Setter Property="CornerRadius" TargetName="MiddleBorder" Value="0"/>
    						<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
    					</DataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="Background" TargetName="MiddleBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    						<Setter Property="Background" TargetName="MiddleBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
    						<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsInControlGroup, RelativeSource={RelativeSource Self}}" Value="True"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
    					</MultiDataTrigger>
    					<MultiDataTrigger>
    						<MultiDataTrigger.Conditions>
    							<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
    							<Condition Binding="{Binding HighContrast}" Value="True"/>
    						</MultiDataTrigger.Conditions>
    						<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    					</MultiDataTrigger>
    				</ControlTemplate.Triggers>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>

    You could pull the classic RadioButton template from here and make it look how you wanted.
     

    Or.....

    You can cheat and restyle the ControlTemplate to just show a RadioButton.

    You'll have to rewire it, I show various property wirings here. 

    I also give the RibbonGroup an x:Name and bind GroupName to that.

    <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" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic" mc:Ignorable="d" x:Class="WpfApplication70.MainWindow"
            Title="MainWindow" Height="350" Width="525">
    	<Window.Resources>
    		<ControlTemplate x:Key="RibbonRadioButtonControlTemplate1" TargetType="{x:Type rb:RibbonRadioButton}">
                <RadioButton GroupName="{Binding Name, 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 x:Name="grp1">
    		     <rb:RibbonRadioButton Label="Option one" IsChecked="{Binding OptionOne}" Template="{DynamicResource RibbonRadioButtonControlTemplate1}"  />
    		     <rb:RibbonRadioButton Label="Option two" IsChecked="{Binding OptionTwo}" Template="{DynamicResource RibbonRadioButtonControlTemplate1}" />
    		</rb:RibbonGroup>
          	</rb:Ribbon>
        </Grid>
    </Window>

     

    Hope that answers your question and/or is helpful :)

     

    Regards,
    Pete


    #PEJL

    • Marked as answer by Dante24 Thursday, August 23, 2012 3:35 PM
    Wednesday, August 22, 2012 10:04 PM
  • Thank you again! Just what I was looking for!
    Thursday, August 23, 2012 3:36 PM