2010-11-11 141 views
35

我希望在我的WPF應用程序中使用<Image>響應鼠標點擊。開箱即可使用'Mouse Up'和'Moue Down'事件。我覺得這很特別。有沒有辦法擴展控件或使用其他控件來產生相同的效果?WPF圖像控制與點擊事件

+2

把圖像放在一個按鈕,按照http://stackoverflow.com/questions/2720463/creating-a-clickable-image-in-wpf – LosManos 2012-12-27 22:19:25

+0

試試這個。 VivekDev 2016-05-21 11:29:37

回答

67

爲了擴展Shawn Mclean的回答,WPF的一個很棒的功能是能夠在完全改變控件的外觀的同時充分利用控件的行爲。如果你想創建一個圖像,其行爲就像一個按鈕(完成點擊事件,命令綁定,默認按鈕分配等),你可以在一個按鈕控件中放置一個圖像,然後重新啓動該按鈕以刪除按鈕「chrome」。這將給你一個按鈕的漂亮的API與你想要的外觀。您可以重複使用這種風格,如果您有命令綁定到新圖像按鈕,則此方法將減少在您的代碼中創建事件處理程序的需要。

創建這樣的風格很簡單。只需在資源中使用命名鍵創建一個新的樣式資源,並將此資源分配給按鈕的Style屬性。這裏是我扔在一起的例子:

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="ButtonStyleTestApp.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 

<Window.Resources> 
    <Style x:Key="NoChromeButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers>       
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#ADADAD"/> 
          <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Grid x:Name="LayoutRoot" Background="#FF44494D"> 
    <Button Style="{DynamicResource NoChromeButton}" Click="ButtonClicked" > 
     <Image Source="Desert.png" Stretch="None"/> 
    </Button> 
</Grid> 
</Window> 
29

使用MouseUp。無論如何,您無法瀏覽或關注Image控件,因此只能點擊它。

另一種選擇是隻將圖像放入按鈕中,並通過編輯控制模板來刪除所有樣式,使其看起來像只是一個圖像。這樣,你可以使用鍵盤專注於它。

+6

Focusable =「True」 – clamchoda 2011-02-17 22:36:31

+1

+1 for MouseUp。 – Rahul 2013-07-03 07:04:05

+3

請勿使用MouseUp事件而不是Click事件 - 這樣,您的應用可能無法與禁用的輔助工具配合使用。 – 2016-02-24 17:48:39

1

您可以使用一組4個處理器和2個布爾變量:

布爾:

  1. IsClicked
  2. IsEntered

處理程序:

  1. OnMouseDown-設置IsClicked爲true;
  2. OnMouseEnter- sets IsEntered true;
  3. OnMouseLeave - 設置IsEntered爲false;
  4. OnMouseUp - 如果(IsClicked & & IsEntered){/ TODO您的邏輯 /},然後套IsClicked假;

該構造實現了經典點擊的功能。

-1
  1. OnMouseLeave - 也設置isClicked爲false; 否則,您可以點擊鼠標並釋放鼠標。然後點擊鼠標懸停並釋放鼠標仍然會發生點擊。