0

Как в TabControl-е правильно организовать работу вкладок и элементы внутри вкладок? Например 1 вкладка (TabItem1) работает с портом RS232 и имеет свои элементы настроек, управления и свойства. 2 вкладка (TabItem2) работает с портом USB и имеет свои элементы настроек, управления и свойства. При добавлении вкладки выбираешь из списка с каким портом работать и соответственно должна добавиться вкладка и в этой вкладке должны быть те элементы настроек, управления и свойства, которые принадлежат выбранному порту. Вот ссылка на рисунок https://www.dropbox.com/s/2widu5i5uvqtrxv/TabControl.jpg

2
  • 1
    @MAKSIM, может это поможет: habrahabr.ru/post/111105 Создайте для каждой вкладки свою модель представления, которую свяжете с соответствующим представлением (вкладкой). 30 мар 2014 в 18:23
  • @MAKSIM: Почитайте про MVVM. Никаких велосипедов не нужно, вся логика сводится к своевременному добавлению элемента в коллекцию ViewModel'ей, отвечающих за табы. (ViewModel — это и есть модель представления, упомянутая в комментарии @Pleshkov Ivan).
    – VladD
    30 мар 2014 в 21:14

1 ответ 1

3

Советую использовать MVVM-подход. Для этого вам нужно будет создать модели представления вкладок:

public abstract class TabVm : NotificationObject
{
    public string Header { get; }

    public TabVm(string header)
    {
        Header = header;
    }
}

public class Tab1Vm : TabVm
{
    public Tab1Vm()
        : base("Tab 1")
    {
    }
}

public class Tab2Vm : TabVm
{
    public Tab2Vm()
        : base("Tab 2")
    {
    }
}

NotificationObject - это класс, реализующий INotifyPropertyChanged. TabVm - базовая модель представления для всех вкладок. Tab1Vm и Tab2Vm - конкретные вкладки.

Далее определяем модель представления, которая будет управлять вкладками:

public class MainVm : NotificationObject
{
    public ObservableCollection<TabVm> Tabs
    {
        get { return _tabs ?? (_tabs = new ObservableCollection<TabVm>()); }
    }
    private ObservableCollection<TabVm> _tabs;

    public TabVm SelectedTab
    {
        get { return _selectedTab; }
        set { SetProperty(ref _selectedTab, value); }
    }
    private TabVm _selectedTab;

    public MainVm()
    {
        Tabs.Add(new Tab1Vm());
        Tabs.Add(new Tab2Vm());

        SelectedTab = Tabs.FirstOrDefault();
    }
}

Эта реализация ничем не управляет, а просто формирует перечень вкладок. Дале вы можете накрутить любую логику.

Ну и напоследок определяем представление:

<Window ...>
    <Window.DataContext>
        <vm:MainVm/>
    </Window.DataContext>
    <Window.Resources>
        <ResourceDictionary>
            <DataTemplate DataType="{x:Type vm:Tab1Vm}">
                <TextBlock Text="Tab 1 Content"/>
            </DataTemplate>
            <DataTemplate DataType="{x:Type vm:Tab2Vm}">
                <TextBlock Text="Tab 2 Content"/>
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <TabControl ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate DataType="{x:Type TabItem}">
                                <TextBlock Text="{Binding Header}"/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
        </TabControl>
    </Grid>
</Window>

Я определил шаблоны вкладок прямо внутри окна. Вы можете вынести их в отдельные файлы, либо определить свой DataTemplateSelector и воспользоваться им.

Еще можете использовать Ленту вместо TabControl'a.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.