带有 Click 事件的 WPF 图像控件答案

【问题标题】：WPF Image Control with Click Event带有 Click 事件的 WPF 图像控件
【发布时间】：2010-11-11 04:33:13
【问题描述】：

我希望在我的 WPF 应用程序中使用 <Image> 来响应鼠标点击。只有“Mouse Up”和“Moue Down”事件开箱即用。我觉得这很特别。有没有办法扩展控件或使用另一个控件来产生相同的效果？

【问题讨论】：

按照stackoverflow.com/questions/2720463/…将图像放入按钮中
试试这个。

标签： wpf xaml

【解决方案1】：

为了扩展 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>

【讨论】：

【解决方案2】：

使用 MouseUp。无论如何，您都不能通过 Tab 浏览或专注于 Image 控件，因此这是单击它的唯一方法。

另一种选择是将图像放在按钮中并通过编辑控件模板删除所有样式，使其看起来只是一个图像。这样，您就可以使用键盘专注于它。

【讨论】：

不要使用 MouseUp 事件而不是 Click 事件 - 这样您的应用可能无法与残疾人无障碍工具一起使用。

【解决方案3】：

您可以使用一组 4 个处理程序和 2 个布尔变量：

布尔值：

被点击
已进入

处理程序：

OnMouseDown- 设置 IsClicked 为真；
OnMouseEntersets IsEntered true;
OnMouseLeave - 将 IsEntered 设置为 false；
OnMouseUp - if (IsClicked && IsEntered){ /TODO 你的逻辑/} 然后将 IsClicked 设置为 false；

这种结构实现了经典点击的功能。

【讨论】：

【解决方案4】：

另一种选择是将Image 包装在Hyperlink 中，如下所示：

 <TextBlock>
    <Hyperlink Command="{Binding VisitWebsiteCommand}"
               CommandParameter="http://www.google.com"
               Cursor="Hand"
               TextDecorations="{x:Null}">
        <Image Height="50"
               Source="{StaticResource YourImageResource}"
               Width="50" />
    </Hyperlink>
</TextBlock>

【讨论】：

【解决方案5】：

OnMouseLeave - 也将 isClicked 设置为 false；否则，您可以单击鼠标并释放鼠标。然后单击鼠标并释放鼠标，仍然会发生单击。

【讨论】：