Question

我有一个TabControl，其中有几个TabItem。在每个TabItem中，都有许多按钮。一个tabItem代表一个房间，房间里有几张桌子（按钮）

我绑定了一个TabItem，但是我不确定如何在TabControl中绑定TabItem的列表。

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);
        }

    }

}

Answer 1

您希望将TabControl的ItemSource绑定到您的集合以生成选项卡。像这样：

    <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>

如何将TabControl与TabItems的集合绑定

1 个答案: