Как сделать страницы в wpf
Обновлено: 02.07.2024
В этой статье мы поговорим о том, как создать простой Wizard на WPF . Когда мы долгое время пишем на WPF , может возникнуть задача написания простого визарда, чтобы, например, задать настройки в программе, инициировать некоторые данные и т.д. Первым делом, когда нужно что-то реализовать, мы посмотрим, как это сделали до нас, чтобы основываться на чужом опыте. Одно из интересных решений для создания визарда предлагает Josh Smith, Creating an Internationalized Wizard in WPF . Этот автор является гуру по созданию WPF -приложений, и если вы до сих пор не сталкивались с его творчеством, рекомендую почитать его блог . Если вы увлекаетесь разработкой WPF -приложений, то вам должен понравиться этот блог.
Я продемонстрирую свой вариант создания простого визарда, без каких-либо заморочек, с детальным пошаговым разбором. Для того чтобы сделать визард, необходимо реализовать главное окно, в котором будет показана наша информация, а все ViewModel, которые будут привязанными к конкретным View, будут отображаться через ControlPresenter . Для начала создадим простое WPF- приложение, которое назовем SimpleWizard.
Будучи приверженцем паттерна MVVM , предпочту реализацию визарда с использованием данного паттерна. Поэтому если вы не знакомы с использованием данного паттерна в разработке приложений на WPF, рекомендую посмотреть статьи "Основы паттерна MVVM" и "MVVM Part 2" . В этой статье не будет рассказываться о сведениях про MVVM и о его использовании; здесь будет просто показано его практическое применение. Вот какой внешний вид будет у нашего визарда:
2 ответа 2
Я уже указывал в комментариях на пример своего ответа здесь. Может такой вариант и представляется кому-то рабоче-крестьянским способом, в особенности для любителей девственно чистого кодбихайнд, но я считаю его вполне годным и, самое главное, простым и быстрым в реализации. Ладно, это лирика.
Вот вам другой вариант,
с рефлексией, все дела, как у четких пацанов. ) Это не мой мопед, я чисто его сп. подсмотрел в проекте NAudio. Подход довольно интересный, кстати.
Создаем вот такой интерфейс
Далее для каждой пары View & ViewModel создается еще один класс, который реализует этот интерфейс таким образом:
т.е. это такой загрузчик для пары View & ViewModel. Далее это у нас MainWindow.xaml
Это её вьюмодель, которая подгружает и отображает нужную вьюшку
А вот теперь самая мякотка - тут без рефлексии не обойтись
Подправляем App.xaml такой строчкой - Startup="Application_Startup"> И тогда App.xaml.cs такой
Вот и все. Как вариант можно сделать промежуточный класс abstract class ModuleBase : IModule и тогда загрузчик пары можно сделать таким
App.xaml - это декларативная стартовая точка Вашего приложения. Visual Studio будет автоматически его создавать, при создании нового приложение WPF, включая CodeBehind (App.xaml.cs) файлы. Тут ситуация очень похожа на ту, в которой мы обсуждали Окно: два файла создаются для того, чтобы комфортно работать с разметкой и отделенным кодом.
Одной из наиболее часто используемых функцих App.xaml файла является определение глобальных ресурсов, которые могут быть использованы и доступны из любого уровня приложения (например - глобальные стили). Это мы подробно обсудим немного позже.
Структура App.xaml
При создании нового приложения, автоматически сгенерированный файл App.xaml будет выглядеть примерно так:
В некоторых ситуациях нужен более жесткий контроль над тем, как и когда первое окно открывается. В этом случае можно удалить свойство StartupUri и реализовать этот функцонал во вспомогательном коде, что будет продемонстрировано позже.
Структура App.xaml.cs
Соответствующий файл App.xaml.cs для нового проекта обычно выглядит так:
Вы увидите, как этот класс расширяет класс Application, позволяя нам реализовывать функционал на уровне приложения. Например, Вы можете подписаться на событие Startup (запуск приложения), в котором можно "вручную" создать стартовое окно.
Отличным фактом в данном примере, по сравнению с простым использованием свойства StartupUri, является то, что мы манипулируем стартовым окном еще до его появления. В примере, мы изменили заголовок окна (не на самый полезный), но также, Вы можете подписаться на события или, возможно, показать заставку (Splash screen), ведь когда появляется полный контроль - появляются новые возможным. Именно эти возможности мы изучим более глубоко в следующих главах руководства.
Is your preferred language not on the list? Click here to help us translate this article into your language!
В данном пошаговом руководстве показано, как построить простое приложение Windows Presentation Foundation (WPF) с помощью сред. Конструктор WPF.
В данном пошаговом руководстве выполняются следующие задачи.
Добавление в макет элементов управления.
Задание значений свойств, относящихся к макету.
Создание источника данных.
Подключение к источнику данных.
Привязка свойств элемента управления.
В итоге будет создано простое приложение, позволяющее просматривать файловую систему. Пользовательский интерфейс приложения будет реализован на языке XAML. XAML in WPF .' data-guid="7805d44319f1b05fe9e45aef8230d111">Дополнительные сведения см. в разделе XAML в WPF . На следующем рисунке показано, как будет выглядеть приложение.
WPF Simple Application Walkthrough Hands on Lab .' data-guid="1ecc5f564cb853bde26a663cc5f17f7e">Это практическое руководство в виде практикума, выполняемого в Visual Studio 2010, доступно на странице WPF Simple Application Walkthrough Hands on Lab.
Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.
Visual Studio 2010.
Первым этапом является создание проекта для приложения.
Создание проекта
Файл MainWindow.xaml будет открыт в сред. Конструктор WPF.
В представлении конструктора выберите окно. How to: Select and Move Elements on the Design Surface .' data-guid="5893d12be405f3ab375b2b5942572539">Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора .
Properties window, set the value of the Title property to Folder Explorer .' data-guid="ae1cd53f210c00da5de8a657f2159ec3">В окне Свойства установите для свойства Title значение Folder Explorer .
Макет определяет расположение элементов управления в главном окне приложения. Ниже показано, как создать элементы макета, которые будут содержать элементы управления приложения.
Создание макета
Grid control on the window. ' data-guid="3d5a0c908f4ad969bded74008d2f2928">Выберите в окне корневой элемент управления Grid .
Добавьте вторую строку к сетке. How to: Add Rows and Columns to a Grid .' data-guid="307f64c71d0c16a3c491510150a46627">Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу .
Добавьте второй столбец к сетке.
Если макет определен, его можно заполнить элементами управления.
Добавление в макет элементов управления
Toolbox , drag a TreeView control into the first cell of the grid. ' data-guid="7f0d7da9faa75431234b873dcd3ea133">Перетащите элемент управления TreeView с панели элементов в первую ячейку сетки.
Toolbox , drag a ListView control into the cell occupying the first row and second column of the grid. ' data-guid="f6d3fdd2953ebdf9717886c66606c945">Перетащите элемент управления ListView с панели элементов в ячейку, находящуюся в первой строке и втором столбце сетки.
Toolbox , drag a ListView control into the cell occupying the second row and second column of the grid. ' data-guid="044a93166855a4fd4e28fa3221574ee8">Перетащите элемент управления ListView с панели элементов в ячейку, находящуюся во второй строке и втором столбце таблицы.
Ниже показано, как задать значения свойств, связанных с макетом, для элементов управления. После задания свойств для каждого элемента управления макет будет больше напоминать готовое приложение.
Задание свойств, связанных с макетом
TreeView control.' data-guid="f0a5399847bbf6a79006963662934b5a">Выберите элемент управления TreeView .
Properties window, set the following properties as shown.' data-guid="94c667495d82ec356f833b5d55d044f0">В окне Свойства задайте значения свойств, как показано ниже.
TreeView control resizes to fit in the first grid column and to span the two grid rows. ' data-guid="31bd6643a44d52ac8a77b68814d6b124">Размер элемента управления TreeView изменится таким образом, чтобы элемент поместился в первом столбце таблицы и занимал две строки таблицы.
ListView controls.' data-guid="4546efe934176bb0f69cd1c940f5d6ed">Выберите оба элемента управления ListView .
Properties window, set the following properties as shown.' data-guid="94c667495d82ec356f833b5d55d044f0">В окне Свойства задайте значения свойств, как показано ниже.
ListView controls resize to fit in their respective grid cells.' data-guid="3623115483a2df2ea518f58f51e2c3e4">Размер элементов управления ListView изменится таким образом, чтобы эти элементы заполнили соответствующие ячейки сетки.
Document Outline window.' data-guid="3adfbaa5f5962fab960a540d7405d63c">Откройте окно Структура документа . Navigating the Element Hierarchy of a WPF Document .' data-guid="07e3a2c2269cd894bbf7ebef6686be05">Дополнительные сведения см. в разделе Навигация по иерархии элементов документа WPF .
ColumnDefinitions node for the grid.' data-guid="a8d72323f5742206c3f09f37cc0a1258">Разверните узел ColumnDefinitions для сетки.
ColumnDefinition item. ' data-guid="ad743211af87b7a4e8f7a1dcc1ce3b20">Выберите первый элемент узла ColumnDefinition .
Properties window, set the Width property to * .' data-guid="6731d29e4ba24a51fd715f86272b1503">В окне Свойства присвойте свойству "Width" значение * .
Document Outline window, select the second ColumnDefinition .' data-guid="45bf7e782b45f91d19a5d050c5a412a6">В окне Структура документа выберите второй элемент узла ColumnDefinition .
Properties window, set the Width property to 2* .' data-guid="34370d1836f00958af7e720b88d1d472">В окне Свойства присвойте свойству "Width" значение 2* .
Размер столбцов изменится: первый столбец займет одну треть ширины окна, а второй - две трети.
Document Outline window, expand the RowDefinitions node for the grid. ' data-guid="659e3b012d09a23e14a59099a3dde19b">В окне Структура документа разверните узел RowDefinitions для сетки.
RowDefinition item. ' data-guid="3ab7e7ed57a4257f59b80bf87aa61181">Выберите первый элемент узла RowDefinition .
Properties window, set the Height property to * .' data-guid="aedb8d02c1dae2e2f47f63f725342b52">В окне Свойства присвойте свойству "Height" значение * .
Document Outline window, select the second RowDefinition .' data-guid="5326edf30b907d80f7ee9725ce6ce33b">В окне Структура документа выберите второй элемент узла RowDefinition .
Properties window, set the Height property to * .' data-guid="aedb8d02c1dae2e2f47f63f725342b52">В окне Свойства присвойте свойству "Height" значение * .
Размер строк изменится: они будут занимать половину высоты окна.
Постройте и запустите это решение.
TreeView and ListView controls dynamically resizing. ' data-guid="e194604319c6a2ec41dc0a1e70541897">Измените размер окна, чтобы увидеть динамическое изменение размера элементов управления TreeView и ListView .
Folder .' data-guid="c84f53fa423cb1e45954f88e07befa8b">Источник данных для приложения FolderExplorer является классом с именем Folder . Этот класс представляет простую модель файловой системы. Folder instance has a SubFolders and a Files collection.' data-guid="11c55ab973487003cf13f7cb70a94830">Каждый экземпляр класса Folder содержит коллекции SubFolders и Files .
Создание источника данных
Folder to the FolderExplorer project.' data-guid="4fe21f0ce06b1016e34f2fd9b3516f2a">Добавьте новый класс с именем Folder к проекту FolderExplorer.
Читайте также: