2011-08-31 22 views
6

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 . posible también necesito los botones de opción para estar en el centro de su columna y la filaIncrementando el tamaño del hit de un botón de opción

puedo obtener el aspecto que quiero añadiendo esto a cada columna de mi rejilla:.

<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 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 pastel en Winforms, estoy esperando que haya una solución simple en WPF.

¿Alguien puede ayudar?

Editar: El área naranja es el área activa predeterminada para el botón de opción, el área verde es el área activa que deseo. Hasta ahora esto está mirando imposible sin una gran cantidad de cableado personalizado

enter image description here

+0

¿Has probado propiedades de estiramiento? ¿Has intentado configurar propiedades en el botón de opción, como la alineación del contenido? ¿Su cuadrícula está dentro de algún tipo de panel (porque eso rompe el estiramiento)? ¿Has probado un borde en lugar de una etiqueta? –

+0

Hola Merlyn, sí, he intentado con las propiedades de estiramiento, he probado todas las propiedades posibles en el botón de opción (incluida la alineación del contenido). La grilla está directamente bajo mi control de usuario (que el control del usuario se está agregando a un panel de elementos, pero eso seguramente no podría ser un problema). Los bordes no permiten la alineación del contenido, lo que deja el botón de radio en la parte superior izquierda. –

+0

+1 en la pregunta ahora que tienes las capturas de pantalla. Esto hace que sea mucho más claro lo que estás buscando. –

Respuesta

10

Editar por imagen nueva en cuestión.

Si no te importa la tipificación adicional, puede utilizar 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 parece a:

enter image description here

(Obviamente, querrá usar el tercer método provisto)

Sé que esto no parece mucho, pero le da su resultado. Nuevamente, disculpe el tipeo extra y la falta de estándares de codificación utilizados.

Para esto, el sobrevuelo del mouse no dará el efecto visual, pero el hit-test es válido. Supongo que esto estará bien siempre y cuando esté en una tableta y no rastree los dedos.


Si sólo desea que el control sea de tamaño más grande que usted podría utilizar los métodos siguientes

Puede cambiar el tamaño de un control estableciendo la propiedad RenderTransform a un objeto ScaleTransform.

Cambiar el tamaño de todos los RadioButton objetos dentro de un contenedor(Ventana, Página, rejilla, etc.)

<Window.Resources> 
    <Style TargetType="RadioButton"> 
     <Setter Property="RenderTransform"> 
      <Setter.Value> 
       <ScaleTransform ScaleX="10" ScaleY="10"/> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

O todos con 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 cada vez mayor área activa (o simplemente mayor área activa de todos los controles de un tipo de conjunto), se puede utilizar:

<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 utilizar el comportamiento predeterminado del control dentro de otro recipiente, y el uso de la hélice HorizontalAlignment="Stretch" sin embargo, esto dibujará el control en la esquina superior izquierda, creo.

+0

@Justin - ... y no necesita la etiqueta. Use 'HorizontalAlignment =" Center "VerticalAlignment =" Center "' en RadioButton. Además, stukselbax bramido, tiene una gran y esencial información sobre 'GroupName'. – XAMeLi

+0

@XAMeLi Gracias, sé que no debería necesitar la etiqueta, es un truco, solo quería dar una idea de lo que estoy buscando. No lo consideré una solución aceptable, ya que tendría que cablear mouseover y hacer clic en eventos. He sido desviado por algo más atm. Volveré pronto –

+0

Con respecto a esta respuesta, aunque es muy útil saber en un sentido general, no es lo que busco. Quiero que el cuadro de golpe en el botón de radio sea más grande, no quiero un botón de radio más grande.Gracias por la sugerencia, aunque –

1

GroupName propiedad de RadioButton debe ayudar. Establecerlo en cada RadioButton lo mismo, gl & hf!

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

cada grupo funcionará como se esperaba. solo se controlará un RadioButton en grupo.

+0

Gracias sukselbax, esto es muy útil para conocer e incluso podría ser una solución parcial, pero lo que realmente quiero es aumentar el espacio en blanco alrededor del círculo del botón de radio. En Winforms simplemente apago autosize, centro la 'casilla de verificación' y conecto todo. Solo necesito un WPF equivalente –

1

[Sólo estoy añadiendo a las soluciones de grasa y stukselbax]

Parece que tendrá que cambiar el 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 ensamblaje 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> 
Cuestiones relacionadas