Saturday, April 26, 2014

Awesome RadioButton Styles and Templates

Introduction
This article describes the styles and templates for the RadioButton control. You can modify the default ControlTemplate to give the control a unique appearance. 
This article is a simple approach for achieving reusable AutoComplete user control.

Skeleton of the Resource

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">



    <Style TargetType="{x:Type RadioButton}" x:Key="buttonStyle1">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="DemiBold" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Cursor="Hand">

                        <Border CornerRadius="3" BorderBrush="#FFE2E2E2" BorderThickness="1" Padding="5,0,10,0">

                            <StackPanel Orientation="Vertical" Margin="5,0,0,0" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Center">

                                <ContentPresenter x:Name="cp" Content="{TemplateBinding Content}"/>

                                <Border Name="RadioMark" BorderThickness="1" Width="{Binding ElementName=cp,Path=Width}" Margin="0" Padding="0" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
                               
                            </StackPanel>

                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="#FFE2E2E2" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                    </BulletDecorator>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="RadioMark" Property="BorderBrush" Value="#FF0092B2"/>
                            <Setter TargetName="RadioMark" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="RadioMark" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RadioButton}" x:Key="buttonStyle2">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Background="White" Cursor="Hand">
                        <BulletDecorator.Bullet>

                            <Border x:Name="bdrButtonStyle2" CornerRadius="3,0,0,3" BorderBrush="#FF565656" BorderThickness="1" Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                                <Polygon Name="TickMark"
                                         Points="4,9 8,15 15,3 8,11 4,9" 
                                         Stroke="#FF0092B2"
                                         StrokeThickness="1"
                                         Visibility="Hidden"
                                         Fill="Beige"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center">
                                </Polygon>
                            </Border>

                        </BulletDecorator.Bullet>

                        <Border Background="#FF565656" CornerRadius="0,3,3,0" Width="Auto" Height="{Binding ElementName=bdrButtonStyle2,Path=Height}" Margin="2,0,0,0" Padding="5,0,0,0">
                            <TextBlock Foreground="White" VerticalAlignment="Center">
                               <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                            </TextBlock>
                        </Border>

                    </BulletDecorator>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="TickMark" Property="Visibility" Value="Visible"/>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RadioButton}" x:Key="buttonStyle3">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="DemiBold" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Cursor="Hand">

                        <Border CornerRadius="3" BorderBrush="#FFE2E2E2" BorderThickness="1" Padding="5,0,10,0">

                            <StackPanel Orientation="Horizontal">

                                <Ellipse Name="RadioMark" Width="20" Height="20" Margin="0,0,10,0" Fill="White"/>

                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </StackPanel>

                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="#FFE2E2E2" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                    </BulletDecorator>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="RadioMark" Property="Fill" Value="Gold"/>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RadioButton}" x:Key="buttonStyle4">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="DemiBold" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Cursor="Hand">

                        <Border CornerRadius="3" BorderBrush="#FFE2E2E2" BorderThickness="1" Padding="5,0,10,0">

                            <StackPanel Orientation="Horizontal">

                                <Ellipse Name="RadioMark" Width="20" Height="20" Margin="0,0,10,0" Stroke="White" Fill="White" StrokeThickness="7"/>

                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </StackPanel>

                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="#FFE2E2E2" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                    </BulletDecorator>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="RadioMark" Property="Fill" Value="#8d5f00"/>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RadioButton}" x:Key="buttonStyle5">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="DemiBold" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Cursor="Hand">

                        <Border CornerRadius="3" BorderThickness="1" Padding="5,0,10,0">

                            <StackPanel Orientation="Horizontal">

                                <Ellipse Name="RadioMark" Width="20" Height="20" Margin="0,0,5,0" Stroke="LightGray" Fill="White" StrokeThickness="7"/>

                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </StackPanel>
                        </Border>

                    </BulletDecorator>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="RadioMark" Property="Fill" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</ResourceDictionary>

Expected Output


External Resources