首页 文章

UWP自定义媒体控件无法正常工作

提问于
浏览 次
0

下面是我的UWP app媒体元素的XAML代码，但它不提供自定义媒体控件，为什么呢？

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

     </MediaElement>
xaml custom-controls mediaelement uwp

1 回答

  • 5

    虽然 MediaTransportControls 具有 Background 和 Foreground 属性，但设置这些属性不会影响 MediaTransportControls 的外观 . 因为默认情况下MediaTransportControls使用 ThemeResource 中定义的 ColorBrush .

    您可以在MediaTransportControls styles and templates或 generic.xaml （典型地在 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic ）中找到 MediaTransportControls 的模板，搜索"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 ，它可能很容易 . 您只需找到名为"ControlPanelGrid"的 Grid 并更改其 Background 如下：

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

    但对于像 Foreground 这样的属性来说，这很复杂 . 因为 Foreground 在很多子 Style 中定义，并且它们在不同的样式中具有不同的值 . 在WinRT中，它不支持Setter.Value的绑定用法 . 所以你必须逐个设置 {TemplateBinding Foreground} . 这里我在 <CommandBar.PrimaryCommands> 中使用 AppBarButton 例如：

    <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 a 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 属性中设置的颜色 .

    enter image description here

    回复于

相关问题