Increasing the hit size of a radio button

Edit per new image in question.

If you don't mind the extra typing you can use this:

        <Style TargetType="RadioButton" x:Key="rb">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="RadioButton">                        <Grid>                            <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" />                            <Border Background="Transparent" />                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

This works as expected in my little test app of:

<Grid>    <Grid.Resources>        <Style TargetType="RadioButton" x:Key="rb">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="RadioButton">                        <Grid>                            <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" />                            <Border Background="Transparent" />                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>        <Style TargetType="ListBoxItem" x:Key="ics">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="ListBoxItem">                        <Grid ShowGridLines="True">                            <Grid.ColumnDefinitions>                                <ColumnDefinition />                                <ColumnDefinition />                                <ColumnDefinition />                                <ColumnDefinition />                            </Grid.ColumnDefinitions>                            <RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" />                            <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" />                            <RadioButton Style="{StaticResource rb}" Grid.Column="2" />                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>    </Grid.Resources>    <ListBox ItemContainerStyle="{StaticResource ics}">        <ListBoxItem>1</ListBoxItem>    </ListBox></Grid>

Which looks like:

(Obviously you will want to use the third method provided)

I know this doesn't look like much, but it gives you your result. Again, excuse the extra typing and the lack of coding standards used.

For this, the mouse hover-over won't give the visual effect, but the hit-test is valid. I assume this will be OK so long as this will be on a tablet and you don't track fingers.

If you just want the control to be of larger size you could use the following methods

You can resize a control by setting the RenderTransform property to a ScaleTransform object.

Resize all RadioButton objects within a container (Window, Page, Grid etc)

<Window.Resources>    <Style TargetType="RadioButton">        <Setter Property="RenderTransform">            <Setter.Value>                <ScaleTransform ScaleX="10" ScaleY="10"/>            </Setter.Value>        </Setter>    </Style></Window.Resources>

Or all with key

    <Style TargetType="RadioButton" x:Key="resizeRadioButton">        <Setter Property="RenderTransform">            <Setter.Value>                <ScaleTransform ScaleX="10" ScaleY="10"/>            </Setter.Value>        </Setter>    </Style>

Usage:

<RadioButton Style="{StaticResource resizeRadioButton}" />

Or individually

<RadioButton>    <RadioButton.RenderTransform>        <ScaleTransform ScaleX="10" ScaleY="10"/>    </RadioButton.RenderTransform></RadioButton>

If however you want to use a combination of larger control and larger hit area (or just larger hit area for all controls of a set type), you can use:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Style TargetType="RadioButton">        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />        <Setter Property="HorizontalAlignment" Value="Center" />        <Setter Property="VerticalAlignment" Value="Center" />        <Setter Property="RenderTransform">            <Setter.Value>                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>            </Setter.Value>        </Setter>       <Setter Property="Content">           <Setter.Value>               <Border>                   <Rectangle Margin="-10" Fill="Transparent" />               </Border           </Setter.Value>       </Setter>    </Style></ResourceDictionary>

Or just use the default behaviour of the control inside another container, and use the HorizontalAlignment="Stretch" property, this will however draw the control in the upper-left corner I believe.

GroupName property of RadioButton should help. Set it in each RadioButton the same, gl & hf!

<RadioButton GroupName="MyGroup1"><RadioButton GroupName="MyGroup1"><RadioButton GroupName="MyGroup1"><RadioButton GroupName="MyGroup2"><RadioButton GroupName="MyGroup2"><RadioButton GroupName="MyGroup3">

each group will work as expected. only one RadioButton in group will be checked.

[I'm just adding upon the solutions of fatty and stukselbax]

It seems that you'll need to change the Template of the RadioButton. Bellow is a default Aero (Win7) style with a modified template, see the comment in the code. For the code to work, add this namespace: xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" and make sure you reference the PresentationFramework.Aero.dll assembly.

<Style x:Key="CheckRadioFocusVisual">    <Setter Property="Control.Template">        <Setter.Value>            <ControlTemplate>                <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>            </ControlTemplate>        </Setter.Value>    </Setter></Style><Style TargetType="{x:Type RadioButton}">    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>    <Setter Property="Background" Value="#F4F4F4"/>    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>    <Setter Property="BorderThickness" Value="1"/>    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="{x:Type RadioButton}">                <BulletDecorator Background="Transparent">                    <BulletDecorator.Bullet>                        <Grid>                            <!--This is where you decide about the size of the hit area, the Border bellow has to be transparent and it's acting as the hit area. The Width and Height on the BulletChrome is a modification to bring the size of the bullet back to original size (or close to it)-->                            <Border Background="Transparent" Width="50" Height="50"/>                            <Microsoft_Windows_Themes:BulletChrome Width="20" Height="20" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>                        </Grid>                    </BulletDecorator.Bullet>                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                </BulletDecorator>                <ControlTemplate.Triggers>                    <Trigger Property="HasContent" Value="true">                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>                        <Setter Property="Padding" Value="4,0,0,0"/>                    </Trigger>                    <Trigger Property="IsEnabled" Value="false">                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>                    </Trigger>                </ControlTemplate.Triggers>            </ControlTemplate>        </Setter.Value>    </Setter></Style>