Как увеличить размер SymbolIcon в XAML?

У меня есть кнопка, которую я хочу использовать для запуска воспроизведения видео, поэтому она должна выглядеть как кнопка «Воспроизвести». Кнопка будет довольно большой на экране. Это то, что у меня есть до сих пор:

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

Ресурс PlayButton определяет MinHeight и MinWidth, равные 200px. Проблема в том, что значок воспроизведения очень маленький, порядка 16 пикселей или около того. Как я могу сделать его больше? Я попытался установить FontSize="200" в объявлении Button, но это не имеет значения.


wpf xaml win-universal-app windows-store-apps
person Mike    schedule 05.08.2014    source источник

Ответы (4)


arrow_upward
40
arrow_downward

Не уверен, что это лучший способ сделать это, но это сработало для меня и может сработать для вас:

<Button Style="{StaticResource PlayButton}">
    <Viewbox MaxHeight="200" MaxWidth="200">
        <SymbolIcon Symbol="Play"/>                                
    </Viewbox>
</Button>
person Mike    schedule 05.08.2014
comment
Это работает в последней версии UWP, я думаю, это лучший способ сделать это. - person peterincumbria; 07.12.2017
comment
Работал отлично. Спасибо, что поделился! - person Shimmy Weitzhandler; 21.10.2018
comment
@mike Я получаю сообщение об ошибке: SymbolIcon is not supported in WPF. Есть ли обходной путь для вашего предложения в WPF? - person nam; 08.01.2021

arrow_upward
10
arrow_downward

Вы можете использовать TextBlock с FontFamily="Segoe UI Symbol" Text="&#57602;", а затем установить FontSize. Если вы посмотрите на значения Symbol - вы можете видеть, что 57602 - это значение перечисления символов Play, которое соответствует коду символа в «Segoe UI Symbol». Чаще всего эти значения записываются с их шестнадцатеричными значениями, как в Text="&#xE102;", но десятичное число легче найти, если вы посмотрите документацию этого перечисления.

person Filip Skakun    schedule 06.08.2014
comment
Я счел полезным также установить OpticalMarginAlignment="TrimSideBearings", чтобы избавиться от пустого пространства по обе стороны от глифа, упрощая выравнивание в моем макете. - person Drew Noakes; 23.08.2015
comment
Похоже, что одно из отличий этого подхода от использования SymbolIcon заключается в том, что в системах Windows 10 он не будет автоматически использовать более новый шрифт Segoe MDL2 Assets. - person Drew Noakes; 24.08.2015

arrow_upward
6
arrow_downward

Другое простое решение — использовать 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>
person Andrei Schneider    schedule 28.12.2014
comment
Преобразование не применяется к AppBarButton при запуске проекта Phone. - person Mike; 08.01.2015

arrow_upward
0
arrow_downward 

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

Вы можете вставить значок в виде текстового блока и изменить размер шрифта, цвет и многое другое.

person Максим    schedule 26.05.2020
comment
Надеюсь, это решит проблему, но, пожалуйста, добавьте к нему объяснение вашего кода, чтобы пользователь получил полное представление о том, чего он действительно хочет. - person Jaimil Patel; 26.05.2020