Как изменить стиль AppParButton MediaPlayerElement на xbox? - PullRequest
Новая
       35

Как изменить стиль AppParButton MediaPlayerElement на xbox?

0 голосов
/ 14 января 2020

enter image description here

Как показано на рисунке, я хочу изменить стиль AppBarButton MediaPlayerElement, что-то вроде:

  1. Размер кнопки, 2x - лучший.

  2. Удаление границы по умолчанию для отображения фокуса.

  3. Измените кнопку на круг, а не прямоугольник.

  4. Когда кнопка находится в фокусе, измените ее цвет фона.

Я последовал совету https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls, но не нашел понятия.

Установка CornerRadius приведет к

enter image description here

1 Ответ

1 голос
/ 14 января 2020

В стиле по умолчанию MediaTransportControls есть такой фрагмент: 

<!-- New AppBar button style 48x48 pixels in size -->
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
    <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>

Если вы хотите круглую кнопку, вы можете изменить ее следующим образом: 

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="40" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
    <Setter Property="CornerRadius" Value="20" />
</Style>

Если вам нужно изменить больше стилей, вам нужно создать копию стиля AppBarButton для настройки.

Поскольку код стиля по умолчанию MediaTransportControls очень большой, я поместил код стиля по умолчанию здесь (который также включает в себя код AppBarButtonRevealStyle), вы можете изменить его в соответствии со своими потребностями.

Обновить

AppBarButton имеет собственную внутреннюю высоту. Если требуется специальная обработка, вы должны сначала переписать стиль AppBarButton

Основным содержимым дисплея AppBarButton является Icon. В стиле по умолчанию он находится в ViewBox. Мы можем переписать его высоту в соответствии с нашими потребностями.

Вы можете найти измененный код здесь 

<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Viewbox x:Name="ContentViewbox"
    Height="25"
             VerticalAlignment="Center"
    Margin="0"
    HorizontalAlignment="Stretch"
    AutomationProperties.AccessibilityView="Raw" >
        <ContentPresenter x:Name="Content"
        Content="{TemplateBinding Icon}"
        Foreground="{TemplateBinding Foreground}"/>
    </Viewbox>
    ...
</Grid>

После изменения кода AppBarButton нам также нужно изменить некоторые стили MediaTransportControls

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="80" />
    <Setter Property="Height" Value="80" />
    <Setter Property="CornerRadius" Value="40" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>

<!-- New CommandBar Style -->
<Style x:Key="CommandBarStyle" TargetType="CommandBar">
    <Setter Property="Height" Value="90" />
    <Setter Property="Background" Value="Transparent" />
</Style>

Вы можете наконец получить этот эффект:

Imgur

С уважением.

...