2009-06-02 13 views
11

Estoy desarrollando una aplicación de Silverlight y me gustaría crear una agrupación de 5 botones de alternar (utilizados para las opciones de menú) que se animan al hacer clic (aumentar de tamaño) y también hacer clic en los botones del grupo para desmarcar y animar a su tamaño reducido.Silverlight Agrupación de botones de palanca

Sé que podría utilizar un enfoque de fuerza bruta donde la aplicación está directamente al tanto de cada botón, pero si agrego o cambio el menú (agregar/eliminar un botón) tendré que acordarme de modificar el código (que es malo ya que soy olvidadizo). ¿Hay alguna manera de agrupar los botones de manera más inteligente para que cuando se hace clic en uno pueda indicar a todos los demás en el grupo que se desactive?

Gracias! Todd

Respuesta

7

Grito especial a Michael S. Scherotter por señalarme en la dirección correcta para usar RadioButton y una plantilla de control.

Aquí está la plantilla básica de control que se me ocurrió. Pon esto en la aplicación.xaml entre las etiquetas si quieres verlo. La gente de UX le dará una vez más para que quede bien, pero por ahora, funciona como un botón de opción que parece un botón para alternar (o simplemente un botón), pero tiene un nombre de grupo.

Una nota importante: esta plantilla no tiene ninguna de las animaciones básicas del botón, por lo que no presionará al hacer clic ... Ese es el trabajo UX que mencioné anteriormente.

<Style x:Key="MenuButton" TargetType="RadioButton"> 
     <Setter Property="Width" Value="100"/> 
     <Setter Property="Height" Value="25"/> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Border BorderBrush="DarkGray" BorderThickness="3" CornerRadius="3" Background="Gray"> 
         <!-- The ContentPresenter tags are used to insert on the button face for reuse --> 
         <ContentPresenter></ContentPresenter> 
        </Border> 
       </ControlTemplate> 

      </Setter.Value> 
     </Setter> 
    </Style> 
3

Otorgue a todos los objetos RadioButton el mismo nombre de grupo.

+0

Los botones de alternancia que estoy usando tienen imágenes y texto, por lo que no puedo usar los botones de opción ni los grupos asociados. –

+0

Puede diseñar el botón de opción para que se vea como lo desee. –

+2

Tendrá que modificar la plantilla de control para el botón de opción para hacer esto. –

4

Estaba tratando de hacer lo mismo y encontré esta publicación anterior. Permítanme actualizarlo un poco ...

Todd parece ser como muchos otros programadores perezosos, dejando que los chicos de UX hagan todo el trabajo. :) Así que aquí está la solución de Todd con botones de conmutación reales como botones de opción de un grupo:

<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="One" 
      IsChecked="True" /> 
<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="Two" />  
<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="Three" /> 

<Style x:Key="MenuButton" TargetType="RadioButton"> 
    <Setter Property="Width" Value="100"/> 
    <Setter Property="Height" Value="25"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="RadioButton"> 
       <Border BorderBrush="DarkGray" BorderThickness="3" CornerRadius="3" Background="Gray"> 
        <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"> 
         <ToggleButton.Content>     
          <ContentPresenter></ContentPresenter> 
         </ToggleButton.Content> 
        </ToggleButton>        
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Y ahora vas a tener sus efectos de renovación de botón bonitos y todo eso y sólo un botón de activación será capaz de ser " verificado 'a la vez.

Ambos botones de radio y botones de alternar pueden tener tres estados, y también puede enlazar la propiedad 'IsThreeState' del botón de alternar de la misma manera que yo ato 'IsChecked' aquí. Pero por defecto son dos estados.

Además, el enlace de forma larga es importante aquí ya que el atajo {TemplateBinding IsChecked} se establecería de manera predeterminada y necesitamos que estén sincronizados en ambos sentidos.

Este ejemplo, por supuesto, no anima los botones con el cambio de tamaño y todo lo que Todd publicó originalmente, pero sí le proporciona botones regulares que puede distinguir fácilmente como marcados o no.

+0

mientras esto funciona, se pierde el comportamiento del botón de radio que una vez que se presiona un botón de radio en un grupo, el grupo ya no puede tener CERO botones seleccionados (al menos uno ...) – Pingi