MediaTransportControls与自定义按钮和弹出窗口
在我的应用中，我有一个MediaTransortControls模板，我从默认的系统模板中复制了该模板并删除了一些需要的按钮，并添加了一个AppBarButton和Flyout。弹出窗口仅托管TextBlock控件以显示一些数据。如果MediaPlayerElement处于non-full screen状态，则会显示数据正常，但只要MediaPlayerElement全屏显示，就会在弹出按钮中显示数据。
我无法知道为什么这会导致问题。当不是全屏时，数据会像往常一样实时更新，但只要你全屏显示，就没有数据。当你回来时，你可以再次看到数据。
这是MediaPlayerElement的正常行为吗？
自定义模板：
<Style TargetType="MediaTransportControls"
x:Key="myCustomTransportControls">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="FlowDirection" Value="LeftToRight" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="IsTextScaleFactorEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MediaTransportControls">
<Grid x:Name="RootGrid" Background="Transparent">
<Grid.Resources>
<!-- New AppBar button style 48x48 pixels in size -->
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton">
<Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
<Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
<Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>
<!-- New CommandBar Style -->
<Style x:Key="CommandBarStyle" TargetType="CommandBar">
<Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
<Setter Property="Background" Value="Transparent" />
</Style>
<!-- Style for Error Message text -->
<Style x:Key="MediaTextBlockStyle" TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="FontSize" Value="{ThemeResource MTCMediaFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource MTCMediaFontFamily}" />
<Setter Property="Style" Value="{ThemeResource CaptionTextBlockStyle }" />
<Setter Property="IsTextScaleFactorEnabled" Value="False" />
</Style>
<!-- Style for Position slider used in Media Transport Controls -->
<Style x:Key="MediaSliderStyle" TargetType="Slider">
<Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
<Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
<Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="ManipulationMode" Value="None" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
<Setter Property="IsFocusEngagementEnabled" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Margin="{TemplateBinding Padding}">
<Grid.Resources>
<Style TargetType="Thumb" x:Key="SliderThumbStyle">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlBackgroundChromeMediumBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse x:Name="ellipse"
Stroke="{TemplateBinding Background}"
StrokeThickness="2"
Fill="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ProgressBar" x:Key="MediaSliderProgressBarStyle">
<Setter Property="Height" Value="{ThemeResource SliderTrackThemeHeight}" />
<Setter Property="Minimum" Value="0" />
<Setter Property="Maximum" Value="100" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
<Grid x:Name="ControlPanelGrid"
Background="{ThemeResource SystemControlPageBackgroundAltMediumBrush}"
VerticalAlignment="Bottom"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TranslateTransform x:Name="TranslateVertical"/>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="ErrorBorder"
Width="320"
Height="96"
Grid.ColumnSpan="3"
HorizontalAlignment="Center"
Background="{ThemeResource SystemControlPageBackgroundAltMediumBrush}"
Visibility="Collapsed">
<TextBlock x:Name="ErrorTextBlock"
Style="{StaticResource MediaTextBlockStyle}"
TextWrapping="WrapWholeWords"
Margin="12" />
</Border>
<Border x:Name="MediaTransportControls_Timeline_Border" Grid.Column="1" Grid.Row="1">
<Grid x:Name="MediaTransportControls_Timeline_Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Slider x:Name="ProgressSlider"
Style="{StaticResource MediaSliderStyle}"
Margin="12,0"
MinWidth="80"
Height="33"
VerticalAlignment="Center"
IsThumbToolTipEnabled="False" />
<ProgressBar x:Name="BufferingProgressBar"
Height="4"
IsIndeterminate="True"
IsHitTestVisible="False"
VerticalAlignment="Top"
Margin="0,2,0,0"
Visibility="Collapsed" />
<Grid x:Name="TimeTextGrid"
Margin="12,0"
Grid.Row="1"
Height="15">
<TextBlock x:Name="TimeElapsedElement"
Style="{StaticResource MediaTextBlockStyle}"
Margin="0"
Text="00:00"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"/>
<TextBlock x:Name="TimeRemainingElement"
Style="{StaticResource MediaTextBlockStyle}"
Text="00:00"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</Grid>
</Grid>
</Border>
<Border x:Name="LeftSidePlayBorder"
Grid.Column="0"
Grid.Row="1"
Visibility="Collapsed">
<AppBarButton x:Name="PlayPauseButtonOnLeft"
Margin="0"
VerticalAlignment="Center"
Style="{StaticResource AppBarButtonStyle}">
<AppBarButton.Icon>
<SymbolIcon x:Name="PlayPauseSymbolLeft" Symbol="Play" />
</AppBarButton.Icon>
</AppBarButton>
</Border>
<Border x:Name="MediaTransportControls_Command_Border"
Grid.Column="1"
Grid.Row="2">
<CommandBar x:Name="MediaControlsCommandBar"
Margin="0,0"
Style="{StaticResource CommandBarStyle}"
IsDynamicOverflowEnabled="False">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name='VolumeMuteButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='919'>
<AppBarButton.Flyout>
<Flyout x:Name='VolumeFlyout' FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
<StackPanel Orientation="Horizontal" >
<AppBarButton x:Name='AudioMuteButton'
Style='{StaticResource AppBarButtonStyle}'
VerticalAlignment='Center'
HorizontalAlignment='Center'
Margin='12'>
<AppBarButton.Icon>
<SymbolIcon x:Name='AudioMuteSymbol' Symbol='Volume' />
</AppBarButton.Icon>
</AppBarButton>
<Slider x:Name='VolumeSlider'
Value='50'
IsThumbToolTipEnabled='False'
Width='{ThemeResource MTCHorizontalVolumeSliderWidth}'
VerticalAlignment='Center'
HorizontalAlignment='Center'
Margin='0'/>
<TextBlock x:Name='VolumeValue'
Style='{StaticResource MediaTextBlockStyle}'
Text="{Binding ElementName=VolumeSlider,Path=Value}"
HorizontalAlignment='Center'
VerticalAlignment='Center'
Width='24'
Margin='12'/>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
<AppBarButton.Icon>
<SymbolIcon x:Name='VolumeMuteSymbol' Symbol='Volume' />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='CCSelectionButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='15'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name="MediaInfoButton"
Style="{StaticResource AppBarButtonStyle}">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
<AppBarButton.Flyout>
<Flyout FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
<TextBlock Name="IBlock"
Text="{Binding Path=VideoInfoText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Style="{StaticResource BodyTextBlockStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
<!-- This is the custom button "MediaInfoButton" which I added -->
<AppBarSeparator/>
<AppBarButton x:Name='PlayPauseButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='23'>
<AppBarButton.Icon>
<SymbolIcon x:Name='PlayPauseSymbol' Symbol='Play' />
</AppBarButton.Icon>
</AppBarButton>
<AppBarSeparator/>
<AppBarButton x:Name='ZoomButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='9'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='CastButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='11'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='FullWindowButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='20'>
<AppBarButton.Icon>
<SymbolIcon x:Name='FullWindowSymbol' Symbol='FullScreen' />
</AppBarButton.Icon>
</AppBarButton>
<!--
<AppBarButton x:Name='FastForwardButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='1'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='NextTrackButton'
Icon='Next'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='3'
Visibility='Collapsed'/>
<AppBarButton x:Name='SkipForwardButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='5'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='PlaybackRateButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='10'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
-->
<!--
<AppBarSeparator x:Name='RightSeparator'
Height='0'
Width ='0'
Margin='0,0' />
-->
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
</CommandBar.SecondaryCommands>
</CommandBar>
</Border>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
注意：我不能把整个模板放到问题主体那么大。
图片：
有人可以指出我可以做些什么才能在全屏幕上完成这项工作？ 或者也许在播放器全屏时完全隐藏按钮？ 感谢
更新
这是代码隐藏中的Binding属性：
private string mediaInfo;
public string VideoInfoText
{
get
{
if (mediaInfo == null || mediaInfo == "")
return "Information will be shown when the video starts playing.";
return mediaInfo;
}
set
{
if (value != mediaInfo)
{
mediaInfo = value;
OnPropertyChanged();
}
}
}
这是实际更新数据的方法：
private async void MediaView_DownloadProgressChanged(MediaPlaybackSession sender, object args)
{
await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
try
{
var i = MediaView.MediaPlayer.PlaybackSession.DownloadProgress;
string p = sender.IsProtected ? "Protection enabled." : "Protection not available.";
HtmlDocs.INotifyObject.VideoInfoText = $"DRM: {p}\nVideo Height: {sender.NaturalVideoHeight}\nVideo Width: {sender.NaturalVideoWidth}" +
$"\n{string.Format("Video Stream Progress: {0:0.00}%", (i * 100))}";
}
catch (Exception)
{
}
});
}
1 个答案:
答案 0 :(得分：0)
我通过将Custom类的-7.0设置为DataContext对象来实现它，并开始在全屏显示文本。首先，Binding仅在托管媒体播放器的主页面中设置，并且在非全屏幕下工作正常但在全屏幕中仅在设置上面的DataContext后才有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？