MediaElement Customize＆＃39; TimeRemainingElement＆＃39;在MediaTransportControls UWP中

Question

我使用此解决方案UWP custom media controls not working

更改了MediaElement的MediaTransportControls的背景和前景颜色

现在我想

• 更改＆＃39; TimeRemainingElement＆＃39; 的位置，并将其放在Slider的左侧。

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

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

• 还有一个问题：是否可以从MediaTransportControls中删除＆＃34; Cast to Device＆＃34; 图标/选项？

Answer 1

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

  

更改'TimeRemainingElement'的位置，并将其放在Slider的左侧。

TimeRemainingElement位于名为 “TimeTextGrid” 的Grid中，位于Grid名为<的第二行强> “MediaTransportControls_Timeline_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>

并将Visibility的{​​{1}}设置为TimeTextGrid，如：

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会导致异常。

  

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

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

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

TimeRemainingElement

然后，由于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(); } } 和Text的{​​{1}}设置在代码隐藏中，我们无法在TimeElapsedElement和{{1}中使用TimeRemainingElement直接。因此，我添加了两个TimeSpanFormatConverter并将TimeElapsedElement属性绑定到TimeRemainingElement和TextBlock的{​​{1}}，并在我的新Text中使用Text 1}}喜欢：

TimeElapsedElement

TimeRemainingElement定义为

TimeSpanFormatConverter

在此之后，我可以隐藏TextBlock并在<TextBlock x:Name="MyTimeRemaining" Style="{StaticResource MediaTextBlockStyle}" Text="{Binding Text, Converter={StaticResource TimeSpanFormatConverter}, ElementName=TimeRemainingElement}" /> 中使用我的StaticResource TimeSpanFormatConverter：

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

  

是否可以从MediaTransportControls中删除“Cast to Device”图标/选项？

要从MediaTransportControls中删除“投放到设备”图标/选项，我们只需删除中名为 “CastButton” 的TimeTextGrid即可“MediaControlsCommandBar” ：

TextBlock

最后，在这些变化之后，MyGrid将如下所示：