Increasing the size of the switch beats

Question

I have been using Windows Forms for many years, but I'm relatively new to WPF. I have several switches without labels (the labels are at the top of the column, do not worry about them! This program will run on the tablet, so I want to make the hit area for the switches as large as possible. I also need the switches located in the center of their column and lines.

I can get the look that I want by adding this to every 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> 

What exactly centers the radio button inside the label, which fills the grid section.
Obviously, the behavior is all wrong, although (events do not go through, you can select several radio objects on the same line, etc.).

It will be a cake in Winforms, I hope there is a simple solution in WPF.

Does anyone help?

Edit: the orange area is the default hit area for the switch, the green area is the hit area I want. While this is not possible without a large selection of wiring

Answer 1

Edit for each new image.

If you do not mind 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 application:

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

What does it look like:

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

I know this doesn't seem like much, but it gives you its result. Again, sorry for the extra typing and lack of coding standards.

To do this, hovering the mouse will not give a visual effect, but the hit test is valid. I assume that this will be normal while it is on the tablet and you will not track your fingers.

---

If you want the control to be larger, you can use the following methods

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

Resize all RadioButton objects in the 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 a key

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

Using:

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

Or individually

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

---

If you want to use a combination of a larger control and a larger hit area (or just a large hit area for all controls of the 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 simply use the default control behavior in another container and use the HorizontalAlignment="Stretch" property, however this will cause the control to be in the upper left corner.

Answer 2

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

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

each group will work properly. Only one RadioButton per group will be checked.

Answer 3

[I just add solutions for bold and stukselbax]

It seems you need to change the Template RadioButton. Bellow is the default Aero (Win7) style with a redesigned template, see Comment in Code. To make the code work, add this namespace: xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" and make sure that you are referencing the assembly PresentationFramework.Aero.dll .

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