WPF：使用 XAML 创建图像按钮仅单击不透明部分

Question

好的，伙计们，我正在尝试使用 .png 图像制作一个图像按钮，但我只需要使用 XAML 制作一个可点击的非透明部分。

我尝试了很多使用自定义图像类，但这些尝试都不适合我。

这是我正在使用的 png 图像的示例。

这是我在 xaml 中的图像按钮的示例代码。

<Style x:Key="Home1_Unlocked" TargetType="Button">
        <Setter Property="Width" Value="611"/>
        <Setter Property="Height" Value="541"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Margin" Value="100,50,0,0"/>
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Name="WholeButton" Background="Transparent">
                        <ui:MapObject x:Name="Home" Stretch="Uniform" Source="/Resources/Game/map/but1_dim.png">
                            <!--<ui:MapObject.RenderTransformOrigin>
                                <Point X="0.5" Y="0.5"/>
                            </ui:MapObject.RenderTransformOrigin>
                            <ui:MapObject.RenderTransform>
                                <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
                            </ui:MapObject.RenderTransform>-->
                        </ui:MapObject>
                        <Grid Margin="0,0,0,150" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                            <TextBlock Text="0 of 0 STARS" Style="{DynamicResource Riffic}" Margin="130,0,00,0" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="40">
                                <TextBlock.Effect>
                                    <DropShadowEffect Color="Black"/>
                                </TextBlock.Effect>
                            </TextBlock>
                            <Image Grid.Column="0" Source="/Resources/Game/map/wmapenable.png" HorizontalAlignment="Left" Margin="10,0,0,0" Stretch="None"/>
                            <Image Grid.Column="0" Source="/Resources/Game/map/big1.png" HorizontalAlignment="Left" Margin="40,0,0,0" Stretch="None"/>
                        </Grid>
                        <ContentPresenter Name="MyContentPresenter" Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Home" Property="Source" Value="/Resources/Game/map/but1.png"/>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter TargetName="WholeButton" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="1.01" ScaleY="1.01" />
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="WholeButton" Property="RenderTransformOrigin">
                                <Setter.Value>
                                    <Point X="0.5" Y="0.5"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是自定义图像类...

public class MapObject : Image
    {
        protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
        {
            var source = (BitmapSource)Source;

            // Get the pixel of the source that was hit
            var x = (int)(hitTestParameters.HitPoint.X / ActualWidth * source.PixelWidth);
            var y = (int)(hitTestParameters.HitPoint.Y / ActualHeight * source.PixelHeight);

            // Copy the single pixel into a new byte array representing RGBA
            var pixel = new byte[4];
            source.CopyPixels(new Int32Rect(x, y, 1, 1), pixel, 4, 0);

            // Check the alpha (transparency) of the pixel
            // - threshold can be adjusted from 0 to 255
            if (pixel[3] < 10)
                return null;

            return new PointHitTestResult(this, hitTestParameters.HitPoint);
        }
    }

有人可以帮我做这个吗？

Answer 1

有几件事我会调查：

• 确认检测到的像素是您认为的像素。看起来您知道 DPI 缩放，但即使这样也很容易遗漏某些东西（例如，倒置的 Y 轴、从 WPF 坐标到像素坐标的不正确映射......）。
• 是否还有其他东西也在处理鼠标点击。可能图片上的命中测试正常，但是后面的按钮还在处理透明区域的鼠标点击？
• 如果您不能让它在图像级别工作，您可以定义一个与图像覆盖相同区域的几何图形，并针对该几何图形进行命中测试。当然，如果您有很多图片，这可能不是一个合适的解决方案。
• 考虑 WPF 是否是适合这项工作的工具。 WPF 主要是一个用户界面框架。虽然您绝对可以使用它来制作较低级别的图形，但使用 Button 意味着默认情况下您最终会获得许多您可能不想要的 UI 功能：用户能够通过 Tab 选择按钮或使用键盘提交它，视觉亮点，低帧率（因为所有类型的事件都发生在你并不真正关心但使用宝贵资源的背景中）等。可能有一些更适合你想要做的事情的工具.我建议查看 Unity 或 MonoGame 之类的游戏框架，它们都可以与 C# 一起使用，并且会为您提供许多开箱即用的游戏特定功能，而无需 UI 框架带来的所有包袱用它。