2010-03-27 20 views
46

Tengo un control simple Button que contiene un objeto Image como contenido. Quiero establecer la opacidad Image en 0.5 cuando el Button está deshabilitado para proporcionar una entrada visual adicional en cuanto al estado Button.'Graying Out' una imagen de botón WPF?

¿Cuál es la forma más sencilla de lograr ese resultado en XAML? Gracias por tu ayuda.

+0

No se pudo hacer este trabajo. Esto funcionó para mí: http://stackoverflow.com/questions/4532943/icommand-canexecute-can-not-disable-button-with-image-content/11126571#11126571 – aeinstein

Respuesta

128

Use un disparador en el estilo de Imagen. (Sería más natural ponerlo en el estilo de Botón, pero el estilo de Botón no puede afectar fácilmente a la Imagen por razones técnicas molestas. Se puede hacer en ControlTemplate del Botón, pero eso es demasiado para lo que quiere aquí).

<Button> 
    <Image Source="something.png"> 
    <Image.Style> 
     <Style TargetType="Image"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Opacity" Value="0.5" /> 
      </Trigger> 
     </Style.Triggers> 
     </Style> 
    </Image.Style> 
    </Image> 
</Button> 

Nota estamos tomando ventaja en este caso el hecho de que la imagen se desactiva cuando el botón está desactivado, por lo que puede desencadenar directamente en propiedad IsEnabled de la imagen. En otros casos, la propiedad Button que queremos activar puede no ser heredada por la imagen; en ese caso, necesitaríamos usar un DataTrigger con FindAncestor RelativeSource para enlazar al botón que lo contiene.

+1

Gran respuesta! Aceptado y +1 de mi parte. –

+0

Solución mágica :). Me gusta eso. – LukTar

16

Aquí es un estilo más genérica se puede aplicar:

<Style TargetType="Button"> 
    <Style.Resources> 
     <Style TargetType="Image"> 
      <Style.Triggers> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter Property="Opacity" Value="0.5" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Style.Resources> 
</Style> 
+1

Tenga en cuenta que esto solo funciona si la imagen es un elemento secundario directo del botón. En mi caso, el contenido del botón está envuelto por un StackPanel y no funcionó. –

+0

@JonePolvora gracias por aclarar. Estaba confundido por qué no me beneficié de esta publicación hasta que vi tu publicación. –

31

Si quieres algo más genérico, puso esto en su sección de recursos para su ventana o control de usuario.

<UserControl.Resources>  
    <Style x:Key="ImageEnabled" TargetType="Image"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Opacity" Value="0.25"></Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</UserControl.Resources> 

Y en el botón real a hacer esto

<Button> 
    <Image Source="{StaticResource LinkImage}" Style="{StaticResource ImageEnabled}"/> 
</Button>