在 C# Windows 应用商店应用中实现非矩形按钮答案

【问题标题】：Implementing non-rectangular buttons in C# Windows Store Apps在 C# Windows 应用商店应用中实现非矩形按钮
【发布时间】：2023-03-20 04:42:01
【问题描述】：

我需要在 Windows Store App 的电视遥控器中实现 4 个导航按钮（见下图）。由于它们不是矩形，因此我创建了 4 个相同大小的矩形按钮，通过将适当的图像放置在每个按钮的适当部分使按钮区域的其余部分保持透明来表示上/下/左/右。现在我将它们放在一起，创建下面的图像。问题是最上面的按钮将接受所有用户点击，即使点击是在透明区域中，并且应该由下方的按钮处理，该按钮在所选区域中具有图像。

有没有办法完成我需要的操作，以便在单击区域中具有图像的相应按钮将响应单击，而其他按钮的透明区域只会通过它？谢谢。

【问题讨论】：

你能分享一下你是 XAML 吗？
这里的所有按钮都是在代码中生成的，并使用所有 4 个非矩形按钮的相同坐标手动添加到 Canvas，如下所示： button.SetValue(Canvas.TopProperty, topcoordinate); button.SetValue(Canvas.LeftProperty, leftCoordinate);

标签： button bitmap windows-store-apps transparent

【解决方案1】：

不久前我们做了一个与您类似的多按钮控件。我们为奇形怪状的按钮创建了“路径”项，为圆形按钮创建了一个“椭圆”（这类似于您的顶部按钮）：

<Path x:Name="UpImageButton" Data="M148,156 L99,106 L115,90 L136,79 L159,69 L184,65 L200,63 L224,65 L248,71 L271,82 L288,94 L300,106 L252,157 L246.28,153.03999 L239,148 L223,141 L201,138 L176,139 L160,145 z" Height="95" Margin="98.5,62.5,99.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Style="{StaticResource UpImageButtonNormal}" PointerPressed="UpButton_Pressed" PointerReleased="UpButton_Released" PointerExited="UpButton_Released" />

然后是每个路径的“按下”和“正常”样式：

        <Style x:Key="UpImageButtonPress" TargetType="Path">
        <Setter Property="Stroke">
            <Setter.Value>
                <ImageBrush ImageSource="images/button_wheelnav_up_arrow_down.png" />
            </Setter.Value>
        </Setter>
        <Setter Property="Fill">
            <Setter.Value>
                <ImageBrush ImageSource="images/button_wheelnav_up_arrow_down.png" />
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="UpImageButtonNormal" TargetType="Path">
        <Setter Property="Stroke">
            <Setter.Value>
                <ImageBrush ImageSource="images/button_wheelnav_up_arrow_up.png" />
            </Setter.Value>
        </Setter>
        <Setter Property="Fill">
            <Setter.Value>
                <ImageBrush ImageSource="images/button_wheelnav_up_arrow_up.png" />
            </Setter.Value>
        </Setter>
    </Style>

然后在各种处理程序中可以根据需要切换样式：

    private void UpButton_Pressed(object sender, PointerRoutedEventArgs e)
    {
        UpImageButton.Style = this.Resources["UpImageButtonPress"] as Style;
        //command code goes here
    }

    private void UpButton_Released(object sender, PointerRoutedEventArgs e)
    {
        UpImageButton.Style = this.Resources["UpImageButtonNormal"] as Style;
    }

提示：要在设计器中正确创建 Path 对象，请将背景图像添加到包含所有按钮的网格中，以便在编辑路径时查看它们是否正确围绕奇形图像。它使它变得容易得多。然后，您可以在完成后删除背景图像。

【讨论】：

感谢代码示例。它看起来很有希望，但在我的情况下，所有按钮图像都是从远程服务器动态下载的，因此我不能使用设计器来创建路径。你知道如何在代码中创建路径吗？谢谢。