WPF图像命令绑定

Question

我正在将WPF应用程序放在一起,其中我有一个图像控件,我想将自定义命令对象绑定到我的视图模型,该模型将在单击图像时执行.我已经从我的视图模型中公开了命令对象,只需要将它绑定到图像控件.

是否可以将此命令对象绑定到图像控件？如果有的话,任何建议将不胜感激.

Answer 1

这是我个人喜欢在大多数时间使用的另一种解决方案,如果我想要一个带有命令的图像而不将其封闭在另一个控件中.

<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因此它更清楚它是一个动作而不是一个静态图像.

Answer 2

您需要将图像放在一个按钮中,并将按钮绑定到命令:

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

避免使用按钮并使用Hyperlink替代方法可能更简单:

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

请注意,这将使用默认文本修饰呈现超链接,因此您需要添加一个删除它的样式 - 将其放入包含元素的资源字典中将会起到作用:

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

Answer 4

@Robert Rossney的简化版答案:

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

包含图像的最佳方法是使用a {StaticResource x},查看WPF图像资源