web-dev-qa-db-fra.com

"Griser" une image de bouton WPF?

J'ai un simple contrôle Button qui contient un objet Image en tant que contenu. Je veux donc régler l'opacité Image à 0,5 lorsque la Button est désactivée pour fournir un repère visuel supplémentaire quant au statut Button. 

Quel est le moyen le plus simple d’atteindre ce résultat en XAML? Merci de votre aide.

wpfwpf-controls
50
David Veeneman

Utilisez un déclencheur dans le style d'image. (Il serait plus naturel de le mettre dans le style Button, mais le style Button ne peut pas affecter facilement l'image pour des raisons techniques gênantes. Il pourrait être fait dans le ControlTemplate du Button mais c’est exagéré pour ce que vous voulez ici.)

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

Notez que nous profitons ici du fait que l'image sera désactivée lorsque le bouton est désactivé. Nous pouvons donc déclencher directement sur la propriété IsEnabled de l'image. Dans d'autres cas, la propriété Button sur laquelle vous souhaitez déclencher peut ne pas être héritée par l'image; dans ce cas, nous aurions besoin d'utiliser un DataTrigger avec FindAncestor RelativeSource pour établir une liaison avec le bouton contenant.

153
itowlson

Si vous voulez quelque chose de plus générique, mettez ceci dans la section ressources de votre fenêtre ou de UserControl. 

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

Et dans le bouton actuel, il suffit de le faire

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

Voici un style plus générique que vous pouvez appliquer:

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

Si vous voulez que le bouton entier soit grisé, le style du bouton lui-même a fonctionné pour moi. Il semble griser tout le contenu des boutons. 

                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Opacity" Value=".75"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
0
voluntier