代码之家  ›  专栏  ›  技术社区  ›  David

WPF图像命令绑定

wpf
  •  18
  • David  · 技术社区  · 16 年前

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

    是否可以将此命令对象绑定到图像控件?如果是这样的话,我们将不胜感激。

    5 回复  |  直到 8 年前
        1
  •  18
  •   Thomas Levesque    16 年前

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

    <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
  •  23
  •   Ondrej Janacek    11 年前

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

    <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
  •  12
  •   user1069816 Syed Maruf    11 年前

    避免使用按钮和 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
  •  6
  •   Community Mohan Dere    9 年前

    来自@robert rossney的简化版答案:

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

    包含图像的最佳方法是使用 {StaticResource x} 见 WPF image resources

        5
  •  0
  •   zamoldar    8 年前

    重置按钮的控件模板并使用控件模板中的图像。

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