UWP自定義媒體控件不起作用

Question

下面是我的UWP應用媒體元素的XAML代碼，但它沒有提供自定義媒體控件，爲什麼？

 <MediaElement x:Name="Media" Grid.Row="1" AutoPlay="True" AreTransportControlsEnabled="True" > 
      <MediaElement.TransportControls> 
       <MediaTransportControls Background="#FFF5F509" Foreground="#FF0625EA"/> 
      </MediaElement.TransportControls> 

    </MediaElement> 

Answer 1

雖然MediaTransportControls有Background和Foreground屬性，但設置這些屬性不會影響MediaTransportControls外觀。因爲默認MediaTransportControls使用ThemeResource中定義的ColorBrush。

您可以在MediaTransportControls styles and templates找到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'> 

如果我們要使用MediaTransportControls的Background和Foreground屬性來定製媒體傳輸控制，我們需要設置爲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中，它不支持Setter.Value的Binding用法。所以你必須逐個設置{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屬性設置的顏色。