c# - 如何使我的按钮网格适合 WPF-XAML 中的六边形图像

Question

我的按钮有一个六边形图像，如图所示。我想从角边缘移除点击，并且只在点击图片时被点击。我尝试了一些解决方案，我的可点击网格总是方形的，这就是为什么我的按钮点击区域比我的图片大。

<ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="LayoutGrid"
                          SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter"
                                          Focusable="True"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Margin="0"
                                          IsHitTestVisible="True"
                                          ToolTip="Button">
                            <ContentPresenter.Content>
                                <Image Source="/WpfApp3;component/Images/hexagonImage.png"
                                       Stretch="None" />
                            </ContentPresenter.Content>
                        </ContentPresenter>
                        <Label Content="Label"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Margin="60,130,60,51"
                               Width="180"
                               Height="40"
                               HorizontalContentAlignment="Center"
                               RenderTransformOrigin="0.428,-0.075"
                               FontSize="18"
                               FontFamily="Arial Narrow"
                               IsHitTestVisible="False" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted"
                                 Value="true" />
                        <Trigger Property="IsMouseOver"
                                 Value="true" />
                        <Trigger Property="IsPressed"
                                 Value="true" />
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="TextElement.Foreground"
                                    TargetName="contentPresenter"
                                    Value="{StaticResource Button.Disabled.Foreground}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

Answer 1

这是我已经完成的答案，以防将来有人需要类似的东西。1.首先，我已经使 customControl 派生自 Button。在里面我有 2 个 DependencyProperties 只是为了在点击时改变图像。

public ImageSource Image
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }
       public static readonly DependencyProperty ImageProperty =
            DependencyProperty.Register("Image", typeof(ImageSource), typeof(CustomControl), 
                new FrameworkPropertyMetadata(default(ImageSource), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

        public ImageSource NewImage
        {
            get { return (ImageSource)GetValue(NewImageProperty); }
            set { SetValue(NewImageProperty, value); }
        }

        // Using a DependencyProperty as the backing store for NewImage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty NewImageProperty =
            DependencyProperty.Register("NewImage", typeof(ImageSource), typeof(CustomControl),
                 new FrameworkPropertyMetadata(default(ImageSource), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

在 Generic.xaml 内部，我有这样的结构化代码(这适用于我和我的项目)。

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:wpf.core">


<Style TargetType="{x:Type local:CustomControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Width="{Binding ActualWidth, ElementName=image}"
                      Height="{Binding ActualHeight, ElementName=image}">

                    <Image x:Name="image"
                           IsHitTestVisible="False"
                           Stretch="None"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Setter Property="Source"
                                        Value="{Binding Image, RelativeSource={RelativeSource TemplatedParent}}" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
                                                 Value="true">
                                        <Setter Property="Source"
                                                Value="{Binding NewImage, RelativeSource={RelativeSource TemplatedParent}}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content}"
                                      ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                      Height="48"
                                      IsHitTestVisible="False"
                                      Margin="38.667,0,38,46.666"
                                      VerticalAlignment="Bottom"
                                      HorizontalAlignment="Center"
                                      MaxHeight="48"
                                      MaxWidth="188" />
                    <Path Data="M2,88.60254L152,2 302,88.60254 302,261.817621 152,350.410161 2,261.807621z"
                          RenderTransformOrigin="0.5,0.5"
                          Stretch="Fill"
                          Fill="Transparent"
                          Focusable="True"
                          StrokeThickness="0"
                          Margin="25.333,-24.001,25.333,-23.999"
                          VerticalAlignment="Stretch"
                          Opacity="0">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform />
                                <SkewTransform />
                                <RotateTransform Angle="90" />
                                <TranslateTransform />
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed"
                             Value="true">
                        <Setter Property="Foreground"
                                Value="White" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

诀窍是制作与我的图片完全相同的路径(六边形)，并将该路径设置为可点击但透明，并将图片设置为可见但不可点击，这解决了我的问题，现在我的功能齐全了六角按钮。

主窗口中的代码示例，仅用于说明目的。

    <Grid>
    <cc:CustomControl Image="/WpfApp3;component/Images/hexPicture1.png"
                      NewImage="/WpfApp3;component/Images/hexPicture2.png"
                      ToolTip="Button"
                      Content="Some content"
                      FontFamily="Arial narrow"
                      FontSize="18"/>
</Grid>