WPF-Image-Befehlsbindung

Question

Ich stelle eine WPF-Anwendung zusammen, in der ich ein Bildsteuerelement habe, an das ich ein benutzerdefiniertes Befehlsobjekt aus meinem Ansichtsmodell binden möchte, das beim Klicken auf das Bild ausgeführt wird. Ich habe das Befehlsobjekt aus meinem Ansichtsmodell bereitgestellt und muss es nur an das Bildsteuerelement binden.

Ist es möglich, dieses Befehlsobjekt an ein Bildsteuerelement zu binden? Wenn ja, würde jeder Ratschlag geschätzt werden.

Answer 1

Sie müssen das Bild in einer Schaltfläche setzen, und binden Sie die Taste mit dem Befehl:

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

Wenn Sie nicht die Standard-Schaltfläche Chrom wollen, nur die Vorlage der mit etwas Schaltfläche ändern wie dass:

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

Beachten Sie, dass Sie auch die Standard-Schaltfläche Stil außer Kraft setzen müssen andere Eigenschaften ändern, ansonsten über die Vorlage die Standardschaltfläche Hintergrund und den Rahmen verwenden:

<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

Es kann einfacher sein, einen Knopf zu vermeiden und verwendet einen Hyperlink statt:

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

Hinweis, dass dies auf den Hyperlink mit der Standardtext Dekoration machen, so dass Sie einen Stil hinzufügen wollen, entfernt, dass - das im Ressourcenverzeichnis des enthaltenden Elements setzt den Trick:

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

Answer 3

vereinfachte Version von Antwort von @ Robert Rossney:

Der beste Weg, um ein Bild aufzunehmen ist ein {StaticResource x} Verwendung finden WPF image resources

Answer 4

Hier ist noch eine andere Lösung, die ich persönlich liebe die meiste Zeit zu verwenden, wenn ich ein Bild mit dem Befehl möchten, ohne es in einem anderen Steuerelement umschließt.

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

Ich habe seine Eigenschaften Hand und Tooltip, so dass es klar ist, dass es eine Handlung und kein statisches Bild ist.