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

}

在ContentControl内的不同窗口上切换控件

原窗口丢失视频的原因是因为当您关闭全屏窗口时;MediaElement正在卸载,因为它是该窗口ui树的一部分。要解决这个问题,您需要首先将MediaElement加载/卸载行为更改为手动。默认情况下为自动模式。这就是为什么媒体开始播放后,源代码加载。这也意味着当Unloaded事件从UI树中触发时,MediaElement将关闭。

一旦你将行为设置为手动,你仍然需要处理全屏窗口关闭事件,这样你就可以重新绑定ContentControlContent (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>