Liaison de commandes d'image WPF

Question

Je mets ensemble une application WPF dans laquelle j'ai un contrôle d'image auquel je veux lier un objet de commande personnalisé à partir de mon modèle de vue qui sera exécuté lorsque l'image est cliquée. J'ai exposé l'objet de commande à partir de mon modèle de vue et j'ai juste besoin de le lier au contrôle d'image.

Est-il possible de lier cet objet de commande à un contrôle d'image? Si oui, tout conseil serait apprécié.

Answer 1

Vous devez mettre l'image dans un bouton, et lier le bouton à la commande:

<Button Command="{Binding MyCommand}"> 
    <Image Source="myImage.png" /> 
</Button> 

Si vous ne voulez pas que le bouton standard chrome, il suffit de changer le modèle du bouton avec quelque chose comme que:

<ControlTemplate x:Key="tplFlatButton" TargetType="{x:Type Button}"> 
    <Border Width="{TemplateBinding Width}" 
      Height="{TemplateBinding Height}" 
      Background="{TemplateBinding Background}" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}"> 
     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          TextElement.Foreground="{TemplateBinding Foreground}" 
          TextElement.FontFamily="{TemplateBinding FontFamily}" 
          TextElement.FontSize="{TemplateBinding FontSize}" 
          TextElement.FontStretch="{TemplateBinding FontStretch}" 
          TextElement.FontWeight="{TemplateBinding FontWeight}"/> 
    </Border> 
</ControlTemplate> 

Notez que vous devrez également modifier d'autres propriétés pour remplacer le style de bouton par défaut, sinon le modèle ci-dessus va utiliser l'arrière-plan par défaut du bouton et de la frontière:

<Style x:Key="stlFlatButton" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="{x:Null}" /> 
    <Setter Property="BorderBrush" Value="{x:Null}" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="Template" Value="{StaticResource tplFlatButton}" /> 
</Style> 

Answer 2

Il peut être plus simple d'éviter d'utiliser un bouton et utiliser un Hyperlink à la place:

<TextBlock DockPanel.Dock="Top"> 
    <Hyperlink Command="{Binding SomeCommand}"> 
     <Image Source="image.png" /> 
    </Hyperlink> 
</TextBlock> 

Notez que cela rend le lien avec la décoration de texte par défaut, de sorte que vous aurez envie d'ajouter un style supprime que - mettre cela dans le dictionnaire de ressources de l'élément contenant fera l'affaire:

<Style x:Key={x:Type Hyperlink}" TargetType="Hyperlink"> 
    <Setter Property="TextDecorations" 
      Value="{x:Null}" /> 
</Style> 

Answer 3

Version simplifiée de réponse de Rossney @ Robert:

<TextBlock> 
    <Hyperlink Command="{Binding SomeCommand}" TextDecorations="{x:Null}"> 
     <Image Source="{StaticResource image.png}" Width="16" /> 
    </Hyperlink> 
</TextBlock> 

La meilleure façon d'inclure une image est d'utiliser un {StaticResource x}, voir WPF image resources

Answer 4

est ici encore une autre solution que j'aime personnellement utiliser la plupart du temps si je veux une image avec la commande sans l'enfermer dans un autre contrôle.

<Image Source="Images/tick.png" Cursor="Hand" Tooltip="Applies filter"> 
    <Image.InputBindings> 
      <MouseBinding Gesture="LeftClick" Command="{Binding ApplyFilter, Mode=OneTime}" /> 
    </Image.InputBindings> 
</Image> 

I définir ses propriétés Hand et Tooltip afin qu'il soit plus clair que c'est une action et non une image statique.