Sizing the radiobutton

Question

I have some radiobuttons in an app that works with touch. Because the end-user can have thick fingers, I want to make the circle and text int he radiobutton bigger.

Problem is, I can only make the text bigger, not the circle in the radiobutton.

<RadioButton  VerticalAlignment="Center" x:Name="rbtnContainers" Click="SetContainers" FontSize="18">Containers</RadioButton>

Using height doesn't work either. It makes the radiobutton bigger, but the circle remains the same.

Any hint or answer is appreciated.

Storage

use it in viewbox and change its height – Filler

+1 for thinking about the thick fingers of the world! – Cheeseburger

Answer 1

This should work for you.

<Viewbox Height="40">
     <RadioButton></RadioButton>
</Viewbox>

another alternative is to write your own ControlTemplate for the RadioButton and change its appearance as you want.

Lozada

for whatever reason when I apply that, it messes up the radiobutton's alignment – Russom

Very Nice! its a quick and easy solution rather than make custom template – Costume

You will probably want to setHorizontalAlignment="Left", because the default alignment inside a viewbox is Center. – Bates

Answer 2

A more of a hack would be to try to simply transform the object with something like...

<RadioButton.RenderTransform>
    <CompositeTransform ScaleX="5" ScaleY="5"/>
</RadioButton.RenderTransform>

Just remember that ScaleX and ScaleY needs to be equal, otherwise the object will look stretched awkwardly

According to my own experimenting, the rendering of this is not at all messed up (e.g. no alignment issues, etc.)

Diacetylmorphine

THANK YOU! You've saved me a lot of time and frustration haha @Diacetylmorphine – Mendes

This is the best easy way. I had to downscale font size after this, but it does the job. The ViewBox solution had an awkward scaling inside when changing font size. – Cravens

Answer 3

To resize only the circle, one can use RadioButton template and change Width and Height of BulletChrome.

<ControlTemplate TargetType="RadioButton" x:Key="CustomRadioButtonStyle"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

        <BulletDecorator Background="#00FFFFFF">
            <BulletDecorator.Bullet>
                <mwt:BulletChrome Height="25" Width="25" Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" IsChecked="{TemplateBinding ToggleButton.IsChecked}" IsRound="True"  />
            </BulletDecorator.Bullet>
            <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
        </BulletDecorator>

        <ControlTemplate.Triggers>

            <Trigger Property="ContentControl.HasContent">

                <Setter Property="FrameworkElement.FocusVisualStyle">

                    <Setter.Value>

                        <Style TargetType="IFrameworkInputElement">

                            <Style.Resources>
                                <ResourceDictionary />
                            </Style.Resources>

                            <Setter Property="Control.Template">

                                <Setter.Value>

                                    <ControlTemplate>
                                        <Rectangle Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Margin="14,0,0,0" SnapsToDevicePixels="True" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>

                <Setter Property="Control.Padding">

                    <Setter.Value>
                        <Thickness>4,0,0,0</Thickness>
                    </Setter.Value>
                </Setter>

                <Trigger.Value>
                    <s:Boolean>True</s:Boolean>
                </Trigger.Value>
            </Trigger>

            <Trigger Property="UIElement.IsEnabled">

                <Setter Property="TextElement.Foreground">

                    <Setter.Value>
                        <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                    </Setter.Value>
                </Setter>

                <Trigger.Value>
                    <s:Boolean>False</s:Boolean>
                </Trigger.Value>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Souvaine

I'm getting >The name "BulletChrome" does not exist in the namespace "clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero". – Russom

that project needed a reference to PresentationFramework.Aero or any of the places that defines BulletChrome as defined in msdn.microsoft.com/en-us/library/… – Russom

Answer 4

After hours trying things I finally found a rather simple solution to increase the size of the button, without increasing the associated label.

1. In the document outline, right-click the radio control, Edit Template > Edit a copy

2. Give it a name and decide if you want to store it as an App (global) style or local (current window) style.

3. In the generated xaml code, edit the values minWidth, minHeight of the field Ellipse from the section below

4. Apply that style to your RadioButton

                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="radioButtonBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="markGrid" Margin="2">
                                <!-- HERE change minWidth/minHeight for the dimensions of the button -->
                                <Ellipse x:Name="optionMark" Fill="{StaticResource RadioButton.Static.Glyph}" MinWidth="20" MinHeight="20" Opacity="0"/>
                            </Grid>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
   

Bifoliate