MediaElement 在 MediaTransportControls UWP 中自定义 'TimeRemainingElement'

Question

我已经使用此解决方案更改了 MediaElement 的 MediaTransportControls 的背景色和前景色

现在我想

改变'TimeRemainingElement'的位置，放在Slider的左边。
将时间显示为 00:00 而不是 0:00:00

可以吗？知道怎么做吗？

1 个问题：是否可以从 MediaTransportControls 中删除 "Cast to Device" icon/option？

Answer 1

是的，这是可能的。正如我在 , we can edit MediaTransportControls styles and templates 之前的回答中提到的那样，以实现您想要的。

change the place of the 'TimeRemainingElement' and put it on the left of the Slider.

TimeRemainingElement 位于 Grid 名为 "TimeTextGrid" 的第二个名为 "MediaTransportControls_Timeline_Grid" 的 Grid 行。而名为 "ProgressSlider" 的 Slider 在第一行。所以要把TimeRemainingElement放在Slider的左边，我们可以在第一行加一个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 会导致异常。

make the time show as 00:00 not 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在code-behind中设置了，我们不能在TimeElapsedElement和[中使用TimeSpanFormatConverter =17=]直接。所以我添加了两个 TextBlock 并将它们的 Text 属性绑定到 TimeElapsedElement 和 TimeRemainingElement 的 Text 并在中使用 TimeSpanFormatConverter我的新 TextBlock 喜欢：

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

StaticResource TimeSpanFormatConverter定义为

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

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

<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>

Is it possible to remove the "Cast to Device" icon/option from the MediaTransportControls?

要从 MediaTransportControls 中删除 "Cast to Device" icon/option，我们只需删除名为 "CastButton"[= 的 AppBarButton 89=] 在 "MediaControlsCommandBar" 中：



最后，经过这些更改后，MediaTransportControls 将如下所示：

MediaElement 在 MediaTransportControls UWP 中自定义 'TimeRemainingElement'

MediaElement Customize 'TimeRemainingElement' in MediaTransportControls UWP

c#

xaml

styles

mediaelement

uwp