Question

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

如何使用WPF完成此操作？我已尝试在图像上放置一个按钮，但我没有得到所需的结果。

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

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

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

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

Answer 2

由于您需要部分图片可点击，我建议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>

Answer 3

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

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

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

单击事件到图像WPF的一部分

3 个答案: