the user control inside a tabcontrol is having same information in all tabs even other tabs has different viewmodel

See more:

WPF

TabControl

I have a TabContorl and I am adding tabitem dynamically. I have bind datatemplate to some viewmodel and view is loaded as defined in datatemplate.

<datatemplate datatype="{x:Type viewmodels:ItemViewModel}">
<views:customerorderview xmlns:views="#unknown">

<datatemplate datatype="{x:Type viewmodels:InvoiceGeneratorViewModel}">
<views:invoicegenerator xmlns:views="#unknown">

<datatemplate datatype="{x:Type viewmodels:OrderDetailsViewModel}">
<views:orderdetailsview xmlns:views="#unknown">


if i use controls directly in customerorderview then it works fine. It means if i switch the tab all values are loaded accordingly but does not work properly when if i use another usercontrol insite customerview user control. I have created once user control have one textbox, button and a popup contorl. When i click on button the popup opens and remains even if swich the tab. If textbox value is change the value is also changed for all tabs. It looks one view is serving all the tabs. I could not understand how to handle it.

Below is the user control which i am using inside customer

<usercontrol x:class="OrderManagement.Views.ProductSelectionView" xmlns:x="#unknown">
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<grid>
<grid.rowdefinitions>
<rowdefinition height="35">


<grid.columndefinitions>
<columndefinition> <columndefinition width="30">
<textbox x:name="txtProduct" grid.row="0" grid.column="0">
<Button x:Name="btnSearch" Content="S" Click="OnSearchClick" Grid.Row="0" Grid.Column="1" Margin="5"/>
<popup x:name="popup" placementtarget="{Binding ElementName=btnSearch}" placement="Bottom">
Width="300" Height="300" Margin="5">
<border borderbrush="Black" borderthickness="2" removed="AliceBlue">
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition height="35">

<datagrid x:name="dataGrid" autogeneratecolumns="False" grid.row="0" grid.columnspan="2">
IsReadOnly="False" CanUserAddRows="False" CanUserDeleteRows="False">
<datagrid.columns>
<datagridcheckboxcolumn binding="{Binding IsChecked}" isreadonly="False">
<datagridtextcolumn header="Product Name" binding="{Binding Name}">
<datagridtextcolumn header="Quantity In Stock" binding="{Binding QuantityInStock}">


<wrappanel grid.row="1" grid.columnspan="2" orientation="Horizontal" verticalalignment="Center" horizontalalignment="Right">
<Button Content="OK" Click="OnOKClick" Width="80"/>
<Button Content="Cancel" Click="OnCancelClick" Width="80" Margin="20,0,0,0"/>








Tabcontrol virtualize the data as per its datacontext but popup and text value in productselection control remains the same for all tabs. opens the popup but it remains for all the tab.

Let me know if how it can be done or what is the mistake i am doing