Элементы управления в WPF. TabControl и работа с вкладками

При разработке интерфейса с большим количеством различных элементов управления часто, для экономии пространства, распределяют различные элементы на отдельных вкладках, группирую эти элементы, также, как и в случае с контейнерами, по смыслу. Для этого в WPF используется специальный элемент управления — TabControl, который используется как контейнер вкладок, а каждая отдельная вкладка, представляется объектом типа TabItem.

TabControl и работа с вкладками

Элемент управления TabControl предоставляет нам следующие свойства для работы с вкладками элементов:

Каждая вкладка представляет собой объект класса TabItem, который, в свою очередь, является наследником класса HeaderedContentControl, свойства которого мы рассматривали в этой части.

Рассмотрим применение TabControl на следующем примере:

<TabControl>
    <TabItem Header="ASP.NET">
        <TabItem.Content>
            <StackPanel>
                <CheckBox Content="Minimal API"></CheckBox>
                <CheckBox Content="Web API"></CheckBox>
                <CheckBox Content="MVC"></CheckBox>
            </StackPanel>
        </TabItem.Content>
    </TabItem>
    <TabItem Header="EF Core">
        <TabItem.Content>
            <StackPanel>
                <CheckBox Content="MySQL"></CheckBox>
                <CheckBox Content="SQLite"></CheckBox>
                <CheckBox Content="Microsoft SQL"></CheckBox>
            </StackPanel>
        </TabItem.Content>
    </TabItem>
    <TabItem Header="Языки программирования">
        <TabItem.Content>
            <StackPanel>
                <CheckBox Content="C#"></CheckBox>
                <CheckBox Content="F#"></CheckBox>
                <CheckBox Content="Iron Python"></CheckBox>
            </StackPanel>
        </TabItem.Content>
    </TabItem>
</TabControl>

Обратите внимание на то, что каждый элемент TabItem может содержать только один элемент содержимого, поэтому, чтобы разместить на каждой вкладке по три элемента CheckBox, мы помещаем их внутрь контейнера StackPanel. 

По умолчанию, вкладки располагаются сверху, однако мы можем изменить их положение, используя свойство TabStripPlacement

<TabControl TabStripPlacement="Left">
   ....
</TabControl>

Теперь внешний вид элемента будет следующий:

Отслеживание активной вкладки TabControl

Элемент TabControl наследуется от абстрактного класса Selector, который позволяет выбирать элементы содержимого. Об этом классе, его свойствах и событиях мы подробно поговорим, когда будем рассматривать работу со списками. В этой же части я лишь продемонстрирую то, как можно отслеживать активную вкладку в TabControl, используя обработчик события

<TextBlock x:Name="page" FontSize="16" FontWeight="Bold"></TextBlock>
<TabControl  SelectionChanged="TabControl_SelectionChanged">
    ...
</TabControl>

В TextBlock мы будем выводить имя текущей вкладки. У элемента TabControl определен обработчик события SelectionChanged:

private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    page.Text = ((e.Source as TabControl).SelectedItem as TabItem).Header.ToString();
}

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

Итого

Элемент TabControl позволяет размещать элементу управления на отдельных вкладках и, при этом, в каждый момент времени может быть активна только одна вкладка. Для программного отслеживания активной вкладки мы можем использовать обработчик события SelectionChanged