Style of MediaElement in Windows 8.1

Question

How can I change style of sample MediaElement:

For example how can I change the background.

Code:

<MediaElement AudioCategory="BackgroundCapableMedia" x:Name="media" MediaEnded="Media_MediaEnded" AutoPlay="True" AreTransportControlsEnabled="True" IsMuted="False" Volume="0.5"/>

Answer 1

Actually you can change the colors by overriding the default colors in the App. Note this would apply now for all MediaElement controls with transport controls, but it is possible. In your App.xaml you would provide overrides for these values like this:

  <Application.Resources>
      <SolidColorBrush x:Key="MediaButtonForegroundThemeBrush" Color="Blue" />
      <SolidColorBrush x:Key="MediaButtonBackgroundThemeBrush" Color="Transparent" />
      <SolidColorBrush x:Key="MediaButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />
      <SolidColorBrush x:Key="MediaButtonPointerOverBackgroundThemeBrush" Color="#26FFFFFF" />
      <SolidColorBrush x:Key="MediaButtonPressedForegroundThemeBrush" Color="#FF000000" />
      <SolidColorBrush x:Key="MediaButtonPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
      <SolidColorBrush x:Key="MediaButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
      <SolidColorBrush x:Key="MediaControlPanelVideoThemeBrush" Color="Red" />
      <SolidColorBrush x:Key="MediaControlPanelAudioThemeBrush" Color="#FF000000" />
      <SolidColorBrush x:Key="MediaDownloadProgressIndicatorThemeBrush" Color="#38FFFFFF" />
      <SolidColorBrush x:Key="MediaErrorBackgroundThemeBrush" Color="#FF000000" />
      <SolidColorBrush x:Key="MediaTextThemeBrush" Color="#FFFFFFFF" />
  </Application.Resources>

This would give you a visual like this:

Hope this helps!

Answer 2

I think if you do not want to write your own controlpanel with play-pause-stop controls, you can not change the background of this MediaElement rendered controlpanel because it is an overlay of the video and is designed to look MS/Windows8 conform.

Note: This controlpanel is also invisible if you do not mouse-over the video.