Элементы управления в WPF Лекция 13

Элементы управления компоновкой. Контейнеры. Panels Элементы управления содержимым. ContentControls Элементы управления списком. ItemsControls Специализированные элементы управления

Элементы управления компоновкой ( контейнеры )

Рекомендации Элементы не должны иметь явно установленных размеров Элементы не должны указывать свою позицию в экранных координатах Контейнеры компоновки распределяют доступное им пространство для размещения дочерних элементов Контейнеры компоновки могут быть вложенными, и сами содержать другие контейнеры компоновки Отрисовка в два прохода Измерение Расположение

Все контейнеры компоновки – наследники от класса System.Windows.Controls.Panel Свойства Panel: Children Children – коллекция дочерних элементов, располагающихся в контейнере Background Background – фон IsItemsHost IsItemsHost – true, если контейнер используется для отображения элементов в ItemsControlDispatcherObject DependencyObject Visual UIElement FrameworkElement Panel

StackPanel StackPanel – размещение в горизонтальном или вертикальном стеке WrapPanel WrapPanel – размещение в строку или столбец с переносом ( как текст ) DockPanel DockPanel – выстраивание элементов по краю контейнера Grid Grid – расположение элементов в ячейках невидимой таблицы UniformGrid UniformGrid – расположение элементов в ячейках невидимой таблицы, но все столбцы и строки имеют одинаковые размеры Canvas Canvas – абсолютное покоординатное расположение дочерних элементов Специальные TabPanel TabPanel – вкладки в TabControl ToolbarPanel ToolbarPanel – группа кнопок в Toolbar ToolbarOverflowPanel ToolbarOverflowPanel – команды в раскрывающемся меню Toolbar VirtualizingStackPanel VirtualizingStackPanel – StackPanel с оптимизацией накладных расходов при большой коллекции дочерних элементов IncCanvas IncCanvas – Canvas с поддержкой перьевого ввода

Располагает свои дочерние элементы в одну строку или в одну колонку Сама панель по умолчанию занимает все свободное пространство Свойства : Orientation Orientation – задает способ расположения дочерних элементов Orientation="Horizontal" – горизонтальное ( по умолчанию ) Orientation="Vertical" - вертикальное Пример : Save Cancel

Располагает элементы управления в доступном пространстве по строчкам ( или по столбцам ) с переносом не уместившихся элементов на новую строку ( как текст ) Свойства : Orientation Orientation – задает способ расположения дочерних элементов Orientation="Horizontal" – построчное расположение элементов ( по умолчанию ) Orientation="Vertical" – расположение элементов по колонкам Пример :

Пристыковывает элементы к одной из границ контейнера Важен порядок следования дочерних элементов Свойства : LastChildFill LastChildFill – true, означает, что последний элемент заполняет все оставшееся пространство Присоединенные свойства, которые получают дочерние элементы : DockPanel.Dock DockPanel.Dock – указывает к какому краю контейнера необходимо пристыковать данный элемент управления LeftRightTopBottom Возможные значения : Left, Right, Top, Bottom Пример : …

Располагает элементы в колонках и строках невидимой сетки Свойства : ColumnDefenitions – содержит коллекцию определения колонок ColumnDefenition RowDefenitions – содержит коллекцию определения строк RowDefenition Присоединенные свойства, которые получают дочерние элементы : Grid.Row и Grid.Column – указывают контейнеру в какой строке и колонке необходимо расположить данный элемент управления. По умолчанию – 0 Нумерация с 0. По умолчанию – 0 Grid.RowSpan и Grid. ColumnSpan – указывают контейнеру в скольких строках и колонках необходимо расположить данный элемент управления. Т. е. указывают, что элемент необходимо расположить в нескольких строках или колонках

Пример : Auto * Grid.ColumnGrid.Row but 1 Grid.ColumnGrid.Row but 2 Grid.ColumnGrid.RowGrid.ColumnSpan but 3

Свойства RowDefinition: Width Width – ширина колонки Свойства ColumnDefinition: Height Height – высота колонки Варианты задания высоты и ширины строк и колонок. Возможные значения : Абсолютные размеры Автоматические размеры. Ширина или высота задаются в точности такими, какие необходимы для размещения дочерних элементов ) Пропорциональные размеры. Пространство распределяется между группой столбцов или строк, которые заполняют все оставшееся пространство. Можно задать неравное пропорциональное изменение размеров

Свойство Grid UseLayoutRounding="True" - заставляет размещать содержимое четко по ближайшим границам точек экрана, исключая размытие GridSplitter Элемент GridSplitter – представляет из себя раздельную полосу для Grid Изменяет размер всей строки / колонки Обычно располагают в отдельной колонке / строке и растягивают на всю строку / колонку Пример :

Располагает элементы внутри невидимой сетки из колонок и строк одинаковых размеров Свойства : Columns Columns – кол - во колонок, на которое необходимо разбить все пространство Rows Rows – кол - во строчек, на которое необходимо разбить все пространство Расположение элементов задается порядком их определения. Ячейки невидимой сетки заполняются слева направо и сверху вниз. Нет присоединенных свойств.

Располагает элементы используя точные координаты Предоставляет дочерним элементам присоединенные свойства : Canvas.LeftCanvas.RightCanvas.TopCanvas.Buttom Canvas.Left, Canvas.Right, Canvas.Top, Canvas.Buttom – устанавливают точные положения элемента в координатах Одновременно использовать Canvas.Left и Canvas.Right или Canvas.Top и Canvas.Buttom нельзя. Элементы могут накладываться друг на друга Panel.ZIndex Panel.ZIndex – задает значение по оси Z. Элемент с большим значением Z будет виден при наложении элементов управления ( для любого контейнера, а не толь r о для Canvas) Часто с Canvas для указания размеров дочернего элемента используют Width и Height. В противном случае элемент получает желаемые размеры.

TabPanel TabPanel – вкладки в TabControl. ToolBarPanel ToolBarPanel – группа кнопок в Toolbar ToolBarOverflowPanel ToolBarOverflowPanel – команды в раскрывающемся меню Toolbar VirtualizingStackPanel VirtualizingStackPanel – StackPanel с оптимизацией накладных расходов при большой коллекции дочерних элементов IncCanvas IncCanvas – Canvas с поддержкой перьевого ввода

Свойства наследуются от FrameworkElement HorizontalAlignmentVerticalAlignment HorizontalAlignment, VerticalAlignment Выравнивание элемента в выделенной области StretchLeftRightCenter Возможные значения : Stretch, Left, Right, Center WidthHeight Width, Height – ширина и высота В аппаратно - независимых единицах Обычно не задается, позволяя элементу занимать необходимое ему пространство Height="350" Width="525 MinWidthMinHeightMaxWidthMaxHeight MinWidth, MinHeight, MaxWidth, MaxHeight – задает минимальные и максимальные размеры элемента Margin Margin Минимальное расстояние до соседей или до границ контейнера Margin="2 – задает поля, одинаковые со всех сторон Margin="2,5" – задает поля слева / справа (2) и сверху / снизу (5) Margin="2,5,0,8" – задает поля слева, сверху, справа, снизу Нет свойств, задающих координаты на экране

Работа с контейнерами

Элементы управления содержимым

Базовый класс для большинства элементов управления Свойства : Background, Foreground – кисти фона и переднего плана ( например, текста ) BorderBrush, BorderThickness – позволяют задать рамку вокруг элемента управления FontFamily, FontSize, FontStyle, FontWeight, FontStretch – задают параметры текста ( шрифт, размер, наклон, жирность, разряженость ). Свойства наследуются дочерними элементами.DispatcherObject DependencyObject Visual UIElement FrameworkElement Control

Наследники класса ContentControl : Control Могут содержать вложенный элемент и только один Content Свойство Content содержит вложенный элемент XAML: Строка содержимого XAML: С #: button1.Content = " Строка содержимого "; Свойство Content типа object Если Content наследник от типа UIElement, то он отображается напрямую. Иначе для отображения вызывается ToString(). Примеры : Если нужно вложить несколько элементов нужно использовать контейнеры Красивый камин

Label - метка Label - метка ButtonBase ButtonBase базовый класс для всех кнопок ( имеет событие Click) Button – кнопка Button – кнопка ToggleButton ToggleButton – залипающая кнопка ( добавляет свойство IsChecked) CheckBox CheckBox RadioButton RadioButton ToolTip – всплывающее окно подсказки ToolTip – всплывающее окно подсказки SrollViewer – добавляет прокрутку дочернему элементу SrollViewer – добавляет прокрутку дочернему элементу UserControl – пользовательский элемент управления UserControl – пользовательский элемент управления Window - окно Window - окно HeaderedContentControl Элементы управления содержимым с заголовками HeaderedContentControl : ContentControl GroupBox – группирующая рамка с заголовком GroupBox – группирующая рамка с заголовком TabItem – содержимое в TabControl TabItem – содержимое в TabControl Expander Expander – представляет собой раскрывающийся элемент с заголовком

По сути представляет собой лишь контейнер для содержимого Это метка Ярлык быстрого доступа _ Это Label При нажатии Alt: Это Label ( Э подчеркнется ) Target При нажатии клавиш Alt+ Э ( фокус получит элемент указанный в свойстве Target) _ Это Label

Click Событие Click – нажатие кнопки IsDefault Свойство IsDefault – кнопка по умолчанию. Если IsDefault = true, нажатие Enter приведет к нажатию этой кнопки (Click). IsCancel Свойство IsCancel – кнопка по умолчанию. Если IsCancel = true, нажатие Esc приведет к нажатию этой кнопки (Click). Также может иметь клавиши быстрого доступа _Ok _Cancel При нажатии Alt+O или Alt_C – будет вызвано соответствующее событие Click Command Свойство Command – прикрепление команды, вызывающейся при нажатии на кнопку

Наследник от класса ToggleButton : ButtonBase IsChecked Свойство IsChecked типа bool? Тринарная логика По умолчанию IsChecked = null ( не определенное значение ) Click Имеет событие Click

Наследник от класса ToggleButton : ButtonBase Click Имеет событие Click IsChecked Свойство IsChecked типа bool? Можно группировать. В группе может быть выбран только один RadioButton. При выборе элемента с остальных автоматически снимается выборка Все элементы RadioButton в одном контейнере автоматически помещаются в одну группу. GroupName Можно группировать самостоятельно ( в одном контейнере ) задав свойство GroupName

Всплывающая подсказка Не получает фокус Почти все элементы управления имеют свойство ToolTip ( наследуется от FrameworkElement), в которое может быть помещен объект элемент ToolTip

Нет свойства Content Специализированы в отношении содержимого TextBlock TextBlock Image Image TextBox TextBox ProgressBar ProgressBar Slider Slider Calendar Calendar DatePicker DatePicker

Отображение текста Text Содержимое – текст, содержит свойство Text XAML: XAML: Текстик С #: textblock1.Text= Текстик ; По умолчанию использует шрифт контейнера Текстик

Представляет картинку ( изображение ) Source Свойство Source типа System.Windows.Media.ImageSource Можно задать с помощью URI Stretch Свойство Stretch – Сжатие / растяжение картинки : None – баз сжатия, обрезается Fill – заполняет элемент управления Uniform – масштабирование, сохранение пропорций, содержимое не обрезается UniformToFill - – масштабирование, сохранение пропорций, содержимое обрезается

Отображение и редактирования текста Text Содержит только текст. Свойство Text. IsReadOnly Свойство IsReadOnly = true – только чтение текста пользователем TextWrapping Свойство TextWrapping: None – нет переноса Wrap - перенос текста на другую строчку WrapWithOverflow - перенос текста на другую строчку с возможностью выхода за границы TextBox Свойства полосы прокрутки : VerticalScrollBarVisibility VerticalScrollBarVisibility HorizontalScrollBarVisibility HorizontalScrollBarVisibility Значения : Visible, Auto, Hidden

Отображает прогресс выполнения длительной задачи Свойства : MaximumMinimum Maximum, Minimum – макс. и мин. Значения элемента Value Value – Значение прогресса процесса Orientation Orientation – Вертикальное или горизонтальное расположение IsEnabled IsEnabled – вкл./ выкл. элемента

Графическое изменение значения Свойства : MaximumMinimum Maximum, Minimum Value Value – текущее значение Orientation Orientation LargeChangeSmallChange LargeChange, SmallChange TickFrequency TickFrequency – отметки на линейке прокрутки ValueChanged Событие ValueChanged при каждом изменение значения Value

Примеры элементов управления

Элементы управления списком

Отображение множества произвольных элементов Позволяют выбрать один из элементов ListBox ListBox ComboBox ComboBox TreeView TreeView MenuContextMenu Menu, ContextMenu ToolBar ToolBar ListView ListView DataGrid DataGrid Основные свойства ItemsItemsSource Items, ItemsSource – коллекция содержащихся элементов.

Отображает список элементов Как привило отображает список элементов управления содержимым ListBoxItem This is a List Кнопочка Может содержать элементы любых типов Option 1 Option 2 Option 3

Автоматически складывает в стопу Автоматически добавляет полосу прокрутки По умолчанию позволяет выбрать только 1 элемент. ListBox.SelectedIndex ListBox.SelectedItem ListBoxItem.IsSelected Множественный выбор. Свойство SelectedMode Single Multiple Extended – выбор смежных элементов (Shift, Ctrl) ListBox.SelectedItems – множество выбранных элементов

Аналогичен ListBox. Может содержать элементы любых типов Отличие лишь в оформлении. Представляет собой выпадающий список При выборе элемента отображается его строковое содержимое. Если содержимое элемент управления содержимым, то отображается его свойство Context. Отображаемый текст доступен по свойству Text Пользователь может редактировать текст IsReadOnly – пользователю текст доступен только для чтения IsEditable – можно ли редактировать текст IsDropDownOpen – программно открыть список

Аналогичен ListBox, но представляет данные в виде дерева. Содержит элементы TreeViewItem Свойство Header отображается в дереве

Отображение данных в виде таблицы Свойства ItemsSource ItemsSource – задает коллекцию данных Columns Columns – коллекция определений колонок Типы колонок : DataGridTextColumn DataGridTextColumn – колонка, содержащая текстовые данные DataGridCheckBoxColumn DataGridCheckBoxColumn – колонка с галочками DataGridHyperlinkColumn DataGridHyperlinkColumn – колонка с гиперссылками DataGridComboBoxColumn DataGridComboBoxColumn – колонка, содержащая ComboBox DataGridTemplateColumn DataGridTemplateColumn – произвольная колонка. Отображение и редактирование данных задаются произвольными шаблонами

IsMainMenu = true, привязывает клавиши Alt или F10 Содержат MenuItem MenuItem содержит : Header – отображаемый текст меню Command – команда для меню Icon – иконка IsChecked IsEnabled Items – коллекция вложенных меню Можно назначить клавишу быстрого доступа _Name Separator – разделительная полоса в меню

Панель элементов Items – содержит коллекцию элементов Галочка При нехватки места на панели элементы перемещаются в меню Overflow OverflowMode: Always – всегда отображать и в меню Overflow AsNeeded – только когда все не умещается Never – никогда

Примеры элементов управления