VisualBrush (linked to VLC) doesn't change on TabControl selection change

Question

I am having a weird experience with a combination of visual brush (linked to a VLC player through VLC.DotNet) and a tab control. I have created a custom control using the VLC player to watch an RTSP stream and have multiple of these controls in a given window.

The problem is that if I put all the controls in a list view they all display properly. But if I put them in a tab control then it always shows the stream of the first-selected tab item, not matter what tab I'm currently on. Everything else in the control (label, etc.) changes properly, but not the part drawn by the visual brush.

The view for my control is defined as:

<UserControl x:Class="myApp.View.CameraMonitorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:Wpf="clr-namespace:Vlc.DotNet.Wpf;assembly=Vlc.DotNet.Wpf"
             Loaded="UserControl_Loaded">
    <DockPanel>
        <Label Content="{Binding Name}" DockPanel.Dock="Bottom"/>
        <Grid Margin="3">
            <Grid.Background>
                <VisualBrush Stretch="Uniform">
                    <VisualBrush.Visual>
                        <Image Source="{Binding VideoSource, ElementName=vlcControl}"/>
                        <!--<Image Source="{Binding Image}" /> -->
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.Background>
            <Wpf:VlcControl x:Name="vlcControl" Margin="3"/>
        </Grid>
    </DockPanel>
</UserControl>

The code behind for the view starts playing the RTSP, but I don't think that code will help with this problem.

Meanwhile the ViewModel (stripped down for ease of viewing) is just:

class CameraMonitorViewModel : ViewModelBase
{
    public CameraMonitorViewModel(string name, string image)
    {
        Name = name;
        Image = image;
    }

    public string Name {get; set;}
    public string Image { get; set; }
}

And I have a data template defined as:

<DataTemplate DataType="{x:Type vm:CameraMonitorViewModel}">
    <v:CameraMonitorView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</DataTemplate>

The full window view model has an ObservableCollection called Monitors and the view displays:

<TabControl ItemsSource="{Binding Monitors}" SelectedIndex="0" Height="300">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding Name}"/>
            <Setter Property="Content" Value="{Binding}"/>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>
<ListView ItemsSource="{Binding Monitors}" Height="300" />

The ListView properly shows different images from each camera. The tab item will always show the same camera, but the control's label item changes when I clicked different tabs. Moreover, if I replace the databinding to the VLC control's image to the commented out static image object (whose source is set by way of the view model) then the image will properly change when I click different tabs.

I'm really confused and would appreciate any help that could be provided.

Answer 1

Yeah, as I noted in the comment to the question the problem was that I was starting the stream playing based on the Loaded event for the control. But it seems like it doesn't get fired after the second tab, probably because of what Rachel mentions here: Loaded event doesn't fire for the 4th TabControl tab (being that it reuses the template rather than loading multiple ones).