C# и Я

О программировании в C#, о себе и немного флуда на разнообразные темы.

Знакомство с WPF.

WPF, by admin.

xamllogoНедавно решил немного познакомиться с WPF (Windows Presentation Foundation), познакомиться с возможностями системы и попробовать написать простенькое приложение с использованием WPF.

Надо сказать, что первое знакомство с этой системой ввело меня в некоторый ступор. Всё-таки, что бы ни говорили, а многолетний стаж программирования в Delphi оставляет свой отпечаток – довольно тяжко свыкнуться с тем, что разработка интерфейса программы проводится отдельно от логики приложения и более того, для разработки интерфейса требуется знать ещё один язык, помимо основного. Но всё оказалось не так уж и страшно. И сегодня мы попробуем с Вами написать простенькое приложение с WPF.

Вначале, немного общих сведений о том, что такое WPF. Вот, что говорит нам MSDN:

Windows Presentation Foundation (WPF) ― это система следующего поколения для построения клиентских приложений Windows с визуально привлекательными возможностями взаимодействия с пользователем. C WPF можно создавать широкий спектр как автономных приложений, так и приложений, размещенных в веб-обозревателе. В основе WPF лежит векторная система визуализации, не зависящая от разрешения и созданная с расчетом на возможности современного графического оборудования. WPF расширяет базовую систему полным набором функций разработки приложений, в том числе Extensible Application Markup Language (XAML), элементами управления, привязкой данных, макетом, 2-D- и 3-D-графикой, анимацией, стилями, шаблонами, документами, мультимедиа, текстом и оформлением. WPF входит в состав Microsoft .NET Framework и позволяет создавать приложения, включающие другие элементы библиотеки классов .NET Framework. В WPF дополнительно совершенствуется процесс программирования для разработки клиентских приложений Windows.

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

Разметка Extensible Application Markup Language (XAML) обычно используется для реализации внешнего вида приложения.

Для реализации поведения используется один из языков программирования (кода программной части).

То есть, говоря кратко, всё, что относится к внешнему виду (внешний вид кнопок, панелей, расположение их на форме и т.д.) реализуется с помощью разметки на XAML. Всё, что касается взаимодействия – обработка событий элементов управления, классы, работа с объектами и т.д. реализуется на одном из языком программирования, с которыми Вы знакомы, например, как в моем случае – на C#.

Такой подход к реализации приложения с одной стороны имеет большое количество положительных сторон, одной из которых можно назвать –независимость внешнего вида от языка программирования и, соответственно более гибкая схема разработки приложения. Например, дизайнер с помощью XAML создает внешний вид приложения и ему нет особого дела до того, что делаете Вы, занимаясь разработкой программной части – каждый занимается своим делом. Также, использование XAML упрощает перенос приложения на другой язык, поддерживающий .NET – не требуется полная переработка приложения, надо только сменить программную часть, а интерфейсная останется без изменения.

Но, с другой стороны, WPF осложняет работу программистов-одиночек. Скажем, если Вы решите написать приложение для себя, то Вам придется разбираться самостоятельно с XAML, а это в свою очередь, дополнительные затраты времени. Но это уже отдельная тема – стоит или не стоит использовать WPF в небольших приложениях, а мы пока перейдем к рассмотрению примеров.

Как всегда, начнем с простенького приложения типа “Hello, World”. Открываем Visual Studio, создаем новый проект “Приложение WPF”, назовем его “HelloWPF”:

wpf_1

Студия создаст нам новый проект. При этом внешний вид редактора будет другим, нежели при создании приложения “Windows Forms” – теперь в главном окне мы видим:

  1. Макет
  2. Редактор разметки XAML

wpf_2

Пустое приложение теперь состоит из файлов. содержащих разметку приложения (эти файлы имеют расширение *.xaml) и файлы программной части, в нашем случае эти файлы имеют расширение *.cs.

Наш пустой проект содержит 1 окно с заголовком MainWindow и в этом окне содержится Grid – сетка для размещения в ней других элементов управления.

Вначале, обратимся к редактору разметки. Сейчас наш файл разметки содержит совсем немного информации и разобраться будет по-проще. Например, давайте сменим заголовок окна. Для этого переходим в редактор и меняем значение атрибута Title у узла Window, например, на “HelloWPF”. Запустите приложение и увидите, что заголовок сменился:

wpf_3

Аналогичным образом, используя редактор разметки, можно менять и другие свойства окна, например, изменить длину и ширину окна, сменить стиль и т.д. Можно было бы пойти и более простым путем – воспользоваться редактором свойств. Для этого просто кликаем по элементу и в редакторе изменяем все необходимые свойства. При этом разметка будет меняться автоматически.

Теперь посмотрим на реализацию программной части. Для примера, разместим в главном окне приложения кнопку, клик по которой создаст на форме текстовый блок, содержащий текст “Hello World!”.

Открываем панель элементов (ToolBox), выбираем элемент Button и помещаем его в главном окне приложения. При этом обратите внимание на разметку – в редакторе XAML жестко прописывается размер кнопки (атрибуты Width и Height) и положение (атрибут Margin).

Можете немного поэкспериментировать с этими свойствами и посмотреть на поведение кнопки в запущенном приложении, например, попробуйте сделать так, чтобы кнопка находилась по горизонтали всегда по центру или изменяла свои размеры в зависимости от размеров окна. Всё это можно задать, используя разметку.

Теперь отредактируем один из атрибутов узла узла button – атрибут Name. Зададим ему значение “HelloButton”. Теперь при реализации программного кода мы всегда сможем обратиться к кнопке по её имени. Можно было бы, в качестве примера, и не менять имя элемента управления, но это плохая практика программирования – оставлять стандартные имена. Для порядка можете изменить и свойство Content, чтобы задать надпись кнопки.

Теперь, в редакторе XAML задайте имя для сетки (Grid), например, назовем её MasterGrid:

wpf_4

Для чего мы это сделали, посмотрим на примере обработчика события у кнопки.

Теперь создадим обработчик Click для нашей кнопки. Для этого достаточно дважды кликнуть по Button или создать обработчик, используя окно “Свойства”. В обработчике напишем следующий код:

private void HelloButton_Click(object sender, RoutedEventArgs e)
   {
     TextBlock tb = new TextBlock();//создали новый элемент
     tb.Text = "Hello World!"; //задали текст
     //задаем положение элемента в окне
     Thickness mrgn = new Thickness(0, 0, 0, 0);
     tb.Margin = mrgn;
     //добавляем элемент на сетку
     MasterGrid.Children.Add(tb);
   }

Теперь запустите приложение, кликните по кнопке и убедитесь, что в левом верхнем углу окна появится новая надпись. Как можно видеть в листинге, для создания надписи я сначала создал новый элемент TextBlock, задал ему положение и затем, используя имя сетки, заданное в редакторе XAML, разместил новую надпись на сетке, добавим TextBlock в коллекцию Children.

Вот простой пример того, как можно разрабатывать приложения с помощью WPF и размещать новые элементы управления в окне в runtime’е. Можно было бы поступить и по другому – заранее размесить на форме TextBlock и в обработчике просто обратиться к элементу по его имени – результат был бы тот же.

Сегодня я не рассмотрел возможности WPF по созданию красивых интерфейсов, кнопок в стиле web 2.0. и пр. Все эти вопросы заслуживают отдельного рассмотрения и, думаю, что периодически я буду возвращаться к теме работы с WPF для создания по-настоящему красивых приложений.


No related posts.

Back Top

Responses to “Знакомство с WPF.”

Comments (2) Trackbacks (0) Leave a comment Trackback url
  1. Пишет ошибку «Элемент MasterGrid не существует в данном контексте» (MS Visual C# 2010)

  2. все работает)
    ошибка была из-за чувствительности C# к регистру

  1. No trackbacks yet.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*