WPF RadioButton/ToggleButton styling WPF RadioButton/ToggleButton styling wpf wpf

WPF RadioButton/ToggleButton styling


This may not be the easiest/best approach, but I took a stab at knocking up some ControlTemplates using Kaxaml, to produce something that looks like this:

Button Preview

You could store these templates in a ResourceDictionary and apply them when required, or use them if you were building your button list on the fly.

I actually created three slightly different styles, one for the left and right buttons, and one for the middle (you may be able to simplify this with extending/inheriting styles). Some repeated code omitted.

<Grid>    <Grid.Resources>        <!-- Brushes for colours/backgrounds -->        <SolidColorBrush x:Key="FontBrush" Color="#DDDDDD"/>        <LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1">            <GradientStop Offset="0" Color="#888888"/>            <GradientStop Offset="1" Color="#222222"/>        </LinearGradientBrush>        <SolidColorBrush x:Key="BorderBrush1" Color="#333333"/>        <LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1">            <GradientStop Offset="0" Color="#555555"/>            <GradientStop Offset="1" Color="#111111"/>        </LinearGradientBrush>        <!-- Left Button Template -->        <ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}">            <Border                Name="Border"                Background="{StaticResource BgBrush1}"                BorderBrush="{StaticResource BorderBrush1}"                BorderThickness="1"                CornerRadius="5,0,0,5">                <ContentPresenter                    HorizontalAlignment="Center"                    Margin="{TemplateBinding Padding}"                    VerticalAlignment="Center"                    Content="{TemplateBinding Content}"                    TextBlock.FontWeight="Bold"                    TextBlock.Foreground="{StaticResource FontBrush}"/>            </Border>            <ControlTemplate.Triggers>                <Trigger Property="ToggleButton.IsMouseOver" Value="true">                    <Setter TargetName="Border" Property="Background" Value="#808080"/>                </Trigger>                <Trigger Property="IsChecked" Value="true">                    <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>                </Trigger>            </ControlTemplate.Triggers>        </ControlTemplate>        <!-- Middle Button(s) Template -->        <ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}">            <Border                Name="Border"                Background="{StaticResource BgBrush1}"                BorderBrush="{StaticResource BorderBrush1}"                BorderThickness="0,1,0,1"                CornerRadius="0" />        <!-- Other code identical to Left Button Template -->               </ControlTemplate>        <!-- Right Button Template -->        <ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}">            <Border                Name="Border"                Background="{StaticResource BgBrush1}"                BorderBrush="{StaticResource BorderBrush1}"                BorderThickness="1"                CornerRadius="0, 5, 5, 0" />        <!-- Other code identical to Left Button Template -->          </ControlTemplate>    </Grid.Resources>    <!-- Example Usage -->    <Grid Background="#555555">        <StackPanel Height="25" Orientation="Horizontal" Margin="5">            <RadioButton Content="All" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonLeft}"/>            <RadioButton Content="Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonMid}"/>            <RadioButton Content="Non Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonRight}"/>        </StackPanel>    </Grid></Grid>

You would have to add additional Triggers etc. for the IsPressed state, and any others required (e.g IsEnabled).