WPF how to create tab items

Question

The number of tab items are not predetermined. I just want to create new tab items and then add new rectangles inside current items. I am generating new tab items(bellow is code) but how can I add rectangles in current tab?

var _FloorName = (from fn in db.floors select fn.floorname).ToList();

if (_FloorName.Count > 0)
{
    for (int i = 0; i < _FloorName.Count; i++)
    {
        tabControl1.Items.Add(_FloorName[i]);
    }
}

Answer 1

You should have a look at this article from Josh Smith -

Patterns - WPF Apps With The Model-View-ViewModel Design Pattern

This is one of the best articles explaining MVVM implementation, the sample application developed creates tabs at runtime and uses templates to display the internal contents. If you can go the same way you will have a very stable and expandable application.

Note: Code download available from the MSDN Code Gallery

Answer 2

If this is just adding some control, or draw something on Tab, cause it's not very clear from post, I would personally, strongly recommend to define a Template of TabItem in XAML, as it will save you a lot of "drawing fixes" time. If yuo have a Blender it will become even much easier.

EDIT

If you need some sample with binding and whatever, don't have on my hands now the code, but can provide you with a link to open source project. Have look how TabItems are managed there.

SvnRadar

Regards.

Answer 3

Here is one approach you could take:

• Add a Grid (or other container) to each TabItem when creating them
• Create a Rectangle, with the brush/dimensions you want
• Call tabControl1.SelectedContent, cast it to Grid (or your container type)
• Call grid.Children.Add(rectangle)

Here is a complete code sample (using copious code-behind).

MainWindow.xaml:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Margin="12">
        <TabControl Name="tabControl1" Height="250" />
        <Button Content="Add Rectangle" Click="Button_Click"
                Width="90" Height="25" Margin="5" />
    </StackPanel>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

public class Floor
{
    public Floor(string name = null)
    {
        this.Name = name;
    }

    public string Name { get; set; }
}

public class FakeDb
{
    public IEnumerable<Floor> Floors
    {
        get
        {
            return new List<Floor>()
            {
                new Floor("floor1"),
                new Floor("floor2"),
                new Floor("floor3"),
            };
        }
    }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        InitializeTabControl();
    }

    private void InitializeTabControl()
    {
        var db = new FakeDb();
        var floorNames = (from fn in db.Floors select fn.Name).ToList();

        foreach (string floorName in floorNames)
        {
            var item = new TabItem()
            {
                Header = floorName,
                Content = new Grid(),
            };
            tabControl1.Items.Add(item);
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var random = new Random();
        var rectangle = new Rectangle()
        {
            Stroke = Brushes.Black,
            Fill = Brushes.SkyBlue,
            Width = 50,
            Height = 75,
            Margin = new Thickness(
                left: random.NextDouble() * 300,
                top: random.NextDouble() * 150,
                right: 0,
                bottom: 0),
            HorizontalAlignment = HorizontalAlignment.Left,
            VerticalAlignment = VerticalAlignment.Top,
        };
        var grid = (Grid)tabControl1.SelectedContent;
        grid.Children.Add(rectangle);
    }
}