I’m using Microsoft Automatic Graph Layout (MSAGL) to build a WPF application using MVVM.

MSAGL has a built in class called Gviewer that inherits from System.Windows.Forms.UserControl. This Gviewer object displays the graph MSAGL builds with my data along with a toolstrip and some other controls. In all examples I can find, this Gviewer is simply added into the controls of a form created in the code behind, which displays the graph and Gviewer controls in a new pop-up window like so:

Gviewer in a new form/window

This works and displays my graph correctly, but instead of using a new window and form, I want to embed and show these Gviewer objects in the TabItems of a TabControl I have in my existing application window.For this I am trying to bind my Gviewer objects to the content of ContentPresenters found in the DataTemplate of my TabControl. Unfortunately I am only getting empty TabItems with nothing shown, and failing to see my mistake or the right solution.

The XAML for my TabControl:

<TabControl x:Name="TabControl_ModuleNetworks" Grid.Row="0" Margin="0,3,3,3"
            ItemsSource="{Binding ModuleNetworkTabItems}"
            SelectedIndex="{Binding TabControl_ModuleNetworks_SelectedTabIndex}"
            Visibility="{Binding ModuleNetworkTabsVisibility}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ModuleNetworkHeader}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding ModuleNetworkGviewer}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

My ViewModel for my TabItems:

using System.Windows.Forms;
using Microsoft.Msagl.GraphViewerGdi;

namespace MyApplication
{
    public class ModuleNetworkTabViewModel : ViewModelBase
    {
        private string _moduleNetworkHeader;
        public string ModuleNetworkHeader
        {
            get { return _moduleNetworkHeader; }
            set 
            { 
                _moduleNetworkHeader = value; 
                NotifyPropertyChanged(nameof(ModuleNetworkHeader)); 
            }
        }
        private GViewer _moduleNetworkGviewer;
        public GViewer ModuleNetworkGviewer
        {
            get { return _moduleNetworkGviewer; }
            set 
            { 
                _moduleNetworkGviewer = value; 
                NotifyPropertyChanged(nameof(ModuleNetworkGviewer)); 
            }
        }
        public ModuleNetworkTabViewModel()
        {
            ModuleNetworkHeader = "Module Network";

            ModuleNetworkGviewer = new GViewer();
            ModuleNetworkGviewer.Graph = NetworkBuilder.MsaglGraph;
            ModuleNetworkGviewer.Show();

            // if I add this additional code, the Gviewer and graph will be shown correctly in a new form/window as in picture above
            Form GviewerForm = new Form();
            GviewerForm.Controls.Add(ModuleNetworkGviewer);
            GviewerForm.Show();            
        }
    }
}

And the associated code in my MainViewModel:

namespace MyApplication
{
    public class MainViewModel : ViewModelBase
    {
        private ObservableCollection<ModuleNetworkTabViewModel> _moduleNetworkTabItems;
        public ObservableCollection<ModuleNetworkTabViewModel> ModuleNetworkTabItems
        {
            get { return _moduleNetworkTabItems; }
            set 
            { 
                _moduleNetworkTabItems = value; 
                NotifyPropertyChanged(nameof(ModuleNetworkTabItems)); 
            }
        }
        public MainViewModel()
        {
             ModuleNetworkTabItems = new ObservableCollection<ModuleNetworkTabViewModel>();
             ModuleNetworkTabItems.Add(new ModuleNetworkTabViewModel());
        }
    }
}

I’ve tried binding the Gviewer into a ContentControl as well, the result has been the same, nothing shown other than an empty TabItem.

Would much appreciate any help you guys can provide in getting this to work in a TabControl.