WPF Image Command Binding

Я помещаю приложение WPF вместе, в котором у меня есть элемент управления изображением, с которым я хочу связать пользовательский объект команды с моей моделью просмотра, которая будет выполняться при щелчке изображения. Я выставил объект команды из моей модели представления и просто должен привязать ее к элементу управления изображением.

Можно ли связать этот объект команды с элементом управления изображением? Если да, то будут приняты какие-либо рекомендации.

Ответ 1

Вам нужно поместить изображение в кнопку и привязать кнопку к команде:

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

Ответ 2

Здесь еще одно решение, которое я лично люблю использовать большую часть времени, если я хочу изображение с командой, не заключая его в другой элемент управления.

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

Ответ 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>

Ответ 4

Упрощенная версия ответа от @Robert Rossney:

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

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