Связывание команд изображения 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>

Если вам не нужна стандартная кнопка Chrome, просто измените шаблон кнопки следующим образом:

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

Лучший способ добавить изображение - это использовать {StaticResource x}, см. Ресурсы WPF для изображений

Answer 5

сбросить шаблон управления кнопки и использовать изображение в шаблоне управления ..

 <Button Width="100" Height="100" Command="{Binding SampleCommand}">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image Stretch="Uniform" Source="Images/tick.png"></Image>
                </ControlTemplate>
            </Button.Template>
        </Button>