BottomAppBar隱藏完整窗口的一部分TransportControls MediaElement

Question

當MediaElement切換到FullWindow模式時，內部FullWindowMediaRoot成爲其臨時主機。當可見時，FullWindowMediaRoot位於正常RootScrollViewer的頂部，即它顯示爲當前頁面上的疊加層，這是預期的行爲。

我的問題是與BottomAppBar。它的主機是內部的PopupRoot，不幸的是它位於FullWindowMediaRoot的頂部。所以當我在一個允許用戶將MediaElement切換到FullWindow的頁面上使用BottomAppBar時，用戶無法使用MediaElement的控件，因爲這些元素幾乎完全被仍然可見的BottomAppBar隱藏。

我已經把我的頭髮拉近了這個問題近一天，並找到了適合我的解決方案。如果有人有更好的答案，我會很感激分享。在此之前，我正在記錄下我目前的工作解決方案，以解決遇到同樣問題的任何人。

我的解決方案使用實現IValueConverter的類，每當MediaElement的IsFullWindow屬性更改值時都會引發事件。

頁面初始化器添加一個事件處理程序轉換器的FullWindowStateChanged事件：

this.isFullWindowConverter.FullWindowStateChanged += this.OnFullWindowStateChanged; 

和處理這樣的：

/// <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; 
} 

這裏的轉換器類：

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

如果你正在創建一個UWP應用程序，我想你可以在0123中放一個，並將其定位到頁面的底部。這也會解決你的問題。但是，如果您正在使用Windows 8.1應用程序，則此方法無效。

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

任何方式，您的解決方案將解決這個問題。感謝你的分享。