は、どのように私のボタンのグリッドは、私が絵のように私のボタンの六角イメージを持っている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.rst私はButtonから派生したcustomControlを作成しました。そして、私は2つのDependencyPropertiesを持っています。

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>