MediaElement在MediaTransportControls UWP中自定义'TimeRemainingElement'-Java 学习之路

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

现在我想

更改 'TimeRemainingElement' 的位置并将其放在Slider的左侧 .
使时间显示为 00:00 而不是0:00:00

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

1个问题：是否可以从MediaTransportControls中删除 "Cast to Device" 图标/选项？

1 回答

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

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

TimeRemainingElement 位于 Grid ，名为 "TimeTextGrid" ，位于 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 的 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 的属性't work. And I'我不知道为什么你需要它们显示为"00:00" . 如果媒体's duration is large than one hour? How to show a time that is 2764462 ? I' d建议你只使用原始格式，但如果你想显示它像"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 . 所以我添加两个 TextBlock 并将它们的 Text 属性绑定到 TimeElapsedElement 和 TimeRemainingElement 的 Text 并在我的新 TextBlock 中使用 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 中使用我的 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>

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

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

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

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

enter image description here

回复于 2024-05-14T22:00:06+08:00

MediaElement在MediaTransportControls UWP中自定义'TimeRemainingElement'

1 回答

相关问题