How to create TabControl so that it render different data on each TabItem switching them

I want to create a Tabcontrol using MVVM approach where this Tab will have 3 tabitems and each of them will render different things like one will render some code in it's tab content and another tabItem will render soem UI element.

What i have in mind is :

Make a mainView.xaml which will have TabControl declared like this :

<UserControlx:Class="CENTER.MainTabControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"mc:Ignorable="d"d:DesignHeight="300"d:DesignWidth="400"><Gridx:Name="LayoutRoot"Background="White"><controls:TabControlGrid.Row="0"BorderThickness="0"Background="White"/></Grid></UserControl>

And make a Viewmodel class for each Tabitem like XmlRenderViewModel.cs (for xml rendering) and UIeLementRenderViewmodel.cs(for UI element rendering) (please correct me if i am wrong). and will need to make a List of UserControl (3 Usercontrol in this case).

But how to implement that using MVVM approach and xaml ?

Could some one please explain .Thanks a lot I am stuck here since a long time .