Лабы АИС. Практикум для студентов направления подготовки 230400. 68 Информационные системы и технологии
 Скачать 2.14 Mb.
|
|
(рис. 3.5). 44 Рис. 3.5. Задание имени обработчика события в редакторе XAML Двойной щелчок на пункте 3.2.3. Основные элементы управления WPF. Размещение элементов управления. Панель Grid Обзор основных элементов управления WPF. WPF предоставляет полный набор элементов управления для создания удобных и многофункциональных интерфейсов пользователя. При построении приложения WPF в Visual Studio большин- ство элементов управления находятся в панели инструментов (ToolBox), когда в окне открыт визуальный конструктор WPF. Как и при создании приложений Windows Forms элементы можно перетаскивать в конструктор и настраивать в окне свойств (Prop- erties). При этом Visual Studio автоматически генерирует код XAML. Элементы управления WPF можно сгруппировать в сле- дующие категории: • элементы для вывода информации пользователю: Label, TextBlock, StatusBar и др.; • элементы для ввода: TextBox, RichTextBox, PasswordBox; • кнопки: Button, RepeatButton; • элементы для отображения данных: DataGrid, ListView, TreeView; • меню: Menu, ContextMenu, ToolBar; • элементы навигации: Hyperlink, Frame; • элементы выбора одного или нескольких пунктов: ListBox, ComboBox, CheckBox; • элементы отображения и выбора даты: DatePicker, Calen- dar; 45 • мультимедиа: Image, MediaElement и др. Все элементы управления WPF являются потомками класса System.Windows.Control, в котором определены их базовые ха- рактеристики: расположение, фон, передний план, рамка, шрифт текстового содержимого и др. Элементы управления имеют фон (задается свойством Background) и передний план (свойство Foreground). Фоном, как правило, является поверхность элемента управления, а пе- редним планом – текст. Класс Control определяет следующий набор свойств, свя- занных со шрифтами: • FontFamily – имя шрифта; • FontSize – размер шрифта в единицах, не зависящих от устройства (каждая из них представляет собой 1/96 дюйма); • FontStyle – наклон текста; может принимать значения Normal (по умолчанию), Italic, Oblique; • FontWeight – жирность текста; значения: Normal (по умолчанию), Bold и др.; • FontStretch – коэффициент растяжения или сжатия тек- ста; некоторые возможные значения: UltraExpandeded (растяги- вает текст до 200% от обычной ширины), UltraCondensed (сжи- мает текст до 50%). Панели компоновки. При проектировании пользовательского интерфейса прило- жения необходимо сформировать в окне или странице требуемые элементы управления и задать нужные свойства. Этот процесс называется компоновкой. В WPF компоновка осуществляется с использованием раз- личных панелей (элементов-контейнеров) производных от класса Panel. Каждая панель обладает своей собственной логикой компо- новки – некоторые укладывают элементы последовательно в строки, другие организуют их в сетку невидимых ячеек. Окно и страница в WPF может содержать только одну па- нель компоновки. В панель можно поместить различные элемен- ты пользовательского интерфейса и другие панели. 46 Для компоновки в приложениях WPF используются сле- дующие основные панели: • Grid – размещает элементы в строки и колонки в соот- ветствии с невидимой таблицей; используется по умолчанию для каждого нового элемента Window, созданного с помощью Visual Studio; • StackPanel – размещает элементы в горизонтальные и вертикальные стопки; этот контейнер часто используется для ор- ганизации небольших участков более крупного и сложного окна; • DockPanel – размещает элементы управления относитель- но одного из своих внешних краев: Top (верхний), Bottom (ниж- ний), Left (левый), Right (правый); • Frame – аналогичен StackPanel, но является наиболее предпочтительным для переходов на страницы; • Canvas – размещает элементы управления по заданным координатам; является идеальным контейнером для построения рисунков с помощью фигур. Панели компоновки размещают свои дочерние элементы с помощью следующих свойств: • HorizontalAlignment и VerticalAlignment – определяет, как дочерний элемент позиционируется внутри компоновки, ко- гда имеется дополнительное пространство по горизонта- ли/вертикали; • Margin – добавляет пустое пространство вокруг элемента; • MinWidth и MaxWidth – устанавливает максимальные размеры для элемента; • Width и Height – явно устанавливает размеры элемента. Панель StackPanel является одним из простейших контей- неров компоновки. Данная панель укладывает свои дочерние элементы в одну строку или колонку. Важным свойством панели StackPanel является свойство Orientation, которое может принимать два значения: • Vertical – компоновать вложенные элементы по вертикали (значение по умолчанию); • Horizontal – компоновать вложенные элементы по гори- зонтали. Панель компоновки Grid является наиболее гибким и мощ- ным из всех панелей WPF. Панель Grid позволяет разбить окно 47 на меньшие области, которыми можно управлять с помощью дру- гих панелей. Элемент Grid распределяет дочерние элементы по сетке строк и столбцов. Создание компоновки на основе Grid состоит из двух эта- пов: • задание необходимого количества строк и столбцов с ука- занием их высоты (Height) и ширины (Width); • назначение каждому элементу соответствующей строки и столбца. Столбцы и строки создаются путем заполнения объектами коллекции Grid.ColumnDefinition и Grig.RowDefinition. Напри- мер, если требуется задать три столбца и две строки для Grid, то XAML-код может выглядеть следующим образом: < Grid > < Grid.RowDefinitions > < RowDefinition /> < RowDefinition /> Grid.RowDefinitions > < Grid.ColumnDefinitions > < ColumnDefinition /> < ColumnDefinition /> < ColumnDefinition /> Grid.ColumnDefinitions > Grid > Отображение данного кода в окне визуального проекта по- казано на рис. 3.7. Рис. 3.7. Отображение элемента Grid в окне визуального конструктора Для помещения индивидуальных элементов в ячейку ис- пользуются присоединенные свойства Grid.Row и Grid.Column. 48 Эти свойства принимают числовое значение индекса, начинаю- щееся с 0. Чтобы растянуть элемент на несколько ячеек можно исполь- зовать присоединенные свойства RowSpan и ColumnSpan. Дан- ные свойства принимают количество строк или столбцов, кото- рые должен занять элемент. Пример 3.1. Разработка приложения WPF для выпол- нения параметрических запросов к массиву объектов. Требуется разработать приложение WPF, которое позволяет производить запросы LINQ к массиву из примера 1.1. При этом условие отбора результатов запроса должно задаваться через элементы управления (текстовые поля, комбинированные списки и др.). Результаты запроса будут выводиться через окна сообще- ний. В создаваемое приложение необходимо добавить класс Product из примера 1.1, а также массив объектов данного класса. Выполним следующие запросы к массиву объектов: 1. Данные о товарах с ценой больше, чем введенная цена. 2. Наименования товаров заданного производителя. 3. Число наименований товаров с весом больше, чем ука- занный вес. 4. Суммарная стоимость товаров с ценой меньше, чем за- данная цена. 5. Наименования товаров с датой выпуска раньше, чем указанная дата. Код документа XAML для главного окна приложения (MainWindow.xaml) представлен на рис. 3.7. Связанный с дан- ным документом код на C# (модуль MainWindow.xaml.cs), со- держащий обработчики событий, показан на рис. 3.8 и 3.9. 49 Рис. 3.7. Код XAML-документа MainWindow.xaml 50 Рис. 3.8. Код на C# для модуля MainWindow.xaml.cs (часть 1) 51 Рис. 3.9. Код на C# для модуля MainWindow.xaml.cs (часть 1) Окно запущенного приложения WPF показано на рис. 3.10. Результаты одного из параметрических запросов, выводимые в окне сообщения, представлены на рис. 3.11. 52 Рис. 3.10. Окно работающего приложения WPF Рис. 3.11. Окна сообщения при выполнении запроса №2 3.2.4. Страничная навигация в приложениях WPF Страничная навигация в приложениях WPF. Серьезным достоинством Web-приложений является про- стая и удобная модель приложения, связанная с размещением информации и элементов управления на Web-страницах и пере- мещением с одной страницы на другую. Чтобы предоставить раз- работчикам возможность создавать приложения Windows в стиле Web-приложений, в состав WPF была включена модель страниц со средствами страничной навигации. В приложениях WPF каждая страница представлена экземп- ляром класса System.Windows.Control.Page. Класс Page имеет следующие основные свойства: • Background – принимает кисть, которая устанавливает за- ливку для фона; 53 • Content – принимает один элемент, который отображается на странице. Обычно в роли такого элемента выступает панель компоновки (например, Grid или StackPanel); • Foreground, FontFamile, FontSize – определяет исполь- зуемый по умолчанию внешний вид для текста внутри страницы; значение этих свойств наследуется элементами внутри страницы; • NavigationService – возвращает ссылку на объект NavigationService, которую можно использовать для отправки пользователя на другую страницу программным путем; • KeepAlive – определяет, должен ли объект страницы оста- ваться действующим после перехода пользователя на другую страницу; • Title – устанавливает имя, которое должно применяться для страницы в хронологии навигации. Для добавления страницы в проект WPF в Visual Studio не- обходимо выбрать в меню Project (Проект) пункт Add Page (До- бавить страницу). Для отображения страницы (объект Page) в работающем приложении WPF ее необходимо разместить в одном из следую- щих контейнеров: • NavigationWindow – представляет собой видоизмененную версию класса Window; • Frame – панель компоновки, которая может быть распо- ложена внутри окна Window или внутри другой страницы. Для перехода между страницами вручную используется элемент Hyperlink, который является аналогом гиперссылки в Web-приложениях. В WPF элементы Hyperlink являются потоковыми эле- ментами и должны обязательно размещаться внутри другого поддерживающего их элемента (например, внутри TextBlock). Это вызвано тем, что гиперссылки часто располагаются внутри текста. Основным свойством элемента Hyperlink является Navi- gateUri – имя страницы, которую производится переход: < Hyperlink NavigateUri ="Page1.xaml"> Страница 1 Hyperlink > 54 Свойство NavigateUri работает только в том случае, когда элемент Hyperlink располагается на странице. В противном слу- чае необходимо использовать событие Click. Пример 3.2. Разработка приложения WPF со странич- ной навигацией. Требуется разработать WPF-приложение, которое предос- тавляет интерфейс пользователя для работы с данными из XML- документа, полученного в приложении П.1. Приложение будет состоять из одного окна (MainWindow) и четырех страниц, загружаемых в это окно при переходах по ссылкам: • MainPage – главная страница, содержащая ссылки для пе- рехода на другие страницы; • HousesPage – страница «Дома», содержащая табличные данные по обслуживаемым домам; • ApartmsPage – страница «Квартиры», содержащая сведе- ния по обслуживаемым квартирам; • PersonsPage – страница «Жильцы», содержащая данные в табличной форме по обслуживаемым жильцам. Приложение должно содержать главное меню (Menu) с ко- мандами по управлению приложением и строку состояния (Sta- tusBar), в котором будет отображаться информация по текущему состоянию приложения. В качестве таблиц используется элемент DataGrid. Код документов XAML, соответствующих окну и двум страницам приложения, приведен на рис. 3.12 – 3.14. Рис. 3.12. Код XAML-документа MainWindow.xaml (глав- ное окно) 55 Рис. 3.13. Код XAML-документа MainPage.xaml (главная страница) 56 Рис. 3.14. Код XAML-документа ApartmsPage.xaml (стра- ница Квартиры) Окно работающего приложения WPF с загруженными в него страницами показано на рис. 3.15 и 3.16. 57 Рис. 3.15. Окно приложения с загруженной главной страни- цей Рис. 3.16. Окно приложения с загруженной страницей «Квартиры» 3.3. Порядок выполнения работы Данная лабораторная работа предполагает выполнение сле- дующих этапов: 1. Изучить методические указания к лабораторной работе. 2. Разработать приложение WPF, которое выполняет пара- метрические запросы к массиву объектов из примера 1.1. Пара- метры запроса вводятся через различные элементы управления (TextBox, ComboBox, DatePicker и др.) и подставляются в пред- ложения where запросов LINQ. Результаты запросов выводятся через окно сообщений (MessageBox). 58 3. Разработать приложение WPF, использующее странич- ную навигацию. В создаваемое приложение необходимо добавить четыре страницы, каждая из которых должна содержать заголо- вок (элемент Label), главное меню (элемент Menu) и строку со- стояния (элемент StatusBar). Одна из страниц (главная) должна содержать ссылки (элементы Hyperlink) для переходов на ос- тальные страницы. Три другие страницы должны соответствовать сущностям, определенным в XML-документе из работы №2. В каждой из этих страниц должна присутствовать таблица (элемент DataGrid) с определенным набором столбцов (на основе данных из XML-документа). 4. Оформить и защитить отчет по лабораторной работе. 3.4. Контрольные вопросы 1. Каково назначение платформы WPF? 2. Для чего предназначен язык XAML? 3. Каковы основные пространства имен, используемые в документах XAML? 4. Что понимают по присоединёнными свойствами в XAML и как они записываются в XAML-документе? 5. Как в коде XAML событие для элемента привязывается к обработчику? 6. Каким образом панель StackPanel размещает вложенные элементы? 7. С помощью каких свойств осуществляется привязка эле- мента к определенной строке и столбцу панели Grid? 8. Внутри каких элементов XAML может быть размещен элемент Page? 9. Как в элементе Hyperlink задается адрес для перехода на заданную страницу? 59 4. ОСНОВЫ ПРИВЯЗКИ И ФОРМАТИРОВАНИЯ ДАННЫХ В ПРИЛОЖЕНИЯХ WPF 4.1. Цель работы Цель работы – приобрести умение выполнять привязку дан- ных к элементам управления, а также форматировать данные с помощью шаблонов в приложениях WPF. Работа рассчитана на 5 часов. 4.2. Основные теоретические сведения 4.2.1. Привязка данных WPF Общие сведения о привязке данных WPF. Многие Windows-приложения связаны с данными. Задача извлечения информации из источника и отображения ее в поль- зовательском интерфейсе без использования специальных средств может потребовать написания большого объема кода. Для приложений WPF данная задача решается с помощью при- вязки данных. Привязкой данных WPF (WPF data binding) называется ме- тод связывания элементов управления с данными, применяемый в приложениях WPF. Привязка данных WPF обеспечивает про- стой и согласованный способ представления данных и взаимо- действия с ними в приложениях. Для привязки данных в WPF используется класс Sys- tem.Windows.Data.Binding. Объекты класса Binding выступают посредниками, отвечающими за связь элементов управления с источниками данных. Вне зависимости от того, какие элементы привязываются и какой источник данных используется, каждая привязка всегда со- ответствует модели, показанной на рис. 4.1. Рис. 4.1. Основные части привязки данных 60 Привязка обычно состоит из следующих четырех компонен- тов: • цель привязки – обычно определенный элемент управле- ния (например, TextBox); • свойство цели – выбранное свойство элемента управления (например, Text) • источник привязки (Source); • путь к используемому свойству источника (Path). При задании привязки поток данных может идти от цели привязки к источнику и/или от источника привязки к цели. На- правление потока данных для объекта Binding задается с помо- щью свойства Mode, которое может принимать следующие зна- чения: • OneWay – односторонняя привязка, при которой измене- ние в свойстве источника автоматически приводит к обновлению свойства цели, но изменения свойства цели не передаются обрат- но источнику; • TwoWay – двусторонняя привязка, при которой изменение в свойстве цели автоматически ведет к обновлению свойства ис- точника и наоборот; • OneWayToSource – односторонняя привязка к источнику, является обратным по отношению к связыванию |