add dynamic Tab Item having data grid control - wpf

Question

I have tab control In wpf Application. I want to add dynamic Tab Item having data grid control ? Any Solutions. Thanks In Advance.

Answer 1

please try the next solution:
Xaml Code (just uncomment gridview code if needed):
<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>
View Models and models:
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();
}
}
}
I'll be glad to help if there will be problems with the code, just let me know about this.
Regards.