将一个圆形（圆圈）按钮居中放置

Question

我有一个圆形（圆圈）按钮，如下所示：

它由Ellipse组成（简化）：

<Ellipse Stretch="Uniform"/>

完整的按钮样式：

<Style x:Key="StatusButton" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource StatusButtonBackground}" />
    <Setter Property="Foreground" Value="{StaticResource StatusButtonForeground}" />
    <Setter Property="FontSize" Value="32" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/>
                    <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/>
                    <ContentPresenter HorizontalAlignment="Center"  
                                        VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="StatusButtonCircle" Property="Fill" Value="{StaticResource StatusButtonDisabledForeground}"/>
                        <Setter TargetName="StatusButtonCircleHighlight" Property="Stroke" Value="{StaticResource StatusButtonDisabledHighlight}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在网格中使用：

<Button Style="{StaticResource StatusButton}"
        Margin="50" Grid.Column="2" />

如何制作圆圈位于网格中心？

尝试将网格置于样式中心

所以我把风格改成了格式：

<Grid>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/>
        <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/>
    </Grid>
    <ContentPresenter HorizontalAlignment="Center"  
                        VerticalAlignment="Center"/>
</Grid>

现在看起来像这样：

    

Answer 1

您可以尝试添加保证金吗。

<Grid Margin="0,50,0,0">
    <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/>
    <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/>
</Grid>

并根据需要修改上边距...