Wpf tabitem как переключать с помощью combobox
Для создания вкладок в WPF, как и в WinForms, предназначен элемент TabControl, а отдельная вкладка представлена элементом TabItem:
Первая вкладка Вторая вкладка
Элемент TabItem является элементом управления содержимым, поэтому в него можно вложить другие элементы:
Смартфоны iPhone S6 LG G 4 Lumia 550 Планшеты
Класс TabItem наследуется от класса HeaderedContentControl, поэтому кроме свойства Content , определедяющее содержимое вкладки, имеет также свойство Header , которое определяет заголовок. И в этот заголовок мы можем вложить различное содержимое, как в примере выше.
И также, как и в случае с ListBoxItem и ComboBoxItem, мы можем вложить в TabControl и другие элементы, которые неявно образуют отдельные вкладки:
Первая вкладка Вторая вкладка Третья вкладка
Программное добавление вкладок
Допустим, у нас на форме есть TabControl:
Через код C# добавим в него вкладку:
// формируем содержимое вкладки в виде списка ListBox notesList = new ListBox(); notesList.Items.Add("Macbook Pro"); notesList.Items.Add("HP Pavilion 5478"); notesList.Items.Add("Acer LK-08"); // добавление вкладки products.Items.Add(new TabItem < Header = new TextBlock < Text = "Ноутбуки" >, // установка заголовка вкладки Content = notesList // установка содержимого вкладки >);
Wpf tabitem как переключать с помощью combobox
Кроме прямого добавления элементов в коллекцию Items компонентов ListBox и ComboBox мы также можем использовать механизм привязки данных.
Привязка данных в ListBox и ComboBox реализуется с помощью следующих свойств:
- DataSource : источник данных — какой-нибудь массив или коллекция объектов
- DisplayMember : свойство объекта, которое будет использоваться для отображения в ListBox / ComboBox
- ValueMember : свойство объекта, которое будет использоваться в качестве его значения
public partial class Form1 : Form < public Form1() < InitializeComponent(); Listphones = new List < new Phone < Name="Samsung Galaxy Ace 2", Year=2012>, new Phone < Name="Samsung Galaxy S4", Year=2013>, new Phone < Name="iPhone 6", Year=2014>, new Phone < Name="Microsoft Lumia 435", Year=2015>, new Phone < Name="Xiaomi Mi 5", Year=2015>>; listBox1.DataSource = phones; listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id"; listBox1.SelectedIndexChanged += listBox1_SelectedIndexChanged; > void listBox1_SelectedIndexChanged(object sender, EventArgs e) < // получаем id выделенного объекта int // получаем весь выделенный объект Phone phone = (Phone)listBox1.SelectedItem; MessageBox.Show(id.ToString() + ". " + phone.Name); >> class Phone < public int Id < get; set; >public string Name < get; set; >public int Year < get; set; >>
Итак, на форме у нас есть список ListBox с именем listBox1. В коде имеется класс Phone с тремя свойствами, объекты которого мы хотим выводить в список. В отличие от предыдущих тем эта задача сложнее, так как раньше мы выводили обычные строки, тут же у нас сложные объекты.
Для вывода используем механизм привязки. Сначала устанавливаем список телефонов в качестве источника данных:
listBox1.DataSource = phones;
Затем устанавливаем в качестве отображаемого свойства свойство Name класса Phone, а в качестве свойства значения — свойство Id:
listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id";
Значение отображаемого свойства мы затем увидим в списке. Оно будет представлять каждый отдельный объект Phone.
С помощью же свойства значения, которым является свойство Id, мы можем упростить работу с источником данных. В данном случае оно не играет большой роли. Но если бы мы использовали в качестве источника данных некоторый набор объектов из базы данных, то с помощью id нам было проще удалять, обновлять и взаимодействовать с базой данных.
И теперь если мы выделим какой-то объект, то свойство SelectedItem элементы ListBox будет содержать объект Phone, у которого мы можем получить значения свойств:
Phone phone = (Phone)listBox1.SelectedItem; string name = phone.Name;
А выделенное значение, то есть значение свойства Id выделенного телефона, будет находиться в свойстве SelectedValue .
И если мы запустим приложение, то увидим все отображаемые телефоны:
Все то же самое характерно и для элемента ComboBox. Пусть кроме ListBoxa на форме есть ComboBox:
public partial class Form1 : Form < public Form1() < InitializeComponent(); Listphones = new List < new Phone < Name="Samsung Galaxy Ace 2", Year=2012>, new Phone < Name="Samsung Galaxy S4", Year=2013>, new Phone < Name="iPhone 6", Year=2014>, new Phone < Name="Microsoft Lumia 435", Year=2015>, new Phone < Name="Xiaomi Mi 5", Year=2015>>; comboBox1.DataSource = phones; comboBox1.DisplayMember = "Name"; comboBox1.ValueMember = "Id"; comboBox1.SelectedIndexChanged += comboBox1_SelectedIndexChanged; listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id"; > void comboBox1_SelectedIndexChanged(object sender, EventArgs e) < Phone phone = (Phone)comboBox1.SelectedItem; listBox1.Items.Add(phone); >> class Phone < public int Id < get; set; >public string Name < get; set; >public int Year < get; set; >>
Здесь также для комбобокса устанавливается привязка, а также отображаемое свойство и свойство значения. Кроме того, здесь обрабатывается событие выбора элемента в комбобоксе так, чтобы выбранный элемент попадал в ListBox.
В отличие от ListBoxa ComboBox имеет три свойства для обработки выделенного объекта:
- SelectedItem : выбранный элемент
- SelectedValue : значение свойства значения, в данном случае свойство Id
- SelectedText : значение свойства отображение, в данном случае свойство Name класса Phone
WPF TabControl: размещение заголовков
Вкладки TabControl обычно размещаются в верхней части, и именно так располагаются TabControl по умолчанию в WPF:
Однако с помощью свойства TabStripPlacement, мы запросто можем изменить это:
TabStripPlacement можно установить в верхнее (Top), нижнее (Bottom) положение, слева (Left) или справа (Right). Но если выбрать слева или справа мы получим такой результат:
Лично я ожидал, что в этом случае вкладки будут в повернутом положении, так чтобы текст располагался вертикально, а не горизонтально, но TabControl в WPF так не делает. К счастью, мы можем сделать это сами, с помощью маленького хака:
Если вы еще не читали главы о шаблонах и стилях, вы можете слегка запутаться, но здесь мы используем стиль для элементов TabItem, в котором переопределяем HeaderTemplate и после этого поворачиваем вкладки. Вкладки слева мы повернули на 270 градусов — если вкладки поместить справа, нужно будет повернуть их на 90 градусов.
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
Модель содержимого WPF
Windows Presentation Foundation (WPF) — это презентационная платформа, которая предоставляет множество элементов и типов, схожих с элементами управления, основное предназначение которых — отображение различных типов содержимого. Чтобы определить, какой элемент управления использовать или от какого элемента управления выполнять наследование, вы должны понимать, какие виды объектов лучше всего может отображать конкретный элемент управления.
В этом разделе приводятся обобщенные сведения о модели содержимого для элементов управления WPF и типов, схожих с элементами управления. Модель содержимого описывает, какое содержимое может использоваться в элементе управления. Также в этом разделе перечисляются свойства содержимого для каждой модели содержимого. Свойство содержимого — это свойство, которое используется для хранения содержимого объекта.
Классы с произвольным содержимым
Некоторые элементы управления могут содержать объекты любого типа, например строку, объект DateTime или объект UIElement, являющийся контейнером для других элементов. Например, в Button может содержаться изображение и некоторый текст; или в CheckBox может содержаться значение DateTime.Now.
В WPF имеется четыре класса, которые могут иметь произвольное содержимое. В следующей таблице перечислены классы, которые наследуются от Control.
| Класс с произвольным содержимым | Содержание |
|---|---|
| ContentControl | Один произвольный объект. |
| HeaderedContentControl | Заголовок и один элемент, которые являются произвольными объектами. |
| ItemsControl | Коллекция произвольных объектов. |
| HeaderedItemsControl | Заголовок и коллекция элементов, являющиеся произвольными объектами. |
Элементы управления, производные от этих классов, могут содержать тот же тип содержимого и обрабатывать содержимое аналогичным образом. На рисунке ниже показаны элементы управления из каждой модели содержимого, содержащие изображение и некоторый текст:
Элементы управления, содержащие один произвольный объект
В классе ContentControl содержится один фрагмент произвольного содержимого. Свойство содержимого у этого класса имеет значение Content. Следующие элементы управления наследуют от ContentControl и используют его модель содержимого:
На следующем рисунке показаны четыре кнопки, у которых для свойства Content заданы следующие значения: строка, объект DateTime, Rectangle, и объект Panel, который содержит объекты Ellipse и TextBlock:
Пример задания свойства Content см. в разделе ContentControl.
Элементы управления, содержащие заголовок и один произвольный объект
Класс HeaderedContentControl наследует от ContentControl и отображает содержимое с заголовком. Он наследует свойство содержимого, Content, от ContentControl и определяет свойство Header, которое имеет тип Object; поэтому оба они могут быть произвольными объектами.
Следующие элементы управления наследуют от HeaderedContentControl и используют его модель содержимого:
На следующем рисунке показаны два объекта TabItem. У первого объекта TabItem имеются объекты UIElement в качестве Header и Content. Объекту Header присвоен объект StackPanel, который содержит Ellipse и TextBlock. Объекту Content присвоен объект StackPanel, который содержит TextBlock и Label. У второго объекта TabItem для свойств Header и TextBlock в свойстве Content задано строковое значение.
Пример создания объектов TabItem см. в разделе HeaderedContentControl.
Элементы управления, содержащие коллекцию произвольных объектов
Класс ItemsControl наследует от Control и может содержать несколько элементов, таких как строки, объекты или другие элементы. У него имеются свойства содержимого ItemsSource и Items. ItemsSource обычно используется для заполнения ItemsControl с помощью коллекции данных. Если вы не хотите использовать коллекцию для заполнения ItemsControl, можно добавлять элементы с помощью свойства Items.
Следующие элементы управления наследуют от ItemsControl и используют его модель содержимого:
На следующем рисунке показан объект ListBox, содержащий элементы следующих типов:
- Строка .
- Объект DateTime.
- UIElement.
- Объект Panel, содержащий объекты Ellipseи TextBlock.
Элементы управления, содержащие заголовок и коллекцию произвольных объектов
Класс HeaderedItemsControl наследует от ItemsControl и может содержать несколько элементов, таких как строки, объекты или другие элементы и заголовок. Он наследует свойства содержимого ItemsControl, ItemsSource и Items, а также определяет свойство Header, которое может быть произвольным объектом.
Следующие элементы управления наследуют от HeaderedItemsControl и используют его модель содержимого:
Классы, содержащие коллекцию объектов UIElement
Класс Panel выполняет позиционирование и упорядочивание дочерних объектов UIElement. Свойство содержимого у этого класса имеет значение Children.
Следующие классы наследуют от класса Panel и используют его модель содержимого:
Дополнительные сведения см. в разделе Общие сведения о панелях.
Классы, влияющие на внешний вид объекта UIElement
Класс Decorator применяет визуальные эффекты к оному дочернему элементу UIElement или вокруг него. Свойство содержимого у этого класса имеет значение Child. Следующие классы наследуют от Decorator и используют его модель содержимого:
- AdornerDecorator
- Border
- BulletDecorator
- ButtonChrome
- ClassicBorderDecorator
- InkPresenter
- ListBoxChrome
- SystemDropShadowChrome
- Viewbox
На следующем рисунке показан объект TextBox, который дополнен располагающимся вокруг него объектом Border.
Элемент управления TextBlock с границей вокруг него
Классы, предоставляющие визуальную обратную связь об объекте UIElement
Класс Adorner предоставляет пользователю визуальные подсказки. Например, класс Adorner можно использовать для добавления функциональных обработчиков к элементам или предоставления информации о состоянии элемента управления. Класс Adorner предоставляет платформу, позволяющую создавать собственные декоративные элементы. WPF не предоставляет никаких реализованных графических элементов. Дополнительные сведения см. в разделе Общие сведения о декоративных элементах.
Классы, позволяющие пользователям вводить текст
WPF предоставляет три основных элемента управления, которые позволяют пользователям вводить текст. Каждый из этих элементов управления отображает текст по-разному. В следующей таблице приведены эти три элемента управления с поддержкой ввода текста, их возможности по отображению текста и свойства, которые содержат текст этого элемента управления.
| Элемент управления | В каком виде отображается текст | Свойство содержимого |
|---|---|---|
| TextBox | с обычным текстом; | Text |
| RichTextBox | Форматированный текст | Document |
| PasswordBox | Скрытый текст (символы скрыты) | Password |
Классы, отображающие пользовательский текст
Некоторые классы могут использоваться для отображения простого или форматированного текста. Для отображения текста небольшого объема можно использовать TextBlock. Если нужно отобразить текст большого объем, то следует использовать такие элементы управления, как FlowDocumentReader, FlowDocumentPageViewer или FlowDocumentScrollViewer.
У TextBlock имеется два свойства содержимого: Text и Inlines. Если требуется отобразить текст с единообразным форматированием, лучше всего использовать свойство Text. Если предполагается использовать в тексте различное форматирование, нужно использовать свойство Inlines. Свойство Inlines представляет из себя коллекцию объектов Inline, которые определяют способ форматирования текста.
В следующей таблице перечислены свойства содержимого для классов FlowDocumentReader, FlowDocumentPageViewer и FlowDocumentScrollViewer.
| Элемент управления | Свойство содержимого | Тип свойства содержимого |
|---|---|---|
| FlowDocumentPageViewer | Документ | IDocumentPaginatorSource |
| FlowDocumentReader | Документ | FlowDocument |
| FlowDocumentScrollViewer | Документ | FlowDocument |
Объект FlowDocument реализует интерфейс IDocumentPaginatorSource, поэтому все три класса могут получать FlowDocument как содержимое.
Классы, выполняющие форматирование пользовательского текста
TextElement и связанные с ним классы позволяют форматировать текст. Объекты TextElement содержат текст и осуществляют его форматирование в объектах TextBlock и FlowDocument. Двумя основными типами объектов TextElement являются элементы Block и элементы Inline. Элемент Block представляет из себя блок текста (например, абзац или список). Элемент Inline представляет из себя часть текста в блоке. Многие классы Inline задают форматирование текста, к которому они применяются. Каждый из классов TextElement имеет собственную модель содержимого. Подробнее см. в разделе Общие сведения о модели содержимого TextElement.
См. также
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.