CODEWITHSUNDEEP
wpfsizegeometry
Kjell Derous
Kjell Derous

Reputation: 522

Sizing the radiobutton

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.

Upvotes: 27

Views: 26492

Answers (4)

Jindil
Jindil

Reputation: 155

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>

Upvotes: 0

Jemoka
Jemoka

Reputation: 284

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.)

Upvotes: 12

Mohsen Afshin
Mohsen Afshin

Reputation: 13436

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>

Upvotes: 2

Nitesh
Nitesh

Reputation: 7409

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.

Upvotes: 45

Related Questions