Разработване на WPF приложение
Разработване на WPF приложение(лаборатория)
В процеса на извършване на работата е необходимо да се разработи WPF приложение за страница/прозорец.
Задача 1 - Създайте проект за WPF приложение
За да разработите приложение, трябва да създадете WPF проект (Фигура 6.1). В прозореца "Създаване на проект" трябва да проверите инсталирането на библиотеката.NET Framework 4(1 - наФиг. 6.1), изберете Windows шаблони (2 - наФиг. 6.1) и сред наличните шаблони изберетеWPF приложениеи в полето "Име" въведете името на проектаWpfA pplProject.
Увеличете изображениетоФиг. 6.1.Прозорец за създаване на проект
След натискане на бутона "OK" ще се генерира шаблон на проект. След това системата от инструменти ще генерира следнияXAMLдокумент:
Дизайнерът на проекта е показан нафиг. 6.2.
Увеличете изображениетоФиг. 6.2.Прозорец на дизайнера на проекта
ПоказаниятXAMLдокумент има един елемент от най-високо ниво. Дескрипторът завършва целия документ. ДокументътXAMLима име на класMainWindow
две пространства от имена
Title="MainWindow" Height="350" Width="525"
Всеки атрибут съответства на конкретно свойство на класаWindow. Горните атрибути казват на WPF да създаде прозорец с етикетMainWindowс размер 350x525 единици. При компилиране и стартиране на проекта за приложение прозорецът, показан нафиг. 6.3.
Фиг. 6.3.Основен прозорец на проекта
МетодътInitializeComponent()се генерира по време на компилиране и не присъства в изходния код.
За програмно управление на контроли,описано в документаXAML, трябва да зададете атрибутаXAMLИме. И така, за да дадете име на елементаGrid, трябва да напишете следното маркиране:
Страниците на приложението могат да бъдат поставени в прозорци и в други страници. В WPF, когато създавате странирани приложения, контейнерът от най-високо ниво може да бъде следните обекти:
NavigationWindow, който е леко модифицирана версия на класаWindow;
Рамка, която е в друг прозорец или друга страница;
Рамка, сервирана директно вInternet Explorer.
За да вмъкнем страница в прозорец, ще използваме класаFrame(Фиг. 6.4). Екземпляр на класРамкас фиксирани границифиг. 6.5).
Увеличете изображениетоФиг. 6.4.Избиране на клас Frame в лентата с инструменти
Фиг. 6.5.Рамка с фиксирани граници
Следният ред ще бъде добавен къмXAMLдокумента на проекта:
Като се има предвид, че се създава приложение за страница, размерите на рамката не трябва да бъдат фиксирани, така че нека променим описанието на свойствата на рамката:
В резултат на това рамката ще запълни целия прозорец (фиг. 6.6):
Увеличете изображениетоФиг. 6.6.Рамка, която запълва целия прозорец
Създадената рамка е необходима за хостване на страницата на WPF приложението в нея. КласътPageпозволява само един вложен елемент. Това не е контрола на съдържанието и наследява от класаFrameworkElement. КласътPageима малък набор от допълнителни свойства, които ви позволяват да персонализирате външния му вид, да взаимодействате с контейнера и да използвате навигация. За да преминете къмдруга страница трябва да използва навигация.
Добавете начална страница към вашия проект. За да направите това, вSolution Explorerщракнете с десния бутон върху проектаWpfApplProject. В контекстното меню изберете елементаДобавяне(1 - нафиг. 6.8), а в падащото меню - елементСтраница(2 нафиг. 6.7).
В прозорецаДобавяне на нов елементизберете шаблона "Страница (WPF)" (1) и задайте името на страницатаPageMain(2 наФиг. 6.8).
Увеличете изображениетоФиг. 6.7.Меню за създаване на страница
Увеличете изображениетоФиг. 6.8.Прозорец за добавяне на нов елемент
Дизайнерът на проекта ще генерира страницатаPageMain.xaml(Фиг. 6.9).
Увеличете изображениетоФиг. 6.9.Дизайнер на страници PageMain.xaml
Генерираната страница използваGridкато контейнер от най-високо ниво. ЗаменетеGridс контейнерStackPanel.
Главната страницана приложението в дизайнера е показана нафиг. 6.10.
Фиг. 6.10.Главната страница на WPF приложение в дизайнера
Променете свойствотоTitleна прозореца на класаWindow, за да съответства на лабораторната опция.
Основната страница трябва да осигурява преход към други страници, които предоставят интерфейс за отделни функции и излизане. Използвайте хипервръзки, за да отидете на други страници. Хипервръзките позволяват на потребителя да навигира от една страница към друга. Елементът хипервръзка, съответстващ на обекта от класHyperlink, се дефинира от следния ред:
КласътHyperlinkима свойствоNavigateUri. Това свойство определя коестраницата ще бъде навигирана от приложението, когато се щракне върху съответната хипервръзка. НапримерNavigateUri="Page2.xaml".
В WPF хипервръзките не са отделни, а вградени елементи на потока, които трябва да бъдат поставени вътре в друг елемент, който ги поддържа. Това може да стане например в елементаTextBlock, който е контейнер за хипервръзка.
На първата страница създайте хипервръзки, за да отидете на страниците на приложението, в съответствие със задачата.
Създаване на главното меню. Създайте главно меню, като използвате класаМеню, който представлява контроли на менютоWindows, които ви позволяват да организирате йерархично елементи, свързани с команди и манипулатори на събития. Менютата се формират от обектиMenuItem(име на елемент от менюто) иSeparator(разделител). КласътMenuItemима свойствоHeader, което дефинира текста на елемента от менюто. Този клас може да съхранява колекция отMenuItemобекти, които съответстват на елементи от менюто. КласътSeparatorпоказва хоризонтална линия, разделяща елементите на менюто.
Добавете къмStackPanelна страницата на приложениетоXAML- описание на менюто, което на най-горно ниво ще съдържа например два елементаActionиReport. ЕлементДействиевключва поделементиОтказ, Създаване, Редактиране, Запазване, НамиранеиИзтриване. Добавете разделителни линии междуОтмяна, СъздаванеиНамиране, Изтриване.
Създаване на лента с инструменти. Лентата с инструменти е специализиран контейнер за съхранение на колекция от елементи, обикновено бутони. Подредете бутони в лентата с инструменти, чиято функционалност ще съответства на подпозициите на менютоДействие, т.е.Отмяна, създаване, редактиране, запазване, намиранеиИзтриване.
От предната страна на бутоните поставете графично изображение на съответното действие. За да направите това, добавете папкатаImagesкъм файла на проекта и включете графични обекти в него, които могат да бъдат намерени в библиотеката с графични обекти на Visual Studio (папка VS2010ImageLibrary).
След като графичните файлове бъдат добавени към проекта, те ще бъдат показани в Solution Explorer (фиг. 6.11).
Фиг. 6.11.Включване на папка с изображения с файлове с изображения в проекта
За всеки бутон задайте свойствотоName- името на обекта в програмата и свойствотоToolTipс текста на подсказката, когато показалецът на мишката е върху бутона.
СвойствотоMarginдефинираmarginsза бутона. Задаването на графичния обект за бутона се извършва чрез дефиниране на източникаSourceза обектаImage, който трябва да съответства на пълния път до графичния файл.
Дизайн на интерфейсни елементи. При проектиране на интерфейсни елементи за страница на приложение се използват контролиListBox, ListView, TextBox, TextBlock, ComboBox, DataGridи други.
КласътDataGridпредставлява контрола, която показва данни в персонализирана мрежа от редове и колони. По подразбиранеDataGridавтоматично създава колони въз основа на източника на данни. Това генерира следните типове колони:
DataGridTextColomn– за показване на текстово съдържание в клетки на колона;
DataGridCheckBoxColomn– за показване на логически колони с данни в клетките;
DataGridComboBoxColomn– за показване на колони с данни в клетки, когато има набор от елементи за избор;
DataGridHyperlinkColomn– за показване наUriелементи в колонни клетки.
Ако програмистът не е доволен от автоматичното генериране на колониDataGrid, можете да го деактивирате. За да направите това, свойствотоAutoGenerateColumnsтрябва да бъде зададено наfalse. След това можете да създадете свой собствен набор от колони (Колони), като използвате съществуващи типове колони, или да създадете нов тип колона, като използвате шаблонаDataGridTemplateColumn.
DataGridподдържа много начини за персонализиране на показването на данни.