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

【问题标题】：How to add Text under a MahApps MetroCircleButtonStyle icon?如何在 MahApps MetroCircleButtonStyle 图标下添加文本？
【发布时间】：2013-08-18 13:27:49
【问题描述】：

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

我的问题是如何在浮出控件中的这些图标下方添加文本？

史蒂夫

【问题讨论】：

标签： wpf xaml button mahapps.metro

【解决方案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 本身不能容纳椭圆外的文本。 Template 几乎是一个网格，其中有 1 个单元格和 3 个子节点（Ellipse，另一个 Ellipse，最上面的是 ContentPresenter）。内部的文本实际上也不会响应任何状态更改，因此使用此样式的外部文本与使用 TextBlock 将 Button 包装成 StackPanel 一样好。

您要查找的内容，可以使用AppBarButton。请注意文档状态，Due to issues with this control, AppBarButton is due to be removed for v1.0，因此将其用作示例并使用类似的Style 构建您自己的控件。如果您的Button 大小是固定的，可能会放弃ViewBox。

【讨论】：

感谢您的快速回复，这不是我想要的。需要圆圈下方的文本而不是圆圈内的文本。我只是认为 MahApps 可能已经以某种方式允许这种格式的某些属性？
@Orgbrat 检查我的更新。您可以从过时的AppBarButton 中获取您需要的提示并自行派生。我已经为该控件的Style 提供了指向 GitPage 的链接。检查您是否可以解决您的问题。
@Orgbrat 你有没有对此有所了解？

【解决方案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>

【讨论】：