Overlapping elements and a RadioButton

Question

I want to create a RadioButton with text inside, and when checked, it needs to turn red.

How would I create this in WPF XAML?

Something like this:

Answer 1

In order to change the appearance of controls, you have to edit their control template. The easiest way is to extract the default style (with its control template) in Visual Studio or Blend. From there, you can adapt it to your requirements. This is an example that - although not with pretty colors - should do what you want.

<SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#995555"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#990000"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Foreground" Color="#FFFFFF"/>
<SolidColorBrush x:Key="RadioButton.IsChecked.Background" Color="#FF0000"/>
<SolidColorBrush x:Key="RadioButton.IsChecked.Border" Color="#990000"/>
<SolidColorBrush x:Key="RadioButton.IsChecked.Foreground" Color="#FFFFFF"/>
<SolidColorBrush x:Key="RadioButton.IsUnchecked.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="RadioButton.IsUnchecked.Border" Color="#990000"/>
<SolidColorBrush x:Key="RadioButton.IsUnchecked.Foreground" Color="#000000"/>
<SolidColorBrush x:Key="RadioButton.Pressed.Background" Color="#993333"/>
<SolidColorBrush x:Key="RadioButton.Pressed.Border" Color="#990000"/>
<SolidColorBrush x:Key="RadioButton.Pressed.Foreground" Color="#FFFFFF"/>
<SolidColorBrush x:Key="RadioButton.Disabled.Background" Color="#FFE6E6E6"/>
<SolidColorBrush x:Key="RadioButton.Disabled.Border" Color="#555555"/>
<SolidColorBrush x:Key="RadioButton.Disabled.Foreground" Color="#999999"/>
<Style x:Key="MyRadioButtonStyle" TargetType="{x:Type RadioButton}">
   <Setter Property="FocusVisualStyle">
      <Setter.Value>
         <Style>
            <Setter Property="Control.Template">
               <Setter.Value>
                  <ControlTemplate>
                     <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>
         </Style>
      </Setter.Value>
   </Setter>
   <Setter Property="HorizontalAlignment" Value="Left"/>
   <Setter Property="Padding" Value="2"/>
   <Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type RadioButton}">
            <Border x:Name="templateRoot" Focusable="True" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
               <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
               <Trigger Property="IsMouseOver" Value="true">
                  <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource RadioButton.MouseOver.Background}"/>
                  <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource RadioButton.MouseOver.Border}"/>
                  <Setter Property="Foreground" Value="{StaticResource RadioButton.MouseOver.Foreground}"/>
               </Trigger>
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource RadioButton.Disabled.Background}"/>
                  <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource RadioButton.Disabled.Border}"/>
                  <Setter Property="Foreground" Value="{StaticResource RadioButton.Disabled.Foreground}"/>
               </Trigger>
               <Trigger Property="IsPressed" Value="true">
                  <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource RadioButton.Pressed.Background}"/>
                  <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource RadioButton.Pressed.Border}"/>
                  <Setter Property="Foreground" Value="{StaticResource RadioButton.Pressed.Foreground}"/>
               </Trigger>
               <Trigger Property="IsChecked" Value="true">
                  <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource RadioButton.IsChecked.Background}"/>
                  <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource RadioButton.IsChecked.Border}"/>
                  <Setter Property="Foreground" Value="{StaticResource RadioButton.IsChecked.Foreground}"/>
               </Trigger>
               <Trigger Property="IsChecked" Value="{x:Null}">
                  <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource RadioButton.IsUnchecked.Background}"/>
                  <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource RadioButton.IsUnchecked.Border}"/>
                  <Setter Property="Foreground" Value="{StaticResource RadioButton.IsUnchecked.Foreground}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

Copy the style and the resources to any resource dictionary in scope of the control that you want to style and reference the style using StaticResource (or DynamicResource if you intend to change it at runtime).

<RadioButton Style="{DynamicResource MyRadioButtonStyle}" GroupName="MyGroupName" Content="First"/>

If you want it to be applied automatically within the resource scope, remove the x:Key to make it a so-called implicit style. Since you specifically asked for a RadioButton style, I guess there are multiple exclusive options. If there are no exclusive options, mabe a Checkbox or a ToggleButton would be a better fit, you decide. Templating those controls would be done the same way: Extract, adapt, use and have fun.