带有单击事件的 WPF 图像控件 [英] WPF Image Control with Click Event

问题描述

我希望在我的 WPF 应用程序中使用响应鼠标点击的 .只有 'Mouse Up' 和 'Moue Down' 事件是开箱即用的.我觉得这很特别.有没有办法扩展控件或者使用其他控件来达到同样的效果?

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?

推荐答案

为了扩展 Shawn Mclean 的回答，WPF 的一项重要功能是能够利用控件的行为，同时完全改变该控件的外观.如果您想创建一个行为就像按钮一样的图像(完成单击事件、命令绑定、默认按钮分配等)，您可以将图像放置在按钮控件中并重新设置该按钮的样式以删除按钮chrome".这将为您提供具有您想要的外观的按钮的漂亮 API.您可以重用这种风格，如果您有命令绑定到新的图像按钮，这种方法将减少在您的代码中创建事件处理程序的需要.

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.

创建这样的样式非常容易.只需在资源中创建一个具有命名键的新样式资源，并将此资源分配给按钮的 Style 属性.这是我拼凑的一个例子:

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>

这篇关于带有单击事件的 WPF 图像控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！