Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the 'right' way to resize a SymbolIcon?

Tags:

uwp

uwp-xaml

I want to be able to define a style and set the style on the icon (or on the button that holds the icon).

Setting the button h/w doesn't enlarge the symbol and adding a Viewbox works, but I can't figure out how to set that from a style.

<Button x:Name="ZoomInButton" Style="{ThemeResource HeaderButtonStyle}" Grid.Column="1" Grid.Row="0" Click="ZoomInButton_Click">
   <SymbolIcon Symbol="ZoomIn" />
</Button>

Any help very much appreciated! Seems so easy, but I'm stumped!

like image 725
DeannaD Avatar asked Jul 16 '16 02:07

DeannaD


1 Answers

In UWP apps, the standard glyphs are provided by the Segoe MDL2 Assets font, you can directly use a TextBlock with FontFamily="Segoe MDL2 Assets", so you can change the icon's size by setting the FontSize of the TextBlock.

For example here:

<Button x:Name="ZoomInButton" Style="{ThemeResource HeaderButtonStyle}" Grid.Column="1" Grid.Row="0" Click="ZoomInButton_Click">
   <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE8A3;" FontSize="30" />
</Button>

For more info about this font, you can refer to Guidelines for Segoe MDL2 icons.

like image 66
Grace Feng Avatar answered Oct 31 '22 09:10

Grace Feng