Increasing the hit size of a radio button

Question

I've been using Windows Forms for years, but I'm relatively new to WPF. I have a number of radio buttons without labels (the labels are at the top of the column, don't worry about them! This program is going to run on a tablet so I want to make the hit area for the radio buttons as large as possible. I also need the radio buttons to be in the center of their column and row.

I can get the look I want by adding this to each column of my grid:

<Label Name="connectedLabel" Grid.Column="2" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
    <RadioButton x:FieldModifier="private" Name="connectedRadioButton" Grid.Column="2" Checked="otherRadioButton_CheckedChanged" Unchecked="otherRadioButton_CheckedChanged"></RadioButton>
</Label>

Which just centers a radio button within a label that fills the grid section.
Obviously the behaviour is all wrong though (events don't pass through, you can select multiple radiobuttons on the same row, etc.).

This would be cake in Winforms, I'm hoping there's a simple solution in WPF.

Can anybody help?

Edit: The orange area is the default hit area for the radio button, the green area is the hit area I want. So far this is looking impossible without a lot of custom wiring

Answer 1

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.

Answer 2

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.