带有单击事件的WPF图像控件

带有单击事件的WPF图像控件,wpf,xaml,Wpf,Xaml,我希望在我的WPF应用程序中使用一个响应鼠标点击的。只有“鼠标向上”和“鼠标向下”事件可用。我觉得这很特别。是否有方法扩展控件或使用另一个控件来提供相同的效果?使用MouseUp。您无论如何都不能在图像控件上进行制表或聚焦,因此这是单击该控件的唯一方法 另一个选项是将图像放入按钮中,通过编辑控件模板删除所有样式,使其看起来像一个图像。这样,您就可以使用键盘专注于它。要扩展Shawn Mclean的答案,WPF的一个强大功能是能够利用控件的行为,同时完全改变该控件的外观。如果你想创建一个像按钮一样

我希望在我的WPF应用程序中使用一个响应鼠标点击的
。只有“鼠标向上”和“鼠标向下”事件可用。我觉得这很特别。是否有方法扩展控件或使用另一个控件来提供相同的效果?

使用MouseUp。您无论如何都不能在图像控件上进行制表或聚焦,因此这是单击该控件的唯一方法


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

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

创造这样一种风格是相当容易的。只需在资源中创建一个带有命名键的新样式资源,并将此资源分配给按钮的样式属性。下面是我举的一个例子:

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

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

布尔人:

  • 我居中
  • 处理程序:

  • OnMouseDown-集被选中为true
  • onMouseCenter-设置为“真”
  • OnMouseLeave-设置为以false为中心
  • OnMouseUp-if(IsClicked&&iscentered){/TODO-your-logic/},然后将IsClicked设置为false 此构造实现了经典单击的功能

  • OnMouseLeave-也设置为false; 否则,您可以单击鼠标并释放鼠标。然后单击鼠标并释放鼠标,仍然可以进行单击

  • 另一个选项是将
    图像
    包装在
    超链接中,如下所示:

     <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>
    
    
    
    按照将图像放入按钮中,然后重试此操作。不要使用MouseUp事件而不是Click事件-这样,您的应用程序可能无法与禁用的辅助功能工具一起使用。