Silverlight: Adding TabItems to TabControl dynamically with a standard ContentTemplate for all tabs

Question

I would like to add TabItems to a TabControl dynamically with a standard ContentTemplate comprising of a grid and few other input controls like textbox and button. Can someone pls help me achieve this?

Also, if I try to load data from a WCF service asynchronously to the grid, there will definitely be a time lag. So how do I exactly bind the data to the right grid even if the selected tab is different? (Issue here is how do I find the right grid control to bind)

Answer 1

Use this derived MyTabControl class: http://pastebin.mozilla.org/825006

Xaml:

<my:MyTabControl MyItemsSource="{Binding Pages}" MySelectedItem="{Binding CurrentPage, Mode=TwoWay}">
  <my:MyTabControl.TabItemTemplate>
    <DataTemplate>
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Height="Auto" />
            <ColumnDefinition Height="Auto" />
          </Grid.ColumnDefinitions>
          <TextBox Text="{Binding SomeText1, Mode=TwoWay}"/>
          <Button Content="Button" Command="{Binding SomeCommand}" Grid.Column="1"/>
        </Grid>
    </DataTemplate>
  </my:MyTabControl.TabItemTemplate>
  <my:MyTabControl.TabHeaderItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Title}" />
    </DataTemplate>
  </my:MyTabControl.TabHeaderItemTemplate>
</my:MyTabControl>

ViewModel:

public class TabItemModel : INotifyPropertyChanged
{
    public string Title {get; set;}
    private string someText1;
    public string SomeText1
    {
        get { return someText1; }
        set
        {
            someText1 = value;
            OnPropertyChanged("SomeText1");
        }
    }
    public ICommand SomeCommand {get; set;}
    //...
}

public class MainViewModel
{
    public MainViewModel
    {
        this.Pages = new ObservableCollection<TabItemModel>();
        this.Pages.Add(new TabItemModel{Title="Title1", SomeText1="Text1"});
        this.Pages.Add(new TabItemModel{Title="Title2", SomeText1="Text2"});
    }

    public ObservableCollection<TabItemModel> Pages {get; set;}
    //selected tab is different
    public TabItemModel CurrentPage {get; set;}

    public void SomeDataFromService()
    {
        //bind the data to the right grid
        var ti = this.Pages.FirstOrDefault(p => p.Title == "Title2");
        if(ti != null)
            ti.SomeText1 = "Text from service";
    }
}

And finally:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = new MainViewModel();
    }
}