如何在 XAML 中增加 SymbolIcon 的大小？答案

【问题标题】：How to increase the size of a SymbolIcon in XAML?如何在 XAML 中增加 SymbolIcon 的大小？
【发布时间】：2014-08-05 23:22:46
【问题描述】：

我有一个按钮，我想用它来启动视频播放，所以它应该看起来像一个“播放”按钮。该按钮在屏幕上会相当大。这是我目前所拥有的：

<Button Style="{StaticResource PlayButton}">
    <SymbolIcon Symbol="Play"/>                                
</Button>

PlayButton 资源定义了 200 像素的 MinHeight 和 MinWidth。这样做的问题是播放图标非常小，大约为 16px 左右。我怎样才能让它变大？我尝试在 Button 声明中设置 FontSize="200"，但没有任何区别。

【问题讨论】：

标签： wpf xaml windows-store-apps win-universal-app

【解决方案1】：

不确定这是否是最好的方法，但它对我有用，也可能对你有用：

<Button Style="{StaticResource PlayButton}">
    <Viewbox MaxHeight="200" MaxWidth="200">
        <SymbolIcon Symbol="Play"/>                                
    </Viewbox>
</Button>

【讨论】：

这在最新的 UWP 中很有效，我认为这是最好的方法。
效果很好。感谢分享！
@mike 我收到错误消息：SymbolIcon is not supported in WPF。您在WPF 中的建议有什么解决方法吗？

【解决方案2】：

您可以将TextBlock 与FontFamily="Segoe UI Symbol" Text="&#57602;" 一起使用，然后设置FontSize 即可。如果您查看 Symbol 值 - 您可以看到 57602 是 Play 符号枚举的值，它对应于“Segoe UI Symbol”中的字符代码。更典型的是，这些值是用它们的十六进制值写入的，如Text="&#xE102;"，但如果您查看该枚举的文档，则更容易找到十进制值。

【讨论】：

我发现同时设置 OpticalMarginAlignment="TrimSideBearings" 以消除字形两侧的空白空间非常有用，从而更容易在我的布局中对齐。
似乎这种方法与使用SymbolIcon 的一个区别是，在 Windows 10 系统上，它不会自动使用较新的 Segoe MDL2 Assets 字体。跨度>

【解决方案3】：

另一个简单的解决方案是使用 RenderTransform。例如

<AppBarButton Icon="Previous" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"  >
    <AppBarButton.RenderTransform>
          <CompositeTransform ScaleX="1.4" ScaleY="1.4"/>
    </AppBarButton.RenderTransform>
</AppBarButton>

【讨论】：

在运行 Phone 项目时，转换似乎没有应用于 AppBarButton。

【解决方案4】：

<Button.Content>
      <TextBlock Style="{StaticResource SymbolTextBlockStyle}"
                 Text="&#xE102;"/>
</Button.Content>

<Style x:Key="SymbolTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
    <Setter Property="FontSize" Value="16"/>
</Style>

您可以将图标作为文本块插入，并更改字体大小、颜色等

【讨论】：

希望它能解决问题，但请添加对代码的解释，以便用户完全理解他/她真正想要的。