Создание каркаса приложения. Создание и использование стилей

Cоздание нового проекта

1. Запустить среду разработки Visual Studio

2. Выбрать «Create new project»

3. Выбрать «WPF App»

4. Заполнить графу «Project name»

При разработке интерфейсов разработчик может использовать две модели: оконную или страничную (в настоящее время используют чаще)

Оконная модель:

Интерфейс состоит из элементов управления, которые непосредственно взаимодействуют с пользователем или отображают какую-либо информацию

Доступные элементы управления находятся на панели Toolbox

Контейнеры компановки

1. Grid

Наиболее мощный и часто используемый контейнер, похожий на таблицу. Он содержит столбцы и строки, количество которых можно задать. Для определения строк используется свойство RowDefinition,

а для столбцов — ColumnDefinition

2. StackPanel

Позволяет размещать элементы управления поочередно друг за другом

Также существует возможность выбора ориентации размещения с помощью свойства Orientation

Перед стилизацией разметим окно приложения с помощью контейнера Grid

Добавим логотип приложения в Resourses

1. Выбрать вкладку ToursApp

2. Открыть вкладку Resources

3. Выбрать список изображений

4. Перетащить логотип в открывшееся окно

5. Установить значение поля Build Action — Resource

Для отображения логотипа используем элемент Image

Установим заголовок приложения

Установим цвета для верхней и нижней частей

Для оконной навигации основным элементом является страница — Page, которая должна находиться в каком-либо контейнере. Для этого в основном окне приложения разместим элемент Frame, где будут собраны страницы приложения

Далее создадим страницу, которая будет отображаться при первом запуске приложения, и вторую страницу для тестирования навигации между ними

1. Правой кнопкой жмем на название проекта — Add — Page

2. Указываем ее название, например, HotelsPage

3. Размещаем на странице одну кнопку

4. Создаем еще одну страницу, повторив пункт 1

5. Даем ей название AddEditPage

6. Размещаем в ней TextBlock

Для того, чтобы использовать созданные элементы в приложении, необходимо указывать для них имена. Имя — это тоже одно из свойств, по которому можно обращаться к тем или иным элементам в коде. Укажем имя фрейма:

Для отображения первой страницы необходимо прописать следующий код (для перехода в нужное окно нажмите F7): 'MainFrame.Navigate(new HotelPage());'

Например:

• Background — меняет фоновый цвет элемента
  

Все свойства элемента можно посмотреть в окне Properties. Там же можно найти все возможные события, доступные для выбранного элемента управления.

Для взаимодействия с кнопкой будем использовать событие Click(). С помощью него мы сможем перейти с первой страницы на вторую. Для создания события пропишем соответствующее значение в верстке:

Далее нажмем F12 и попадем в окно обработки нажатия на кнопку. Чтобы добраться до MainFrame для навигации, необходимо создать новый класс:

1. Правой кнопкой на название проекта — Add — Class

2. Вводим название класса

3. Создаем статичное свойство MainFrame

4. Присваиваем ему значение в MainWindow

Теперь можем создать навигацию на главной странице

Добавим кнопку «Назад» на главном окне приложения. Установим для нее следующие свойства:

1. Name
   
2. Width, Height
   
3. HorizontalAlignment, Margin

Далее нажимаем F12 и попадаем в окно обработки нажатия на кнопку. Используем следующую логику: обращаемся к менеджеру (Manager), к фрейму (MainFrame) и вызываем метод GoBack

Но она не нужна на главном экране. Чтобы скрыть ее, воспользуемся событием ContentRendered

В коде пропишем:

А чтобы скрыть стандартное навигационное меню, воспользуемся свойством фрейма — NavigationUIVisibility='Hidden'

Для большинства созданных элементов мы использовали похожий набор свойств: ширина, высота, размер шрифта, отступы и др. Чтобы применять определенные наборы свойств для элементов, WPF предлагает использование глобальных стилей в проекте. Чтобы их создавать в проекте, есть файл App.xaml. Используем тег Style и свойство TargetType, чтобы указать, для каких элементов предназначен данный стиль.

Внутри тега Style используем тег Setter. В нем установим необходимые свойства:

И теперь удалим написанные ранее свойства элементов, для которых есть стиль