.net - una - Aumentando el tamaño del hit de un botón de radio
la descarga de solidos suspendidos desde una mina de fosfato (3)
He estado usando Windows Forms durante años, pero soy relativamente nuevo en WPF. Tengo una serie de botones de opción sin etiquetas (las etiquetas están en la parte superior de la columna, ¡no te preocupes!) Este programa se ejecutará en una tableta, por lo que quiero que el área de acceso para los botones de opción sea tan grande como sea posible. También necesito que los botones de radio estén en el centro de su columna y fila.
Puedo obtener el aspecto que quiero agregando esto a cada columna de mi grilla:
<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>
Lo cual solo centra un botón de opción dentro de una etiqueta que llena la sección de la cuadrícula.
Obviamente, el comportamiento es incorrecto (los eventos no se transfieren, puede seleccionar múltiples botones de radio en la misma fila, etc.).
Esto sería torta en Winforms, espero que haya una solución simple en WPF.
¿Alguien puede ayudar?
Editar: el área naranja es el área de golpe predeterminada para el botón de radio, el área verde es el área de golpe que quiero. Hasta ahora, esto parece imposible sin una gran cantidad de cableado personalizado
[Estoy agregando las soluciones de graso y stukselbax]
Parece que necesitarás cambiar la Template de RadioButton. Bellow es un estilo predeterminado de Aero (Win7) con una plantilla modificada, vea el comentario en el código. Para que el código funcione, agregue este espacio de nombres: xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" y asegúrese de hacer referencia al ensamblado 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''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>
GroupName propiedad GroupName de RadioButton debería ayudar. Establecer en cada RadioButton lo mismo, gl y hf!
<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup2">
<RadioButton GroupName="MyGroup2">
<RadioButton GroupName="MyGroup3">
cada grupo funcionará como se espera. solo se controlará un RadioButton en grupo.
Editar por nueva imagen en cuestión.
Si no te importa el tipeo extra, puedes usar esto:
<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>
Esto funciona como se esperaba en mi pequeña aplicación de prueba de:
<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>
Que se ve así:
(Obviamente, querrá usar el tercer método provisto)
Sé que esto no parece mucho, pero te da tu resultado. Nuevamente, disculpe el tipeo extra y la falta de estándares de codificación utilizados.
Para esto, el cursor sobre el mouse no dará el efecto visual, pero la prueba de golpe es válida. Supongo que esto estará bien siempre y cuando esté en una tableta y no rastree los dedos.
Si solo desea que el control sea de mayor tamaño, puede usar los siguientes métodos
Puede cambiar el tamaño de un control estableciendo la propiedad RenderTransform en un objeto ScaleTransform .
Cambiar el tamaño de todos los objetos RadioButton dentro de un contenedor (Ventana, Página, Cuadrícula, etc.)
<Window.Resources>
<Style TargetType="RadioButton">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="10" ScaleY="10"/>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
O todo con la llave
<Style TargetType="RadioButton" x:Key="resizeRadioButton">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="10" ScaleY="10"/>
</Setter.Value>
</Setter>
</Style>
Uso:
<RadioButton Style="{StaticResource resizeRadioButton}" />
O individualmente
<RadioButton>
<RadioButton.RenderTransform>
<ScaleTransform ScaleX="10" ScaleY="10"/>
</RadioButton.RenderTransform>
</RadioButton>
Sin embargo, si desea utilizar una combinación de control más grande y área de impacto más grande (o un área de impacto más grande para todos los controles de un tipo de conjunto), puede usar:
<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>
O simplemente use el comportamiento predeterminado del control dentro de otro contenedor y use la propiedad HorizontalAlignment="Stretch" ; sin embargo, esto dibujará el control en la esquina superior izquierda, creo.