MVVM LIght impossible to bind one view on a TabItem - wpf

Question

I have spent more than 10 hours exploring most of what could find on the MVVM pattern and binding to a TabControl.
I prefer not giving my actual code, but my problem is slightly simple :
I'm developing an application to Import/Export IDE (Informatica Data Exchange) Articles
I've created a full DLL wich contains all Model Classes (it was a demand of the client to use that class in another app), that also contains an EF entity (in the form of a stored procedure, not tables)
I'v got an IndexMainViewModel and associated view in the App.Ressources with a defined DataTemplate that binds the V and the VM, which will contains the 2 tabs.
Each of those tabs has to display 2 different views : the ExportView which is related to my ExportViewModel, and the ImportView on the same buiding style.
For info : I've created a DLL that contains all my Models and WorkClasses (including my services and I also created a DAOlayout with interfaces there, all is great there)
I apologize if it does not look clear. If you need I'll put down my code.
Any simple Idea is most welcome.
Thanks.

Answer 1

In the design part i create two Tab, one is Upload and another is Download.
<UserControl.Resources>
<Style TargetType="TabItem" x:Key="MainTabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<DockPanel Height="45" Width="245" >
<Separator Name="RightBorder" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
Height="30" DockPanel.Dock="Right" />
<Grid Cursor="Hand" Width="245" Background="Transparent" >
<TextBlock Name="TabItemTitle" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"
</Grid>
<ContentPresenter ContentSource="Header"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="Name" Value="UploadTab">
<Setter TargetName="TabItemTitle" Property="Text" Value="Upload"/>
</Trigger>
<Trigger Property="Name" Value="DownloadTab">
<Setter TargetName="TabItemTitle" Property="Text" Value="Download"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid HorizontalAlignment="Center" Background="White">
<TabControl Name="MediaControl" SelectionChanged="TabControl_SelectionChanged" Padding="0">
<TabItem Name="UploadTab" Style="{StaticResource MainTabItem}">
<Border Name="UploadTabPanel">
</Border>
</TabItem>
<TabItem Name="DownloadTab" Style="{StaticResource MainTabItem}">
<Border x:Name="DownloadTabPanel">
</Border>
</TabItem>
</TabControl>
</Grid>
</UserControl>
After each Tab click SelectionChanged event will be fired and show your UI under the TabItem as child of a Border.In the SelectionChanged event, you have to add UI Part...
private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
try
{
string tabItem = ((sender as TabControl).SelectedItem as TabItem).Name as string;
switch (tabItem)
{
case "UploadTab":
if (UploadInstance == null)
{
UploadInstance = new UploadInstance();
}
UploadTabPanel.Child = UploadInstance;
break;
case "DownloadTab":
if (DownloadInstance == null)
{
DownloadInstance = new DownloadInstance();
}
DownloadTabPanel.Child = DownloadInstance;
break;
}
}
catch (System.Exception ex) { }
}

Answer 2

I ended up to the answer myself. I was confused about the view binding in the xaml code. I figured it out simply with this :
View :
<TabControl ItemsSource="{Binding Views}">
<TabControl.ItemTemplate >
<!-- header template -->
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<!--content template-->
<DataTemplate>
<views:ExportView/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
ViewModel :
public sealed class IndexMainViewModel : ViewModelBase
{
private ObservableCollection<TabItem> _views;
public ObservableCollection<TabItem> Views
{
get { return _views; }
set
{
_views = value;
RaisePropertyChanged(() => Views);
}
}
public IndexMainViewModel()
{
_views = new ObservableCollection<TabItem>();
_views.Add(new TabItem { Header = "Export", Content = new ExportViewModel()});
_views.Add(new TabItem { Header = "Import", Content = new ImportViewModel()});
}
}
I also created a TabItem class with a ViewModelBase object (MVVM Light class object). This observable collection of views can be displayed if you don't miss the namespace <views:ExportView/> in the xaml code.