WPF图像控制与点击事件

I wish to use an <Image> in my WPF Application which responds to mouse clicks. Only the 'Mouse Up' and 'Moue Down' events are available out of the box. I find this rather particular. Is there a way to extend the control or a way to use another control to give the same effect?

我希望在我的WPF应用程序中使用，它响应鼠标单击。只有“鼠标向上”和“鼠标向下”的事件可以从框中得到。我觉得这很特别。有没有一种方法可以扩展控制或者使用另一种控制来产生同样的效果?

4 个解决方案

#1

To expand on Shawn Mclean's answer, one of the great capabilities of WPF is the ability to leverage the behavior of a control while completely changing the look of that control. If you want to create an image that behavior just like a button (complete with click events, command binding, default button assignment, etc.) you can place an image in a button control and restyle that button to remove the button "chrome". This will give you the nice API of a button with the look you desire. You can reuse this style and this approach will reduce the need to create event handlers in your code behind if you have commands to bind to your new image buttons.

为了扩展Shawn Mclean的答案，WPF最大的功能之一是能够在完全改变控件外观的同时利用控件的行为。如果你想要创建一个像按钮一样的行为(点击事件，命令绑定，默认按钮分配等等)，你可以在按钮控件中放置一个图像，然后重新设置按钮来移除“chrome”按钮。这将给您一个漂亮的API按钮与外观，您希望。您可以重用这种样式，这种方法将减少在您的代码中创建事件处理程序的需求，如果您有命令来绑定到新的图像按钮。

Creating such a style is pretty easy. Simply create a new style resource with a named key in a resource and assign this resource to the Style property of your buttons. Here is an example I threw together:

创建这样的风格非常容易。只需在资源中使用命名键创建一个新的样式资源，并将该资源分配给按钮的样式属性。我举了一个例子:

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

#2

Use MouseUp. You cannot tab through or focus on the Image control anyways so thats the only way to click it.

使用MouseUp。你无论如何都不能通过标签或聚焦于图像控件，所以这是点击它的唯一方式。

Another option is to just put the image in a button and remove all styles by editing the control template so it seems like just an image. That way, you can focus on it using the keyboard.

另一种选择是将图像放入一个按钮中，并通过编辑控件模板来删除所有样式，这样看起来就像一个图像。这样，你就可以用键盘来关注它了。

#3

You can use a set of 4 handlers and 2 boolean variables:

您可以使用一组4个处理器和2个布尔变量:

booleans:

布尔值:

1. IsClicked
2. 那么回事
3. IsEntered
4. IsEntered

handlers:

处理程序:

1. OnMouseDown- sets IsClicked true;
2. OnMouseDown——集那么回事真实;
3. OnMouseEnter- sets IsEntered true;
4. OnMouseEnter——集IsEntered真实;
5. OnMouseLeave - sets IsEntered false;
6. OnMouseLeave - sets为false;
7. OnMouseUp - if (IsClicked && IsEntered){ /TODO your logic/} and then sets IsClicked false;
8. OnMouseUp - if (isclick && isenter){/TODO your logic/}，然后设置isclick false;

This construction implements the functionality of the classic click.

这个构造实现了经典单击的功能。

#4

3. OnMouseLeave - also set is isClicked to false; Otherwise you can click mouse away and release mouse. Then click mouse over and release mouse to still make a click happen.
4. OnMouseLeave -也设置为false;否则你可以点击鼠标离开并释放鼠标。然后点击鼠标，松开鼠标，继续点击。