WPF Image Command Binding

Question

Tôi đang đặt một ứng dụng WPF với nhau trong đó tôi có một điều khiển hình ảnh mà tôi muốn ràng buộc một đối tượng lệnh tùy chỉnh từ mô hình khung nhìn của tôi sẽ thực hiện khi hình ảnh được nhấp. Tôi đã tiếp xúc với đối tượng lệnh từ mô hình khung nhìn của tôi và chỉ cần gắn nó với điều khiển hình ảnh.

Có thể liên kết đối tượng lệnh này với điều khiển hình ảnh không? Nếu có thì lời khuyên sẽ được đánh giá cao.

Answer 1

Bạn cần phải đặt các hình ảnh trong một nút, và ràng buộc nút để lệnh:

<Button Command="{Binding MyCommand}"> 
    <Image Source="myImage.png" /> 
</Button> 

Nếu bạn không muốn nút chrome tiêu chuẩn, chỉ cần thay đổi mẫu của nút có cái gì đó như rằng:

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

Lưu ý rằng bạn cũng sẽ cần phải thay đổi các thuộc tính khác để ghi đè lên các nút mặc định phong cách, nếu không mẫu trên sẽ sử dụng nền nút mặc định và biên giới:

<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

Nó có thể được đơn giản để tránh sử dụng một nút và sử dụng một Hyperlink thay vì:

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

Lưu ý rằng điều này sẽ làm cho liên kết với các trang trí văn bản mặc định, vì vậy bạn sẽ muốn thêm một phong cách loại bỏ đó - đặt này trong từ điển tài nguyên của phần tử chứa sẽ làm các trick:

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

Answer 3

phiên bản đơn giản của câu trả lời từ @Robert Rossney:

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

Cách tốt nhất để bao gồm một hình ảnh là sử dụng một {StaticResource x}, xem WPF image resources

Answer 4

Dưới đây là thêm một giải pháp cá nhân tôi thích sử dụng hầu hết thời gian nếu tôi muốn một hình ảnh với lệnh mà không kèm theo nó trong kiểm soát khác.

<Image Source="Images/tick.png" Cursor="Hand" Tooltip="Applies filter"> 
    <Image.InputBindings> 
      <MouseBinding Gesture="LeftClick" Command="{Binding ApplyFilter, Mode=OneTime}" /> 
    </Image.InputBindings> 
</Image> 

tôi đặt thuộc tính của nó Hand và Tooltip để nó rõ ràng hơn rằng đó là một hành động và không phải là một hình ảnh tĩnh.