Пользовательские элементы управления мультимедиа UWP не работают

Хотя MediaTransportControls имеет свойства Background и Foreground, установка этих свойств не повлияет на внешний вид MediaTransportControls. Поскольку по умолчанию MediaTransportControls использует ColorBrush, определенный в ThemeResource.

Вы можете найти шаблон MediaTransportControls в стили и шаблоны MediaTransportControls или в generic.xaml (типично для C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic) выполните поиск "MediaTransportControls".

Сформировав его шаблон, мы можем обнаружить, что его Background и Foreground установлены на некоторые ThemeResource, такие как:

<Grid x:Name='ControlPanelGrid'
            Background='{ThemeResource SystemControlBackgroundChromeMediumBrush}'
            VerticalAlignment='Bottom'
            RenderTransformOrigin='0.5,0.5'>

Если мы хотим использовать свойства Background и Foreground MediaTransportControls для настройки управления транспортом мультимедиа, нам нужно установить Background или Foreground в {TemplateBinding Foreground}. Для некоторых свойств, таких как Background, это может быть легко. Вам просто нужно найти Grid с именем «ControlPanelGrid» и изменить его Background следующим образом:

<Grid x:Name='ControlPanelGrid'
            Background='{TemplateBinding Background}'
            VerticalAlignment='Bottom'
            RenderTransformOrigin='0.5,0.5'>

Но для такого свойства, как Foreground, это сложно. Потому что Foreground определено во многих сабвуферах Style, и они имеют разное значение в разных стилях. А в WinRT он не поддерживает использование Binding для Setter.Value. Таким образом, вы должны установить {TemplateBinding Foreground} один за другим. Здесь я использую AppBarButton в <CommandBar.PrimaryCommands>, например:

<AppBarButton x:Name="StopButton"
              Foreground="{TemplateBinding Foreground}"
              Icon="Stop"
              MediaTransportControlsHelper.DropoutOrder="1"
              Style="{StaticResource AppBarButtonStyle}"
              Visibility="Collapsed" />
<AppBarButton x:Name="RewindButton"
              Foreground="{TemplateBinding Foreground}"
              MediaTransportControlsHelper.DropoutOrder="2"
              Style="{StaticResource AppBarButtonStyle}"
              Visibility="Collapsed">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xEB9E;" />
    </AppBarButton.Icon>
</AppBarButton>
...

После этого вы можете поместить этот стиль в <Application.Resources> и присвоить этому style x:key как <Style x:Key="MyMediaTransportControlsStyle" TargetType="MediaTransportControls">. Затем вы можете использовать этот новый стиль в MediaTransportControls:

<MediaElement x:Name="mediaElement"
              Margin="5"
              HorizontalAlignment="Stretch"
              AreTransportControlsEnabled="True"
              AutoPlay="False">
    <MediaElement.TransportControls>
        <MediaTransportControls Background="Red" Foreground="White" Style="{StaticResource MyMediaTransportControlsStyle}" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" />
    </MediaElement.TransportControls>
</MediaElement>

MediaTransportControls будет использовать цвет, который вы установили в свойствах Background и Foreground.