Question

Well, I have been scratching my head for some time now. But failed to find solution to my problem. What I have is a MainViewModel with and ObservableCollection TabItems. The MainViewModel is set as DataContext for the MainView (User Control) which in turn hosts the TabControl. The tabcontrol is bound to TabItems collection. The Content of the tabcontrol will be ReportItems User Control.

This setup is basically for report for reporting UI for SSRS. The first tab contains a list of Reports selecting which would show a few listboxes from where the user would select the Report Parameters. Not after selecting parameters, the user click a button which in turn generates a report and adds a tab to the tab control with the reporthost.

The reason I am trying to select the report from a tab and not the Main View is that there are a lot of parameters to be selected and if I add the listboxes to the MainView, the space left for the tabcontrol would be less and the user would need to scroll down to view the reports.

I am not sure if my design is flawed but I wanted to figure out a way to add the new ReportItemViewModel to be added to the TabItem collection. That means allowing a child tab to add a sibling by sending a ReportItemViewModel object to MainViewModel and add to the colection.

I thought of using a static Collection to do so but that would not call my OnPropertyChange method. Also, having a static method in the MainViewModel does not help as it would not be able to add the object to the collection since the collection is not static.

I am not posting any code here since I am stuck at how to begin itself. I looked at another post here but could not figure out how to use it.

Sorry for long description, Just wanted to make the question clear.

I am open to any suggestion, also if I can get a better design. I am desperate and any help would be appreciated.

Answer 1

Add an ICommand to your MainViewModel for adding a new item to your ObservableCollection, and use a RelativeSource binding to find the command from within the TabItem

So your MainViewModel would have

ObservableCollection<IViewModel> TabItems
IViewModel SelectedTabItem
ICommand AddTabCommand

where AddTabCommand basically does

void AddTab(IViewModel newItem)
{
    TabItems.Add(newItem);
    SelectedTabItem = newItem;
}

and your UI would look something along the lines of this

<DataTemplate DataType="{x:Type local:SelectReportViewModel}">
    <Grid>
        ...
        <!-- Use the CommandParameter property to pass specified ReportItemViewModel to open -->
        <Button Command="{Binding DataContext.AddTabCommand, 
                RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" />
        ...
    </Grid>
</DataTemplate>

<TabControl ItemsSource="{Binding TabItems}" />

Another alternative is to use some kind of event system, such as MVVM Light’s Messenger or Microsoft Prism’s EventAggregator, to broadcast/subscribe to events.

Your MainViewModel would subscribe to AddTabEvents, while your SelectReportViewModel would broadcast those events anytime a new tab should be added. I have a brief summary on my blog article about communication between ViewModels if you’re interested.