Creating Button using GeometryDrawing WPF

Question

Hi I am trying to create a Button with a semi arc form something like this:

I am using xaml and Control templates, it works fine but, the button recives the click event even if i click in any part into the rectangle form by the geometry, it launch the click event, I want the event to be catch only inside the geomtry... here is the xaml

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
    <Grid>
       <Image>
        <Image.Source>
                   <DrawingImage>
                  <DrawingImage.Drawing>
            <GeometryDrawing x:Name="X"Geometry= "M 0,0 
                A .8,.8 180 1 1 0,4
                L 0,3
                A .6,.6 180 1 0 0,1
                L 0,0">
                <GeometryDrawing.Pen>
                <Pen Brush="Black" Thickness=".1" />
                </GeometryDrawing.Pen>
                <GeometryDrawing.Brush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Offset="0" Color="Blue"/>
                  <GradientStop Offset="1" Color="Red"/>
                </LinearGradientBrush>
                </GeometryDrawing.Brush>
            </GeometryDrawing>
              </DrawingImage.Drawing>
                 </DrawingImage>
              </Image.Source>
               </Image>
               <Viewbox>
            <ContentControl Margin="20" Content="{TemplateBinding Content}"/>
        </Viewbox>
    </Grid>
</ControlTemplate>

...

<Button Template="{StaticResource ButtonTemplate}" Click="Button_Click" HorizontalAlignment="Right">OK</Button>

Thanks for any Comments

Answer 1

Instead of using an Image, which will have rectangular bounds that are used for hit testing, you can use a Path element with your Geometry data. The Path will only do hit testing on the area defined by the outline. Whatever text or other content is set will also be clickable unless you set IsHitTestVisible="false" on the ContentPresenter.

<Button Content="OK">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Path Data="M 0,0 
        A .8,.8 180 1 1 0,4
        L 0,3
        A .6,.6 180 1 0 0,1
        L 0,0" Stroke="Black" StrokeThickness="1" Stretch="Uniform">
                    <Path.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0" Color="Blue"/>
                            <GradientStop Offset="1" Color="Red"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Viewbox>
                    <ContentPresenter Margin="20" />
                </Viewbox>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>