如何在 xbox 上更改 AppBarButton 的 MediaPlayerElement 样式？

Question

如图所示，我想改变MediaPlayerElement的AppBarButton样式，像这样：

按钮大小，2x为最佳。
移除默认焦点显示边框。
将按钮更改为圆形，而不是矩形。
当按钮获得焦点时，更改它的背景颜色。

我听从了 https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls 的建议，但没有发现任何想法。

设置CornerRadius将结果

Answer 1

在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的默认样式代码量很大，我把默认样式here的代码放了（里面也包含了AppBarButtonRevealStyle的代码），大家可以修改根据您的需要。

更新

AppBarButton有自己的内部高度。如果需要特殊处理，必须先重写AppBarButton

的样式

AppBarButton的主要展示内容是一个Icon。在默认样式中，它位于 ViewBox 中。我们可以根据需要改写它的高度。

可以找到修改后的代码here

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

你终于可以得到这个效果了：

此致。

如何在 xbox 上更改 AppBarButton 的 MediaPlayerElement 样式？

How to change AppBarButton's style of MediaPlayerElement on xbox?

xaml

media-player

uwp