点击事件到图像 WPF 的一部分答案

【问题标题】：On click event to part of an image WPF点击事件到图像 WPF 的一部分
【发布时间】：2017-03-03 07:24:16
【问题描述】：

我有一张 iPhone 图片，我想在主页按钮上放置一个点击事件。

如何使用 WPF 完成此任务？我尝试在图像上放置一个按钮，但没有得到想要的结果。

您对图像使用什么类型的控件？

<Window.Background>
    <ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill">
    </ImageBrush>
</Window.Background>

【问题讨论】：

您对图像使用什么类型的控件？
@FiN:
WPF和iPhone有什么关系？
@LeiYang He 正在使用 iPhone 的图片。你能用其他类型的容器吗？网格，画布？
我的意思是，你为什么要谈论 iPhone 的图像，而不是 Android 的图像，或者一个男人然后点击他的头的图像等等？

标签： c# wpf xaml mvvm

【解决方案1】：

您可以将图像放在合适的面板中，例如Canvas 或Grid，并使用不可见的按钮作为覆盖。

在资源中：

<Style x:Key="InvisibleButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent" BorderBrush="Red" BorderThickness="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法：

<Grid Width="150" Height="150">
    <ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill"/>
    <Button x:Name="TopLeft" Margin="0,0,100,100" Click="TopLeft_Click" Style="{StaticResource InvisibleButtonStyle}"/>
    <Button x:Name="TopRight" HorizontalAlignment="Right" Click="TopRight_Click" Margin="0,0,0,100" Width="100" Style="{StaticResource InvisibleButtonStyle}"/>
    <Button x:Name="BottomLeft" VerticalAlignment="Bottom" Click="BottomLeft_Click" Margin="0,0,100,0" Height="100" Style="{StaticResource InvisibleButtonStyle}"/>
    <Button x:Name="BottomRight" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="BottomRight_Click" Margin="0,0,0,0" Width="100" Height="100" Style="{StaticResource InvisibleButtonStyle}"/>
</Grid>

请注意，我在透明按钮上添加了一个红色边框，以突出显示可点击区域，实际上它只是透明背景。

【讨论】：

现在我遇到的问题是，由于主窗口上的画布，我的用户控件的内容现在被隐藏了。您对此有什么建议吗？
@John 因为您没有在问题中提供您的组合（窗口和用户控件），所以我当然不知道出了什么问题。

【解决方案2】：

我通过以下方式实现了这一点：

<Canvas Height="30" VerticalAlignment="Top" Margin="0,394,0,0" Width="220">
            <Button Content="" Canvas.Left="102" Canvas.Top="6" Background="Transparent" Width="16" BorderBrush="Transparent" Cursor="Hand" >
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Border Background="{TemplateBinding Background}">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Transparent"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
</Canvas>

只需设置边距和画布左侧和顶部位置以覆盖可点击区域。

【讨论】：

【解决方案3】：

由于您需要图像的一部分可点击，我建议this 解决方案。

来自链接的 C/P...

<Canvas>
    <Image Source="background.png"/>
    <Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/>
    <Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/>
</Canvas>

【讨论】：