BottomAppBar hides part of the TransportControls of a full window MediaElement - windows-runtime

Question

When a MediaElement switches to FullWindow mode, the internal FullWindowMediaRoot becomes its temporary host. When visible, FullWindowMediaRoot sits on top of the normal RootScrollViewer, i.e. it is displayed as an overlay over the current page, which is the expected behaviour.
My problem was with the BottomAppBar. Its host is the internal PopupRoot, which unfortunately sits on top of the FullWindowMediaRoot. So when I use a BottomAppBar on a page that allows a user to switch a MediaElement to FullWindow, the user cannot use the MediaElement's controls since these elements are almost completely hidden by the still visible BottomAppBar.
I have pulled my hair out over this problem for nearly a day and have found a solution that works for me. If someone has a better answer, I would be grateful for sharing. Until then, I am documenting my current working solution below for anyone running into the same issue.
My solution uses a class implementing IValueConverter, which raises an event whenever the IsFullWindow property of a MediaElement changes value.
The page initialiser adds an event handler to the converter's FullWindowStateChanged event:
this.isFullWindowConverter.FullWindowStateChanged += this.OnFullWindowStateChanged;
and handles it like this:
/// <summary>
/// Handles the FullWindowStateChanged event of IsFullWindowConverter by adjusting the visibility of the BottomAppBar to the full window
/// state of this page's MediaElement.
/// </summary>
/// <param name="sender">The instance of IsFullWindowConverter raising the event.</param>
/// <param name="e">The parameter is not used.</param>
private void OnFullWindowStateChanged(object sender, EventArgs e)
{
this.BottomAppBar.Visibility = ((IsFullWindowConverter)sender).IsFullWindow ? Visibility.Collapsed : Visibility.Visible;
}
Here the converter class:
namespace Filmit.Win
{
using System;
using Windows.UI.Xaml.Data;
/// <summary>
/// This converter raises an event when the IsFullWindow property of a MediaElement has changed. The converter is added to the resources of the page that hosts the MediaElement:
/// <code><local:IsFullWindowConverter x:Key="isFullWindowConverter" x:Name="isFullWindowConverter"/></code>
/// This converter resource is then bound to the IsFullWindow property of a MediaElement, solely for the event raising effects of the ConvertBack method this converter.
/// The actual value of the IsFullWindow property is returned as is.
/// <code><MediaElement IsFullWindow="{Binding RelativeSource={RelativeSource Self}, Path=IsFullWindow, Converter={StaticResource isFullWindowConverter}, Mode=TwoWay}"></code>
/// The subscriber to the FullWindowStateChanged event checks the IsFullWindow property to get the current full window state of the MediaElement.
/// </summary>
[System.Diagnostics.CodeAnalysis.SuppressMessage("StyleCop.CSharp.DocumentationRules", "SA1603:DocumentationMustContainValidXml", Justification = "XAML Page.Resources declaration.")]
public class IsFullWindowConverter : IValueConverter
{
/// <summary>
/// Raises the FullWindowStateChanged event. Subscribers check the IsFullWindow property to get the current full windows state.
/// </summary>
public event EventHandler<EventArgs> FullWindowStateChanged = null;
/// <summary>
/// Gets a value indicating whether the mode of the MediaElement is FullWindow.
/// </summary>
public bool IsFullWindow { get; private set; }
/// <summary>
/// Required implementation of IValueConverter.Convert, returning the passed in boolean object as a bool.
/// </summary>
/// <param name="value">The boolean object.</param>
/// <param name="targetType">The expected target type.</param>
/// <param name="parameter">The parameter is not used.</param>
/// <param name="language">The parameter is not used.</param>
/// <returns>The passed in boolean object as a bool.</returns>
public object Convert(object value, Type targetType, object parameter, string language)
{
bool? isFullWindow = value as bool?;
this.IsFullWindow = isFullWindow.HasValue ? isFullWindow.Value : false;
return this.IsFullWindow;
}
/// <summary>
/// This implementation of IValueConverter.ConvertBack is called when the IsFullWindow property of the MediaElement has changed its value.
/// It raises the FullWindowStateChanged event and returns the passed in boolean object as a bool.
/// </summary>
/// <param name="value">The boolean object.</param>
/// <param name="targetType">The expected target type.</param>
/// <param name="parameter">The parameter is not used.</param>
/// <param name="language">The parameter is not used.</param>
/// <returns>The passed in boolean object as a bool.</returns>
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
bool? isFullWindow = value as bool?;
this.IsFullWindow = isFullWindow.HasValue ? isFullWindow.Value : false;
if (this.FullWindowStateChanged != null)
{
this.FullWindowStateChanged(this, new EventArgs());
}
return this.IsFullWindow;
}
}
}

Answer 1

If you are creating a UWP app, I think you can put a AppBar in the Grid, and locate it to the bottom of the page. And this will solve your porblem too. But if you are working on a windows 8.1 app, this method will not work.
XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<MediaElement x:Name="MyMedia" Source="Assets/Sofia Jannok-Liekkas.wma" AreTransportControlsEnabled="True" />
<AppBar VerticalAlignment="Bottom">
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
<AppBarButton Content="Maximize" VerticalAlignment="Center" HorizontalAlignment="Center" Click="maximize"/>
</CommandBar>
</AppBar>
</Grid>
C#:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
public void maximize(object sender, RoutedEventArgs e)
{
MyMedia.IsFullWindow = !MyMedia.IsFullWindow;
}
}
Any way, your solution will solve the problem. Thank you for sharing.