WPF圖像命令綁定

Question

我將WPF應用程序放在一起，其中我有一個圖像控件，我想將自定義命令對象綁定到我的視圖模型，該圖像將在點擊圖像時執行。我已經暴露了我的視圖模型中的命令對象，只需要將它綁定到圖像控件。

是否可以將此命令對象綁定到圖像控件？如果是的話，任何意見將不勝感激。

Answer 1

你需要把一個按鈕圖像，按鈕綁定到命令：

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

如果你不想標準按鈕鍍鉻，只是改變了按鈕的模板，像即：

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

請注意，您還需要更改其他屬性來覆蓋默認的按鈕樣式，否則上面的模板將使用默認的按鈕，背景和邊框：

<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

它可以是簡單的，以避免使用按鈕和使用Hyperlink代替：

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

注意，這將使使用默認的文飾的超級鏈接，所以你要添加的風格，刪除了 - 把這個在包含元素的資源字典就可以了：從@Robert Rossney答案

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

Answer 3

簡體版：

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

包含圖片的最好方法是使用{StaticResource x}，看到WPF image resources

Answer 4

這裏是另一個解決方案，我個人喜歡用大部分的時間，如果我想用命令的圖像，而不在其他控件括起來。

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

我設置其屬性Hand和Tooltip，使其更清楚，這是一個動作，而不是靜態圖像。