如何在MahApps MetroCircleButtonStyle图标下添加文本？

Question

我在WPF应用程序中使用MahApps Metro控件，并在窗口底部使用FlyOut控件。我正在使用他们的MetroCircleButtonStyle按钮：

    <Button Width="55"
        Height="55"
        VerticalAlignment="Top"
        Style="{DynamicResource MetroCircleButtonStyle}">
  <Rectangle Width="20"
              Height="20">
    <Rectangle.Fill>
      <VisualBrush Stretch="Fill"
                    Visual="{StaticResource appbar_city}" />
    </Rectangle.Fill>
  </Rectangle>  
</Button>

我的问题是如何在弹出窗口中的这些图标下方添加文字？

史蒂夫

Answer 1

类似的东西：

<Button Width="55"
        Height="55"
        VerticalAlignment="Top"
        Style="{DynamicResource MetroCircleButtonStyle}">
  <StackPanel Orientation="Vertical">
    <Rectangle Width="20"
                Height="20">
      <Rectangle.Fill>
        <VisualBrush Stretch="Fill"
                      Visual="{StaticResource appbar_city}" />
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="Hello" />
  </StackPanel>
</Button>

<强>更新

MetroCircleButtonStyle本身不适用于Ellipse之外的Text。它是Template几乎是一个网格，其中包含1个单元格和3个子项（Ellipse，另一个Ellipse，最顶层是ContentPresenter）。内部文本实际上也不会响应任何状态更改，因此，使用此样式外部的文本与包含Button的文本TextBlock包裹StackPanel一样好。

您在寻找什么，可以使用AppBarButton。请注意文档状态Due to issues with this control, AppBarButton is due to be removed for v1.0，因此请将其用作示例，并使用类似的Style构建您自己的控件。如果您的ViewBox尺寸已修复，则可能会放弃Button。

Answer 2

从Viv's回答，您可以在文本框元素上添加边距以推送标签：

<Button Width="55"
        Height="55"
        VerticalAlignment="Top"
        Style="{DynamicResource MetroCircleButtonStyle}">
  <StackPanel Orientation="Vertical">
    <Rectangle Width="20"
                Height="20">
      <Rectangle.Fill>
        <VisualBrush Stretch="Fill"
                      Visual="{StaticResource appbar_city}" />
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="Hello" Margin="0, 20, 0, 0" />
  </StackPanel>
</Button>