wpf tabcontrol set different text to textblock in content template for all tabs on window load from code behind using C#

Question

I am working on a WPF application where I want to use TabControl with ItemTemplate and ContentTemplate. I have a textblock in the ItemTemplate (for Header) and another textblock in the ContentTemplate(for Content). I am binding a list to TabControl in constructor from code behind. In Window loaded event, I want to loop over all tab items, access textblock in content template (Name="txt1") for each tab and set different text to textblock in each tab. Below is my XAML:

<TabControl x:Name="mainTabs">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <TextBlock Name="txt1"></TextBlock>
            </DataTemplate>
        </TabControl.ContentTemplate>
</TabControl>

Code behind:

public MainWindow()
        {
            InitializeComponent();
// Read tabs data from xml file
            List<MyTab> lst = ReadTabsFromXml();
            mainTabs.ItemsSource = lst;
}

public class MyTab
    {
        public string Header { get;set; }
        public string Content { get; set; }
    }

Please help me with this.

Answer 1

You don't need to do that. Just store your MyTab classes in an ObservableCollection<MyTab> instead of a List<MyTab>, and set the ItemsSource to the collection. The TabControl will update automatically.

EDIT: I've updated the answer, with a solution regarding using Gecko browser. You can wrap the Gecko browser in a UserControl that you use in each TabItem. Also note that a TabControl recreates the the TabItem every time you switch tabs, which also causes the webpage to reload. You can get around this by using e.g. TabControEx instead of TabControl (https://stackoverflow.com/a/9802346/6839733). But this is not related to the Gecko browser or to binding URL's from a collection - it's just how the TabControl works.

---

MainWindow.xaml:

<TabControl x:Name="MyTabControl">
    <TabControl.Resources>
        <DataTemplate x:Key="MyTabContentTemplate" x:Shared="False">
            <local:GeckoBrowser Uri="{Binding Path=Uri}" />
        </DataTemplate>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="ContentTemplate" Value="{StaticResource MyTabContentTemplate}" />
        </Style>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

---

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public ObservableCollection<WebPageInfo> WebPageCollection { get; set; }
    public MainWindow()
    {
        InitializeComponent();

        // Read tabs data from xml file
        //lst = ReadTabsFromXml();
        WebPageCollection = new ObservableCollection<WebPageInfo>();
        WebPageCollection.Add(new WebPageInfo() { Header = "Tab1", Uri = "https://www.amazon.com/" });
        WebPageCollection.Add(new WebPageInfo() { Header = "Tab2", Uri = "https://www.cnn.com/" });
        WebPageCollection.Add(new WebPageInfo() { Header = "Tab3", Uri = "https://www.microsoft.com/" });
        WebPageCollection.Add(new WebPageInfo() { Header = "Tab4", Uri = "https://www.facebook.com/" });

        MyTabControl.ItemsSource = WebPageCollection;
        MyTabControl.SelectedIndex = 0;
    }

    public class WebPageInfo
    {
        public string Header { get; set; }
        public string Uri { get; set; }
    }

}

---

GeckoBrowser.xaml:

<UserControl x:Class="WpfApplication1.GeckoBrowser"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Border x:Name="MyBorder" Background="Black" Margin="0" />
</UserControl>

---

GeckoBrowser.xaml.cs:

public partial class GeckoBrowser : UserControl
{
    public static readonly DependencyProperty UriProperty =
        DependencyProperty.Register("Uri", typeof(string), typeof(GeckoBrowser), new FrameworkPropertyMetadata(null));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }

    public GeckoBrowser()
    {
        InitializeComponent();
        Xpcom.Initialize("Firefox");
        Loaded += GeckoBrowser_Loaded;
    }

    private void GeckoBrowser_Loaded(object sender, RoutedEventArgs e)
    {
        WindowsFormsHost host = new WindowsFormsHost();
        GeckoWebBrowser browser = new GeckoWebBrowser();
        browser.Navigate(Uri);
        host.Child = browser;
        MyBorder.Child = host;
    }
}