Это вряд ли ответит на ваш вопрос, ибо я показываю то, как это должно быть и в каком направление вам стоит следовать.
И так, для начала давайте взглянем на ваш код и выпишем ряд проблемных мест:
Вы храните в контролах данные, о которых им знать совсем не обязательно. Контролы - это View, то есть то, что взаимодействует с клиентом. Что им надо знать для успешной работы? Ну, наверно цвет, размер, положение, стиль и все, что связано с отображением. Все, остальное вы не должны хранить в контролах. К примеру вы в Tag
храните индекс, зачем это знать контролу?
Вы работаете с контролами через код. Это в каком то смысли допустимо, но вы тем самым делаете много лишней работы, которая не должна вас беспокоить. Вот представьте, что у вас нет интерфейса вовсе, или через некоторое время вы решили переписать ваш проект и сделать из него к примеру консольное приложение, что тогда? Будете делать новый проект, копировать туда логику, переписывать ее для работы с консолью? А что, если мы эту логику изначально отвяжем от интерфейса, сделаем универсальной, то нам бы не пришлось переписывать проект, ведь достаточно было бы подключить новый интерфейс и все.
Frame
- Он имеет в себе много лишнего и не позволяет сделать многое. Попробуйте например изменить контент основного фрейма через дочерний фрейм. У вас это может и получится, но с большим трудом.
Исходя из этого, я вам очень сильно советую начать разрабатывать проект хотя бы с использованием привязок, ибо это основное "оружие" WPF и без них, ваш проект теряет многое, включая скорость в работе.
Теперь давайте напишем небольшой проект по правилам MVVM, который будет иметь следующее:
- Основную страницу с вкладками.
- Возможность закрывать вкладки.
- Возможность задать контент нужной вкладки.
Первым делом определимся, что такое MVVM:
В двух словах, это некий подход, который разделяет ваш код на некие слои, где каждый слой отвечает на что-то одно:
- Model - Источник данных. Допустим у вас есть сайт, который имеет API методы для взаимодействия с его данными. Вот работа с этим API, получение данных, отправка данных, это все и будет Model.
- View - Это пользовательский интерфейс. Этот слой отвечает только за отображение. Также хочу заметить, что данный слой не должен знать совершенно нечего о других слоях.
- ViewModel - некий связующий слой, который формирует данные для отображения. К примеру Model слой содержит в себе имя человека, его id и возраст. Зачем нам отдавать пользователю ID, если это по сути внутренняя информация (как пример)? Вот мы и делаем ViewModel пользователя, только с его именем и возрастом, делаем методы, которые помогут нам это отобразить правильно и все, остальная логика в Model слое.
Теперь мы можем начать разрабатывать проект:
- Создадим для удобства папку
ViewModel
- В созданной папке сделаем класс
MainViewModel
- это будет наш основной класс, к которому мы привяжем View слой.
- Далее заходим в
App.xaml
и удаляем там строчку StartupUri="MainWindow.xaml"
Заходим в App.xaml.cs
и переопределяем метод OnStartup
, в котором инициализируем MainViewModel
и нужное нам окно:
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
new MainWindow { DataContext = new MainViewModel() }.Show();
}
Вы спросите "А зачем это?" и на этот вопрос я оставлю вам эту ссылку.
- Создадим класс
TabViewModel
- это будет ViewModel одной вкладки.
В этом классе сделаем необходимые свойства (помним, что привязка возможна только к публичным свойствам!). Что нам надо? Заголовок вкладки и наверно ее контент, также для удобства переопределим конструктор:
class TabViewModel
{
public TabViewModel(string title, object content = default)
=> (Title, Content) = (title, content);
public string Title { get; set; }
public object Content { get; set; }
}
Теперь нам надо в главной VM сделать коллекцию этих вкладок. Тут стоит сразу подумать, а будут ли у нас обновляться вкладки в будущем? Если да, то нам нужна коллекция, которая имеет реализованный интерфейс INotifyCollectionChanged
, без него вы не будете видеть изменения в View слое. Из готовых решений есть ObservableCollection<T>
или BindingList<T>
. Если изменения не важны, то можете использовать что угодно.
class MainViewModel
{
public ObservableCollection<TabViewModel> Tabs { get; } = new ObservableCollection<TabViewModel>
{
new TabViewModel("Вкладка 1"),
new TabViewModel("Вкладка 2"),
new TabViewModel("Вкладка 3")
};
}
Ну и остается нам это все привязать. Делаем нужный вид вкладок и привязываем их к коллекции:
<TabControl ItemsSource="{Binding Tabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
Все, запускаем проект и видим там 3 вкладки из коллекции с пустым контентом:

Заметьте, весь код формирования вкладок успешно может работать без интерфейса, мы не используем фрейм и мы разместили все по своим местам.
Теперь давайте отобразим во вкладках разное содержимое:
Делать будем по данному примеру.
Создадим в директории ViewModel
новый класс, назовем его к примеру FirstPageViewModel
, данный класс пусть содержит всего 1 свойство, его текст:
class FirstPageViewModel
{
public string Text { get; } = "Первая страница";
}
Далее создадим новую директорию, которую назовем View
.
В эту директорию мы добавим новый "Пользовательский элемент управления", который назовем просто, FirstPage
. Этой странице задаем нужный дизайн и я также отображу текст, который содержится в VM слое:
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="{Binding Text}"
FontSize="30"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
Теперь нам надо это все объединить, сделаем это в главном окне:
Добавляем в самом верху ссылки на VM и V директории (namespace'ы тут должны быть ваши, даю как пример того, что должно быть):
xmlns:vm="clr-namespace:WPFApp.ViewModel"
xmlns:v="clr-namespace:WPFApp.View"
Чуть дописываем TabControl
, добавляя ему ресурсы (они по сути могут быть где угодно, но если нам эти страницы нужны только для этого контрола, то задаем ресурсы ему):
<TabControl.Resources>
<DataTemplate DataType="{x:Type vm:FirstPageViewModel}">
<v:FirstPage/>
</DataTemplate>
</TabControl.Resources>
Тут все просто, мы при помощи DataType
указываем тип объекта и внутри DataTemplate
задаем нужный вид для указанного типа.
Ну и теперь зададим например первой вкладке нужный контент (помним, что мы классу TabViewModel
сделали свойство с контентом):
new TabViewModel("Вкладка 1", new FirstPageViewModel()),
Запускаем и видим, что первая вкладка изменила свой вид:

Таким образом мы имеем приложение с вкладками, где каждая вкладка может иметь свой контент, без фрейма!
Ну и последнее, закрытие вкладки:
Что такое закрытие? Это по сути удаление из списка объекта. Но как нам удалить объект из коллекции, если мы не можем по правилам MVVM подписываться на события кнопки и обращаться к контролам? А все просто, тут на помощь приходят события и команды!
Создадим класс, который реализует нам интерфейс ICommand
. Данных реализаций в интернете полно, я возьму эту, ибо нам достаточно только обработать удобно команду, не более:
public class RelayCommand : ICommand
{
private Action action;
public RelayCommand(Action action) => this.action = action;
public bool CanExecute(object parameter) => true;
#pragma warning disable CS0067
public event EventHandler CanExecuteChanged;
#pragma warning restore CS0067
public void Execute(object parameter) => action();
}
Добавим в TabViewModel
новую команду, которая будет оповещать всех подписчиков о том, что вкладка закрывается:
class TabViewModel
{
public TabViewModel(string title, object content = default)
{
(Title, Content) = (title, content);
CloseCommand = new RelayCommand(Close);
}
public event Action<TabViewModel> OnClose;
public ICommand CloseCommand { get; }
public string Title { get; set; }
public object Content { get; set; }
void Close() => OnClose?.Invoke(this);
}
Тут смотрите что происходит. При клике на некую кнопку (о ней далее), которая будет привязана к CloseCommand
будет вызываться метод Close()
, этот метод в свою очередь оповещает всех подписчиков на событие OnClose
о том, что данная вкладка нуждается в закрытие.
Теперь у нас есть два пути. 1. Это при инициализации TabViewModel
самим делать подписку. 2. Мы можем это немного автоматизировать. Давайте сделаем 2-е. Чуть перепишем MainViewModel
(а точнее инициализацию коллекции вкладок):
class MainViewModel
{
public MainViewModel()
{
Tabs.CollectionChanged += OnTabsChanged;
Tabs.Add(new TabViewModel("Вкладка 1", new FirstPageViewModel()));
Tabs.Add(new TabViewModel("Вкладка 2"));
Tabs.Add(new TabViewModel("Вкладка 3"));
}
public ObservableCollection<TabViewModel> Tabs { get; } = new ObservableCollection<TabViewModel>();
private void OnTabsChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.OldItems != null)
{
foreach (TabViewModel item in e.OldItems)
item.OnClose -= CloseTab;
}
if (e.NewItems != null)
{
foreach (TabViewModel item in e.NewItems)
item.OnClose += CloseTab;
}
}
void CloseTab(TabViewModel tab) => Tabs.Remove(tab);
}
Тут мы перенесли добавление вкладок в конструктор, а также добавили подписались на событие CollectionChanged
этой коллекции. Данное событие происходит в тот момент, когда туда добавляется/удаляется что либо. При добавление новой вкладки, мы подписываемся на его событие закрытия, а при удаление наоборот, отписываемся.
О данном подходе я писал здесь.
Осталось нам с вами сделать кнопку закрытия в View слое, дописываем ее в TabControl.ItemTemplate
:
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}"/>
<Button Content="x" Command="{Binding CloseCommand}"
Background="Transparent" BorderThickness="0"
Margin="3 -2 0 0"
Cursor="Hand"/>
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
Тут основную роль играет Command
, идет привязка к созданному свойству в TabViewModel
.
Все, запускаем и радуемся результату:

Пара дополнений:
- Если ваше свойство может измениться во время работы приложения (например контент у вкладки), то не забудьте реализовать
INotifyPropertyChanged
, ибо без него вы не получите изменений в интерфейсе.
- Если вам надо открыть программно нужную вкладку, то сделайте свойство (с INPC) рядом с коллекцией, которое будет содержать в себе текущий открытый
TabViewModel
и привяжите его к TabControl
(прим: SelectedItem="{Binding SelectedItemProperty}"
).
- MVVM - это некие правила, которые сделают ваш проект более продуктивным и удобным. Следовать этому подходу, решать вам.
В общем удачи в изучении C#!