How to bind a TabControl with a collection of TabItems

Question

I have a TabControl which has several TabItems. In each TabItem, there are a number of Buttons. A tabItem is stand for a room, and in the room there are several tables (Button)

I have bound one TabItem, but I am not sure how to bind lists of TabItems in a TabControl.

MainWindow:

 <TabControl Grid.Row="0" Name="tabTables" Margin="-1 -5 -1 -1"  Background="AliceBlue"  BorderBrush="White">
    <TabItem Visibility="Collapsed">
        <ItemsControl ItemsSource="{Binding TableCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas x:Name="canvas1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type vm:TableViewModel}">
                    <Button Uid="{Binding TableName}" ContentStringFormat="{Binding TableGuestCount}"  Style="{StaticResource ResourceKey=BtnTableEmpty}" Width="84" Height="90"  />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Path=TablePosX}" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=TablePosY}" />
                    <Setter Property="Tag" Value="{Binding Path=TableID}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </TabItem>
</TabControl>

TableAreaViewModel:

public class TableAreaViewModel:BaseViewModel
{
    public TableAreaViewModel()
    {
        TableCollection = new ObservableCollection<TableViewModel>();
    }
    public AreaViewModel Area { get; set; }
    public ObservableCollection<TableViewModel> TableCollection { get; set; 
    }

}

AreaViewModel:

public class AreaViewModel: BaseViewModel
{
    TableGrp _tbGrp = null;

    public AreaViewModel(TableGrp tbGrp)
    {
        _tbGrp = tbGrp;
    }
    public string GrpID { get { return _tbGrp.GrpID; } }
    public string GrpName { get { return _tbGrp.GrpName; } }
    }
}

TableViewModel:

public class TableViewModel : BaseViewModel
{
    private Table _table = null;
    public TableViewModel(Table tb)
    {
        _table = tb;
    }

    public string TableID
    {
        get { return _table.TableID; }
        set { _table.TableID = value; }
    }

    public string TableName
    {
        get { return _table.Name; }
        set { _table.Name = value; }
    }

    public string TableGuestCount
    {
        get
        {
            int customerCnt = _table.CustCount ?? 0;
            return string.Format("{0}/{1}", customerCnt, _table.MaxCount);
        }

    }

    public double TablePosX
    {
        get { return _table.ShowXValue ?? 10; }
        set { _table.ShowXValue = value; }
    }

    public double TablePosY
    {
        get { return _table.ShowYValue ?? 10; }
        set { _table.ShowYValue = value; }
    }

}

TableAreaListViewModel:

public class TableAreaListViewModel
{
    public TableAreaListViewModel()
    {
        TableAreaCollection = new ObservableCollection<TableAreaViewModel>();
        LoadTables();
    }
    public ObservableCollection<TableAreaViewModel> TableAreaCollection { get; set; }

    private void LoadTables()
    {
        TableManager mgr = new TableManager();
        var list = mgr.LoadTableAreas();

        foreach (var tb in list)
        {
            TableAreaViewModel ta = new TableAreaViewModel();
            ta.Area = new AreaViewModel(tb.TableGroup);
            foreach(var item in tb.Tables )
            {
                ta.TableCollection.Add(new TableViewModel(item));
            }
            TableAreaCollection.Add(ta);
        }

    }

}

Possible duplicate of [How do I bind a TabControl to a collection of ViewModels?](https://stackoverflow.com/questions/5650812/how-do-i-bind-a-tabcontrol-to-a-collection-of-viewmodels) — ASh, Aug 24 '18 at 08:24
But the content of TabItem still need to bind a collection of buttons — justinfly, Aug 24 '18 at 08:56
Can you help me a little bit with code? I cannot load the content of tabitems — justinfly, Aug 24 '18 at 09:22
How many tabs do you want to display and where do these come from? — mm8, Aug 24 '18 at 09:51

score 0 · Accepted Answer · answered Aug 24 '18 at 10:20

You would want to bind the ItemSource for the TabControl to you collection to generate the tabs. Something like this:

    <TabControl ItemsSource="{Binding TableAreaCollection}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding TableCollection}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas x:Name="canvas1"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type vm:TableViewModel}">
                            <Button Uid="{Binding TableName}" ContentStringFormat="{Binding TableGuestCount}"  Style="{StaticResource ResourceKey=BtnTableEmpty}" Width="84" Height="90"  />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="ContentPresenter">
                            <Setter Property="Canvas.Left" Value="{Binding Path=TablePosX}" />
                            <Setter Property="Canvas.Top" Value="{Binding Path=TablePosY}" />
                            <Setter Property="Tag" Value="{Binding Path=TableID}"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                </ItemsControl>
            </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>

Thank you for the code! But I found a problem, that searching through window, I can only get one canvas. Do you anything wrong? — justinfly, Aug 24 '18 at 12:56

How to bind a TabControl with a collection of TabItems

1 Answers1