Can I have multiple instances of the same UserControl in 1 application?

Question

I am creating a text editor type application. I can open several editors through tabs. In my first attempt, I used simple TextBoxes to edit text. Everything worked fine. Then I created an UserControlencapsulating text field + to manipulate the text, for example. bold / italics, etc. I found out that when I open different tabs, they all contain the same content. eg. In Tab1, enter "hello world", which will appear in all tabs. There is a “lack of separation”, even if they are in different tabs

<Window.Resources>
    <DataTemplate DataType="{x:Type vm:EditorTabViewModel}">
        <me:MarkdownEditor />
    </DataTemplate>
</Window.Resources>

Then, as a test, I tried the text box and usercontrol together to find out if I have the same problem.

<Window.Resources>
    <DataTemplate DataType="{x:Type vm:EditorTabViewModel}">
        <StackPanel>
            <me:MarkdownEditor Text="{Binding Content}" Height="360" />
            <TextBox Text="{Binding Content}" Height="360" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>

. , , MarkdownEditor "System.Windows.Controls.Grid" , Grid . TextBox , . UserControl .

XAML UserControl

<UserControl x:Class="MarkdownEditMVVM.Controls.MarkdownEditor.MarkdownEditor" ...>
    <Grid>
        <ToolBar Grid.Row="0">
            <Button Command="{x:Static local:Commands.PreviewCommand}">
                <Image Source="../../Images/16/zoom.png" />
            </Button>
            <!-- more buttons -->
        </ToolBar>
        <TextBox Grid.Row="1" x:Name="txtEditor" AcceptsReturn="True" Text="{Binding Path=Text, UpdateSourceTrigger=PropertyChanged}" />
    </Grid>
</UserControl>

Update

, - , , , ObservableCollection<TabViewModel>

, TabViewModel

public class TabViewModel {}

public partial class Window1 : Window
{
    protected ObservableCollection<TabViewModel> _tabs;
    protected ICollectionView _tabsCollectionView;

    public Window1()
    {
        InitializeComponent();
        this.DataContext = this;
        _tabs = new ObservableCollection<TabViewModel>();
        _tabs.Add(new TabViewModel());
        _tabs.Add(new TabViewModel());
        _tabsCollectionView = CollectionViewSource.GetDefaultView(_tabs);
    }

    public ICollectionView Tabs
    {
        get { return _tabsCollectionView; }            
    }
}

XAML

<TabControl ItemsSource="{Binding Tabs}" IsSynchronizedWithCurrentItem="True">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBox />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Visual Studio, @mediafire, . , TabViewModel

2

, , TabViewModel

<TabControl Grid.Column="1">
    <TabItem Header="Tab 1">
        <TextBox />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBox  />
    </TabItem>
</TabControl>

. mediafire

3

. . ...

<TabControl Grid.Column="2" ItemsSource="{Binding Tabs}" IsSynchronizedWithCurrentItem="True">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TabTitle}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Text}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

@mediafire

4

,

• 0, 0: TextBox, ObservableCollection<TabViewModel>. TextBox. .
• 0, 1: TextBox, Normal TabItems, , ObservableCollection<TabViewModel>. TextBox. .
• 0, 2: TextBox, ObservableCollection<TabViewModel>. TextBox. .
• 1, 0: UserControl, ObservableCollection<TabViewModel>. UserControl. .
• 1, 2: UserControl, ObservableCollection<TabViewModel>. UserControl. . .

@mediafire

Answer 1

mediafire , :

• Text -

• ContentTemplate TabControl . , UserControl.DataContext DataContext

   <DataTemplate>
        <local:UserControl1 />
   </DataTemplate>
  

• UserControl . Text UserControl.DataContext.Text.

  <TextBox Text="{Binding Text}" />
  

• this.DataContext = this UserControl1 - , , DataContext .

---

UserControl - .

, "System.Windows.Controls.Grid", , UserControl Text this.DataContext.Text this.Text - UserControl.

, TextBox :

<TextBox Grid.Row="1" x:Name="txtEditor" AcceptsReturn="True"
Text="{Binding Path=Text,
        UpdateSourceTrigger=PropertyChanged,
        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type me:MarkDownEditor}}}" />

. me, , , MarkDownEditor

Answer 2

Writer WPF Application Framework (WAF). , , MVVM.