How to make my button grid fit my hexagon image in WPF-XAML

Here is answer that i've done, in case someone will need something similar in future.
1.rst i have made customControl deriving from Button. And inside i have 2 DependencyProperties just to change Image on click.

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); }
            }

            public static readonly DependencyProperty NewImageProperty =
                DependencyProperty.Register("NewImage", typeof(ImageSource), typeof(CustomControl),
                     new FrameworkPropertyMetadata(default(ImageSource), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

Inside of Generic.xaml i havse structured code like this ( This works for me and my project).

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

Trick was to make path (Hexagon) that will be exactly same as my pictures, and set that path to be clickable but transparent, and picture to be visible but not clickable, and that solve my problem, now i have fully functional Hexagon button.

Sample of code in main window, just to show purpose.

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