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

Question

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

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

PlayButton资源定义了一个最小高度和最小宽度为200px。问题在于，播放图标非常小，大约只有16px左右。我该如何使它变大？我尝试在按钮声明中设置FontSize="200"，但没有任何效果。

- Mike

Answer 1

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

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

- Mike

---

这在最新的UWP中非常有效，我认为这是实现此目的的最佳方式。 - 27k1

工作得很好。谢谢分享！ - Shimmy Weitzhandler

@mike，我遇到了错误：“SymbolIcon在WPF中不受支持”。你的建议在WPF中有没有任何解决方法？ - nam

Answer 2

您可以使用TextBlock，并设置FontFamily="Segoe UI Symbol" Text=""，然后设置FontSize即可。如果查看Symbol值-您会发现57602是Play符号枚举的值，对应于"Segoe UI Symbol"中的字符代码。更常见的是将这些值写成十六进制值，例如：Text=""，但是如果您查看该枚举文档，使用十进制表示更容易找到。

- Filip Skakun

---

我发现将 OpticalMarginAlignment="TrimSideBearings" 也设置为有用的，以消除字形两侧的空白空间，使其更容易在我的布局中对齐。 - Drew Noakes

这种方法与使用 SymbolIcon 的区别似乎在于，在 Windows 10 系统上，它不会自动使用更新的 Segoe MDL2 Assets 字体。 - Drew Noakes

Answer 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>

- Andrei Schneider

---

当运行手机项目时，转换似乎未应用于AppBarButton。 - Mike

Answer 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>

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

- Максим

---

希望这可以解决问题，但请附上代码的解释，以便用户真正理解他/她想要的内容。 - Jaimil Patel