WPF Image Command Binding

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> 

Обратите внимание, что это сделает гиперссылку с текстом по умолчанию украшение на, так что вы хотите, чтобы добавить стиль, удаляет это - положить это в словаре ресурсов вмещающего элемента будет делать трюк:

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

Answer 3

упрощенный вариант ответа от @Robert Rossney:

<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, так что это более ясно, что это действие, а не статическое изображение.