MediaElement Customize 'TimeRemainingElement' in MediaTransportControls UWP

Question

I have changed the Background and Foreground Color of the MediaElement's MediaTransportControls using this solution UWP custom media controls not working

Now I want to

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

• make the time show as 00:00 not 0:00:00

Is it possible to do that? Any idea how to do it?

• 1 more question: Is it possible to remove the "Cast to Device" icon/option from the MediaTransportControls?

Answer 1

Yeah, this is possible. As I've mentioned in my previous answer in UWP custom media controls not working, we can edit MediaTransportControls styles and templates to achieve what you want.

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

TimeRemainingElement is located in the Grid named "TimeTextGrid" which is in the second row of the Grid named "MediaTransportControls_Timeline_Grid". And the Slider named "ProgressSlider" is in the first row. So to put TimeRemainingElement on the left of the Slider, we can add a Grid in the first row, then remove TimeRemainingElement and ProgressSlider to the different columns of the new grid like:

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

And set the Visibility of TimeTextGrid to Collapsed like:

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

Here we can't delete TimeTextGrid. Missing TimeTextGrid would cause exception is some scenarios.

make the time show as 00:00 not 0:00:00

Changing the format of elapsed and remaining time is not easy. They are set in code-behind, just editing properties of TimeElapsedElement or TimeRemainingElement won't work. And I'm not sure why you need them show as "00:00". What if the media's duration is large than one hour? How to show a time that is "2:10:20"? I'd suggest you just use the original format, but if you do want to show it like "00:00", here is a workaround:

Firstly, we need to create a Format Converter to convert the time format like following:

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();
    }
}

Then as the Text of TimeElapsedElement and TimeRemainingElement are set in code-behind, we can't use TimeSpanFormatConverter in TimeElapsedElement and TimeRemainingElement directly. So I add two TextBlocks and bind their Text property to the Text of TimeElapsedElement and TimeRemainingElement and use TimeSpanFormatConverter in my new TextBlock like:

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

The StaticResource TimeSpanFormatConverter is defined as

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

After this, I can hide TimeTextGrid and use my TextBlocks in MyGrid:

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

To remove the "Cast to Device" icon/option from the MediaTransportControls, we can just delete the AppBarButton named "CastButton" in "MediaControlsCommandBar" :

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

And finally, after these changes, the MediaTransportControls will look like: