添加具有数据网格控件的动态选项卡项

Question

我在 wpf 应用程序中有选项卡控件。我想添加具有数据网格控件的动态选项卡项？任何解决方案。提前致谢。

Answer 1

请尝试下一个解决方案：

Xaml 代码（如果需要，只需取消注释 gridview 代码）：

<Window x:Class="TabControlSOHelpAttempt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tabControlSoHelpAttempt="clr-namespace:TabControlSOHelpAttempt"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <tabControlSoHelpAttempt:TabControlViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <TabControl Grid.Row="0" ItemsSource="{Binding Customers}" SelectedItem="{Binding SelectedCustomer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate DataType="{x:Type tabControlSoHelpAttempt:Customer}">
                            <TextBlock>
                                <Run Text="Customer:"></Run>
                                <Run Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"></Run>
                            </TextBlock>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate DataType="{x:Type tabControlSoHelpAttempt:Customer}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <TextBox Grid.Row="0" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>
                                <!--<ListView Grid.Row="1" ItemsSource="{Binding CustomerDataCollection}">
                                    <ListView.View>
                                        <GridView>
                                            <GridViewColumn Header="Book Name" DisplayMemberBinding="{Binding BookName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100"/>
                                            <GridViewColumn Header="Keeping From" DisplayMemberBinding="{Binding KeepingFrom, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100"/>
                                        </GridView>
                                    </ListView.View>
                                </ListView>-->
                                <DataGrid Grid.Row="1" ItemsSource="{Binding CustomerDataCollection}" AutoGenerateColumns="False">
                                    <DataGrid.Columns>
                                        <DataGridTextColumn Header="Book Name" Binding="{Binding BookName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"></DataGridTextColumn>
                                        <DataGridTextColumn Header="Keeping From" Binding="{Binding KeepingFrom, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"></DataGridTextColumn>
                                    </DataGrid.Columns>
                                </DataGrid>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" VerticalAlignment="Bottom" Command="{Binding RemoveCustomer}">Remove Customer</Button>
        <Button Grid.Column="1" VerticalAlignment="Bottom" Command="{Binding AddCustomer}">Add Customer</Button></Grid>
</Grid></Window>

查看型号和机型：

    public class TabControlViewModel:BaseObservableObject
{
    private ICommand _addCommand;
    private Customer _selectedCustomer;
    private ICommand _removeCommand;

    public TabControlViewModel()
    {
        //here you can inject a model which will be able 
        //to support the initial data for the Customers colection,
        //and will inform user if a customer was added or removed.
        //On each model changes you can add a new custome object into Customers collection, 
        //since this collection is ObservableCollection, UI will be updated imidiatelly
        Customers = new ObservableCollection<Customer>
        {
            new Customer
            {
                Name = "John",
                CustomerDataCollection = new ObservableCollection<CustomerData>
                {
                    new CustomerData
                    {
                        BookName = "Uncle Vania",
                        KeepingFrom = DateTime.Today,
                    },
                    new CustomerData
                    {
                        BookName = "Anna Karenine",
                        KeepingFrom = DateTime.Today,
                    }
                }
            },
            new Customer
            {
                Name = "Tom",
                CustomerDataCollection = new ObservableCollection<CustomerData>
                {
                    new CustomerData
                    {
                        BookName = "War and Peace",
                        KeepingFrom = DateTime.Today,
                    },
                    new CustomerData
                    {
                        BookName = "Alice's Adventures in Wonderland",
                        KeepingFrom = DateTime.Today,
                    }
                }
            },


        };
    }
    public ObservableCollection<Customer> Customers { get; set; }

    public ICommand AddCustomer
    {
        get { return _addCommand ?? (_addCommand = new RelayCommand(AddCommandMethod)); }
    }

    private void AddCommandMethod()
    {
        Customers.Add(new Customer());
        SelectedCustomer = Customers.LastOrDefault();
    }

    public ICommand RemoveCustomer
    {
        get { return _removeCommand ?? (_removeCommand = new RelayCommand(RemoveCommandMethod)); }
    }

    private void RemoveCommandMethod()
    {
        if(SelectedCustomer == null) return;
        Customers.Remove(SelectedCustomer);
        SelectedCustomer = Customers.LastOrDefault();
    }

    public Customer SelectedCustomer
    {
        get { return _selectedCustomer; }
        set
        {
            _selectedCustomer = value;
            OnPropertyChanged();
        }
    }
}

public class Customer:BaseObservableObject
{
    public Customer()
    {
        Name = "Enter Customer Name";
        CustomerDataCollection = new ObservableCollection<CustomerData>();
    }

    private string _name;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public ObservableCollection<CustomerData> CustomerDataCollection { get; set; }
}

public class CustomerData:BaseObservableObject
{
    private string _bookName;
    private DateTime _qty;

    public string BookName
    {
        get { return _bookName; }
        set
        {
            _bookName = value;
            OnPropertyChanged();
        }
    }

    public DateTime KeepingFrom
    {
        get { return _qty; }
        set
        {
            _qty = value;
            OnPropertyChanged();
        }
    }
}

如果代码有问题，我很乐意提供帮助，请告诉我。

此致。

添加具有数据网格控件的动态选项卡项

add dynamic Tab Item having data grid control

wpf

tabcontrol