如何在网格中添加多个自定义形状的按钮？

Question

I need to create 4 buttons in a circle.

Each blue button can be controlled separately:

I have made a ControlTemplate for the button using CombinedGeometry in.xaml & assigned this template to the button. The.xaml file for my code is given below:

<Window x:Class="WpfApp4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="450">
<Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Grid>
            <Path Name="Border" Stroke="Black" StrokeThickness="1" Stretch="Fill">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Exclude">
                        <CombinedGeometry.Geometry1 >
                            <CombinedGeometry GeometryCombineMode="Exclude">
                                <CombinedGeometry.Geometry1 >
                                    <CombinedGeometry GeometryCombineMode="Exclude">
                                        <CombinedGeometry.Geometry1 >
                                            <CombinedGeometry GeometryCombineMode="Exclude">
                                                <CombinedGeometry.Geometry1>
                                                    <EllipseGeometry Center="50 50" RadiusX="100" RadiusY="100"></EllipseGeometry>
                                                </CombinedGeometry.Geometry1>
                                                <CombinedGeometry.Geometry2>
                                                    <EllipseGeometry Center="50 50" RadiusX="60" RadiusY="60"></EllipseGeometry>
                                                </CombinedGeometry.Geometry2>
                                            </CombinedGeometry>
                                        </CombinedGeometry.Geometry1>
                                        <CombinedGeometry.Geometry2>
                                            <RectangleGeometry Rect="50,-50 40,200">
                                                <RectangleGeometry.Transform>
                                                    <RotateTransform Angle="45" CenterX="50" CenterY="50"/>
                                                </RectangleGeometry.Transform>
                                            </RectangleGeometry>
                                        </CombinedGeometry.Geometry2>

                                    </CombinedGeometry>
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <RectangleGeometry Rect="50,-50 40,200">
                                        <RectangleGeometry.Transform>
                                            <RotateTransform Angle="135" CenterX="50" CenterY="50"/>
                                        </RectangleGeometry.Transform>
                                    </RectangleGeometry>
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <RectangleGeometry Rect="-50,10 200,140">
                            </RectangleGeometry>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True" ></Rectangle>
            <Border>
                <ContentPresenter  Name="Content" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" TextBlock.Foreground="White"></ContentPresenter>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Fill" Value="DarkRed" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="-48,-75,48,75">
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="-97,176,97,-176">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="270"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="203,-25,-203,25">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="152,225,-152,-225">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="180"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Grid>
</Window>

Current Result:

I used CombinedGeometry and the specified margin to locate my buttons.

My question is, what container should I use to put these buttons together?

and how can I avoid the specified margin?

Edit:

Current result by bacon

I add a black arrow on original path.

I would like to make a trigger to change different color of these two paths at same time.

This is what I have now:

<ControlTemplate>
<Grid>

<Path><!-- original path --></Path>

<Path Stroke="Transparent" Width="100" Height="100">
    <Path.Data>
        <PathGeometry>
            <PathFigure IsClosed="True"  StartPoint="43,43">
                <LineSegment Point="57,57" />
                <LineSegment Point="60,40" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
    <Path.Style>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="Black"/>
        <!-- only change the color of arrow
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="#3B3B3B"/>
            </Trigger>
        </Style.Triggers>
        -->
    </Style>
    </Path.Style>
</Path>
</Gird>

<!-- change both paths with Opacity
<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Opacity" Value="0.5"/>
    </Trigger>
</ControlTemplate.Triggers>
-->

</ControlTemplate>

Answer 1

i recreated your example using rendertransformorgin, so things could be simplified, you can use a viewbox to include your buttons

edit: as explained in the comments to your post i created the button template as quater circle with the cut in the left and lower corner. and rotated the buttons in 90 degree increments to close the circle, and then rotated the whole circle by 45 degrees

i also added a mouseover so the button gets red, (i needed this to check, wether the mouseover registers for the whole enclosed rectangle, or just the shape -> mouseover only triggers on the shape)

the SharedSizeGroup makes the 2 by 2 grid i uses square and the viewbox scales the content to fit

<Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Path Name="Border" Stroke="Black" Width="100" Height="100">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10 10" >
                        <ArcSegment Point="90 90" Size="85 85" IsLargeArc="false" SweepDirection="Clockwise" />
                        <LineSegment Point="60 90" ></LineSegment>
                        <ArcSegment Point="10 40" Size="55 55" IsLargeArc="false" SweepDirection="Counterclockwise" />
                        <LineSegment Point="10 10" ></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                <Setter Property="Fill" Value="Green"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
    </ControlTemplate>
</Window.Resources>
<Grid Margin="10px">
    <Viewbox>
        <Grid RenderTransformOrigin="0.5,0.5" Grid.IsSharedSizeScope="True">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="45"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition SharedSizeGroup="A"/>
                <RowDefinition SharedSizeGroup="A"/>
            </Grid.RowDefinitions>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="270"/>
                </Button.RenderTransform>
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="180"/>
                </Button.RenderTransform>
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Button.RenderTransform>
            </Button>
        </Grid>
    </Viewbox>
</Grid>

EDIT: As you can see, with the trigger on the partent bosh shapes can change color

    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">

here is the full code:

    <Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Grid>

        <Path Name="Border" Stroke="Black" Width="100" Height="100">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10 10" >
                        <ArcSegment Point="90 90" Size="85 85" IsLargeArc="false" SweepDirection="Clockwise" />
                        <LineSegment Point="60 90" ></LineSegment>
                        <ArcSegment Point="10 40" Size="55 55" IsLargeArc="false" SweepDirection="Counterclockwise" />
                        <LineSegment Point="10 10" ></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                    <Setter Property="Fill" Value="Gray"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="LightGray"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
            <Path Stroke="Transparent" Width="100" Height="100">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True"  StartPoint="43,43">
                            <LineSegment Point="57,57" />
                            <LineSegment Point="60,40" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Setter Property="Fill" Value="Black"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="DimGray"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Grid>
    </ControlTemplate>
</Window.Resources>
<Grid Margin="10px">
    <Viewbox>
        <Grid>
            <Grid RenderTransformOrigin="0.5,0.5" Grid.IsSharedSizeScope="True">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="A"/>
                    <ColumnDefinition SharedSizeGroup="A"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition SharedSizeGroup="A"/>
                    <RowDefinition SharedSizeGroup="A"/>
                </Grid.RowDefinitions>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="270"/>
                    </Button.RenderTransform>
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="180"/>
                    </Button.RenderTransform>
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </Button.RenderTransform>
                </Button>
            </Grid>
            <TextBlock Background="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">Content</TextBlock>
        </Grid>
    </Viewbox>
</Grid>