MediaElement 在 MediaTransportControls UWP 中自定义“TimeRemainingElement”

Question

我已使用此解决方案 UWP custom media controls not working 更改了 MediaElement 的 MediaTransportControls 的背景和前景颜色

现在我想

• 改变'TimeRemainingElement'的位置，放到Slider的左边。

• 将时间显示为 00:00 而不是 0:00:00

有可能做到吗？知道怎么做吗？

• 还有 1 个问题：是否可以从 MediaTransportControls 中删除 “Cast to Device” 图标/选项？

Answer 1

是的，这是可能的。正如我在之前UWP custom media controls not working 的回答中提到的，我们可以编辑MediaTransportControls styles and templates 来实现您想要的。

改变'TimeRemainingElement'的位置，放到Slider的左边。

TimeRemainingElement 位于名为 "TimeTextGrid" 的 Grid 中，它位于名为 的 Grid 的第二行中MediaTransportControls_Timeline_Grid”。而名为 "ProgressSlider" 的 Slider 位于第一行。所以要把TimeRemainingElement放在滑块的左边，我们可以在第一行添加一个Grid，然后将TimeRemainingElement和ProgressSlider删除到新网格的不同列中：

<Grid x:Name="MyGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="TimeRemainingElement"
               Style="{StaticResource MediaTextBlockStyle}"
               Text="00:00" />
    <Slider x:Name="ProgressSlider"
            Grid.Column="1"
            Height="33"
            MinWidth="80"
            Margin="12,0"
            VerticalAlignment="Center"
            IsThumbToolTipEnabled="False"
            Style="{StaticResource MediaSliderStyle}" />
    <TextBlock x:Name="TimeElapsedElement"
               Grid.Column="2"
               Style="{StaticResource MediaTextBlockStyle}"
               Text="00:00" />
</Grid>

并将TimeTextGrid 的Visibility 设置为Collapsed，例如：

<Grid x:Name="TimeTextGrid"
      Grid.Row="1"
      Height="15"
      Margin="12,0"
      Visibility="Collapsed">
    <!--<TextBlock x:Name="TimeElapsedElement"
               Margin="0"
               HorizontalAlignment="Left"
               Style="{StaticResource MediaTextBlockStyle}"
               Text="00:00" />
    <TextBlock x:Name="TimeRemainingElement"
               HorizontalAlignment="Right"
               Style="{StaticResource MediaTextBlockStyle}"
               Text="00:00" />-->
</Grid>

这里我们不能删除TimeTextGrid。在某些情况下，缺少TimeTextGrid 会导致异常。

使时间显示为 00:00 而不是 0:00:00

更改已用时间和剩余时间的格式并不容易。它们在代码隐藏中设置，仅编辑 TimeElapsedElement 或 TimeRemainingElement 的属性将不起作用。而且我不确定您为什么需要将它们显示为“00:00”。如果媒体的持续时间超过一小时怎么办？如何显示“2:10:20”的时间？我建议您只使用原始格式，但如果您确实想将其显示为“00:00”，这里有一个解决方法：

首先，我们需要创建一个格式转换器来转换时间格式，如下所示：

public class TimeSpanFormatConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (!string.IsNullOrEmpty(value.ToString()))
        {
            var timeSpan = TimeSpan.Parse(value.ToString());

            return timeSpan.ToString(@"mm\:ss");
        }
        else
        {
            return "00:00";
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

那么由于TimeElapsedElement和TimeRemainingElement的Text是在代码隐藏中设置的，我们不能在TimeElapsedElement和TimeRemainingElement中直接使用TimeSpanFormatConverter。所以我添加了两个TextBlocks 并将它们的Text 属性绑定到TimeElapsedElement 和TimeRemainingElement 的Text 并在我的新TimeSpanFormatConverter 中使用TimeSpanFormatConverter，例如：

<TextBlock x:Name="MyTimeRemaining"
           Style="{StaticResource MediaTextBlockStyle}"
           Text="{Binding Text,
                          Converter={StaticResource TimeSpanFormatConverter},
                          ElementName=TimeRemainingElement}" />

StaticResource TimeSpanFormatConverter 定义为

<local:TimeSpanFormatConverter x:Key="TimeSpanFormatConverter" />

之后，我可以隐藏TimeTextGrid 并在MyGrid 中使用我的TextBlocks：

<Grid x:Name="MediaTransportControls_Timeline_Grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid x:Name="MyGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="MyTimeRemaining"
                   Style="{StaticResource MediaTextBlockStyle}"
                   Text="{Binding Text,
                                  Converter={StaticResource TimeSpanFormatConverter},
                                  ElementName=TimeRemainingElement}" />
        <Slider x:Name="ProgressSlider"
                Style="{StaticResource MediaSliderStyle}"
                Grid.Column="1"
                Height="33"
                MinWidth="80"
                Margin="12,0"
                VerticalAlignment="Center"
                IsThumbToolTipEnabled="False" />
        <TextBlock x:Name="MyTimeElapsedElement"
                   Style="{StaticResource MediaTextBlockStyle}"
                   Grid.Column="2"
                   Text="{Binding Text,
                                  Converter={StaticResource TimeSpanFormatConverter},
                                  ElementName=TimeElapsedElement}" />
    </Grid>

    <ProgressBar x:Name="BufferingProgressBar"
                 Grid.ColumnSpan="3"
                 Height="4"
                 Margin="0,2,0,0"
                 VerticalAlignment="Top"
                 IsHitTestVisible="False"
                 IsIndeterminate="True"
                 Visibility="Collapsed" />

    <Grid x:Name="TimeTextGrid"
          Grid.Row="1"
          Height="15"
          Margin="12,0"
          Visibility="Collapsed">
        <TextBlock x:Name="TimeElapsedElement"
                   Style="{StaticResource MediaTextBlockStyle}"
                   Margin="0"
                   HorizontalAlignment="Left"
                   Text="00:00" />
        <TextBlock x:Name="TimeRemainingElement"
                   Style="{StaticResource MediaTextBlockStyle}"
                   HorizontalAlignment="Right"
                   Text="00:00" />
    </Grid>
</Grid>

是否可以从 MediaTransportControls 中删除“投射到设备”图标/选项？

要从 MediaTransportControls 中删除“Cast to Device”图标/选项，我们只需删除 中名为 "CastButton" 的 AppBarButton >“MediaControlsCommandBar”：

<!--<AppBarButton x:Name="CastButton"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="7">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xEC15;" />
    </AppBarButton.Icon>
</AppBarButton>-->

最后，在这些更改之后，MediaTransportControls 将如下所示：