在ContentControl内的不同窗口上切换控件
本文关键字:控件 窗口 ContentControl | 更新日期: 2023-09-27 18:09:25
我正在制作一个视频播放器。在这个应用程序中,我有一个全屏窗口和一个正常窗口。
我使用ContentControl
来绑定MediaElement
在它里面,从我的ViewModel。我的MediaElement
的实例是在ViewModel中创建的,所以通过代码更容易控制这个控件。
现在我有一个Button
来显示另一个带有另一个ContentControl
的窗口,我可以在其中分配这个相同的MediaElement
。它的工作原理。元素从正常窗口切换到全屏。
问题是当我关闭全屏窗口时,它不会切换回我的正常窗口ContentControl
。
我试着重新绑定控件,它的工作原理是在控件内部看到的控件控件,但似乎不工作,任何命令。
FullScreenView
<Grid>
<ContentControl Content="{Binding PlayerBaseViewModel.MediaControl, Mode=OneWay}" />
</Grid>
PlayerBaseView
<Grid>
<ContentControl Content="{Binding MediaControl}" />
</Grid>
调用全屏
internal void ShowFullScreen(PlayerBaseViewModel playerBaseViewModel)
{
var fullScreenView = new FullScreenView();
var fullScreenViewModel = new FullScreenViewModel(
playerBaseViewModel,
this.PlayControlViewModel,
this.source);
fullScreenView.DataContext = fullScreenViewModel;
fullScreenView.ShowDialog();
fullScreenViewModel.Dispose();
}
基地public FrameworkElement MediaControl
{
get
{
return this.mediaControl;
}
set
{
this.mediaControl = value;
if (this.mediaControl != null)
{
this.mediaControl.HorizontalAlignment = HorizontalAlignment.Center;
}
this.RaisePropertyChanged(() => this.MediaControl);
}
}
private void FullScreen()
{
if (this.ShowFullScreen != null)
{
MessageHelper.ShowMessage(
string.Format(StaticData.MessagePlayerBaseViewModelFullScreen, this.Device.Name),
string.Format(StaticData.MessagePlayerBaseViewModelFullScreenDetails, this.Device.Name),
3);
var control = this.mediaControl;
this.ShowFullScreen(this);
this.MediaControl = null;
control.DataContext = this;
this.MediaControl = control;
this.Device.ResetAllDevice();
}
}
PlayerAudioVideoViewModel
public class PlayerAudioVideoViewModel : PlayerBaseViewModel
{
#region Static Fields
private static readonly Stopwatch Watch = Stopwatch.StartNew();
#endregion
#region Fields
private readonly DependencyPropertyDescriptor mediaPositionDependencyPropertyDescriptor =
DependencyPropertyDescriptor.FromProperty(MediaSeekingElement.MediaPositionProperty, typeof(UIElement));
private readonly DispatcherTimer timer = new DispatcherTimer(DispatcherPriority.Render);
private MediaElement mediaElement = new MediaElement();
#endregion
#region Constructors and Destructors
public PlayerAudioVideoViewModel(DeviceModel deviceModel)
: base(deviceModel)
{
this.MediaControl = this.mediaElement;
this.mediaElement.BeginInit();
this.timer.Interval = TimeSpan.FromMilliseconds(200);
this.timer.Tick += this.TimerTick;
this.mediaElement.LoadedBehavior = MediaState.Manual;
this.mediaElement.ScrubbingEnabled = true;
this.mediaElement.MediaOpened += this.MediaOpened;
this.mediaElement.MediaEnded += this.MediaEnded;
this.mediaPositionDependencyPropertyDescriptor.AddValueChanged(this.mediaElement, this.PositionChanged);
this.mediaElement.EndInit();
}
#endregion
#region Public Methods and Operators
public override void CleanUp()
{
this.MediaControl = null;
this.mediaElement.Source = null;
this.mediaElement.MediaOpened -= this.MediaOpened;
this.mediaElement.MediaEnded -= this.MediaEnded;
this.mediaElement.LoadedBehavior = MediaState.Manual;
this.mediaElement.UnloadedBehavior = MediaState.Manual;
this.timer.Tick -= this.TimerTick;
this.mediaElement.Source = null;
this.mediaElement = null;
}
public override void LoadData()
{
if (this.Data != null)
{
var cont = (ContentMoving)this.Data.Content;
if (this.mediaElement.Source == null || !this.mediaElement.Source.LocalPath.Equals(cont.Path.FullName))
{
this.mediaElement.Source = new Uri(cont.Path.FullName, UriKind.Absolute);
this.mediaElement.Pause();
}
else
{
this.mediaElement.Position =
cont.Position.Subtract(new TimeSpan(0, 0, 0, 0, cont.Position.Milliseconds));
// this.ChangePlaySpeed();
this.timer.Start();
}
}
else
{
this.mediaElement.Source = null;
}
Debug.Print("D {0} Load.", this.DeviceName);
}
public override void MuteAudio(bool mute)
{
this.mediaElement.IsMuted = mute;
}
public override void Pause()
{
Debug.Print("D {0} Pause.", this.DeviceName);
this.mediaElement.Pause();
}
public override void Play()
{
Debug.Print("D {0} Play.", this.DeviceName);
this.mediaElement.Play();
}
#endregion
#region Methods
private void MediaEnded(object sender, RoutedEventArgs e)
{
if (this.mediaElement.Position == this.mediaElement.NaturalDuration)
{
this.DataEndReached();
}
}
private void MediaOpened(object sender, RoutedEventArgs e)
{
if (this.Data != null)
{
var cont = (ContentMoving)this.Data.Content;
if (this.Device.Status == PlayStatus.Play)
{
this.Device.ResetAllDevice();
}
else
{
this.mediaElement.Position =
cont.Position.Subtract(new TimeSpan(0, 0, 0, 0, cont.Position.Milliseconds));
this.ChangePlaySpeed();
}
}
this.DataLoaded();
}
#endregion
}
}
原窗口丢失视频的原因是因为当您关闭全屏窗口时;MediaElement
正在卸载,因为它是该窗口ui树的一部分。要解决这个问题,您需要首先将MediaElement
加载/卸载行为更改为手动。默认情况下为自动模式。这就是为什么媒体开始播放后,源代码加载。这也意味着当Unloaded事件从UI树中触发时,MediaElement
将关闭。
一旦你将行为设置为手动,你仍然需要处理全屏窗口关闭事件,这样你就可以重新绑定ContentControl
。Content
(MediaElement
)在主窗口。这将再次触发MediaElement
中的"Loaded"事件,这将允许MediaElement
继续在主窗口中播放。
下面是示例代码;非常直接。我正在展示ViewModel构造函数和相关方法。
ViewModel.cs:
public RelayCommand Maximize { get; set; }
public RelayCommand Play { get; set; }
private MediaElement media;
// Bound media property with notification
public MediaElement Media
{
get
{
return this.media;
}
set
{
this.media = value;
// Modify following line as needed
// to any custom Property changed handler
this.Changed("Media");
}
}
// Constructor, setup the command, media element etc.
public ViewModel()
{
// Two button commands
this.Maximize = new RelayCommand(this.ExecuteMaximizeCommand);
this.Play = new RelayCommand(this.ExecutePlayCommand);
// The Media element
this.Media = new MediaElement();
// This is where we need to set Loaded and Unloaded behavior to Manual
// This means video won't play right-away after loading
// You will have to call .Play() method to start playback
// Add a play button if you don't have one and bind the Play command
this.Media.LoadedBehavior = MediaState.Manual;
this.Media.UnloadedBehavior = MediaState.Manual;
// Following is just an example. Doesn't need to be here
this.Media.Source = new Uri("test.mp4", UriKind.Relative);
}
public void ExecuteMaximizeCommand()
{
var fullscreen = new FullScreen();
// We need to handle the Closing event
// So that we can trigger the playback
// to continue in the smaller window
fullscreen.Closing += fullscreen_Closing;
fullscreen.DataContext = this;
fullscreen.ShowDialog();
}
public void ExecutePlayCommand()
{
this.Media.Play();
}
// Event handler for fullscreen window closing
void fullscreen_Closing(object sender, CancelEventArgs e)
{
// Trigger the Property Change Notification
// by forcing null and then back to original value
// This will trigger the binding to kick-in again
// which will redraw the MediaElement UI and continue
// the playback
var temp = this.Media;
this.Media = null;
this.Media = temp;
}
主窗口。xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<ContentControl Content="{Binding Media}" />
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Button Command="{Binding Maximize}" Content="Maximize" Margin="2" />
<Button Command="{Binding Play}" Content="Play" Margin="2" />
</StackPanel>
</Grid>
</Window>
MainWindow.cs
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
FullScreen.xaml
<Window x:Class="WpfApplication1.FullScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="FullScreen" Height="300" Width="300" WindowState="Maximized">
<Grid>
<ContentControl x:Name="MediaContentControl" Content="{Binding Path=Media}">
</ContentControl>
</Grid>
</Window>