C# — WPF, обучение


Содержание

Руководство. Создание первого приложения WPF в Visual Studio 2020 Tutorial: Create your first WPF application in Visual Studio 2020

В этой статье показано, как разработать классическое приложение Windows Presentation Foundation (WPF), включающее элементы, которые являются общими для большинства приложений WPF: разметка XAML (XAML), код программной части, определения приложений, элементы управления, макет, привязка данных и стили. This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. Для разработки приложения вы будете использовать Visual Studio. To develop the application, you’ll use Visual Studio.

В этом руководстве вы узнаете, как: In this tutorial, you learn how to:

  • Создайте проект WPF. Create a WPF project.
  • Используйте XAML для проектирования внешнего вида пользовательского интерфейса приложения. Use XAML to design the appearance of the application’s user interface (UI).
  • Напишите код для создания поведения приложения. Write code to build the application’s behavior.
  • Создайте определение приложения для управления приложением. Create an application definition to manage the application.
  • Добавьте элементы управления и создайте макет, чтобы составить пользовательский интерфейс приложения. Add controls and create the layout to compose the application UI.
  • Создание стилей для согласованного внешнего вида в пользовательском интерфейсе приложения. Create styles for a consistent appearance throughout the application’s UI.
  • Привязка пользовательского интерфейса к данным для заполнения пользовательского интерфейса данными и синхронизации данных и пользовательского интерфейса. Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

По завершении работы с этим руководством вы создадите автономное приложение Windows, которое позволит пользователям просматривать отчеты о расходах для выбранных лиц. By the end of the tutorial, you’ll have built a standalone Windows application that allows users to view expense reports for selected people. Приложение состоит из нескольких страниц WPF, размещенных в окне в стиле браузера. The application is composed of several WPF pages that are hosted in a browser-style window.

Пример кода, используемый в этом руководстве, доступен как для Visual Basic, так и C# в руководстве по примерам кода приложения WPF. The sample code that is used in this tutorial is available for both Visual Basic and C# at Tutorial WPF App Sample Code.

Язык кода образца кода можно переключать между C# и Visual Basic с помощью селектора языка в верхней части этой страницы. You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.

Необходимые компоненты Prerequisites

Visual Studio 2020 с установленной рабочей нагрузкой » Разработка классических приложений .NET «. Visual Studio 2020 with the .NET desktop development workload installed.

Дополнительные сведения об установке последней версии Visual Studio см. в статье Установка Visual Studio. For more information about installing the latest version of Visual Studio, see Install Visual Studio.

Создание проекта приложения Create the application project

Первым шагом является создание инфраструктуры приложения, включающей определение приложения, две страницы и изображение. The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

Создайте новый проект приложения WPF в Visual Basic или Visual C# с именем ExpenseIt : Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt :

Откройте Visual Studio и выберите создать новый проект в меню Приступая к работе . Open Visual Studio and select Create a new project under the Get started menu.

Откроется диалоговое окно Создание нового проекта . The Create a new project dialog opens.

В раскрывающемся списке язык выберите либо C# или Visual Basic. In the Language dropdown, select either C# or Visual Basic.

Выберите шаблон приложения WPF (.NET Framework) и нажмите кнопку Далее. Select the WPF App (.NET Framework) template and then select Next.

Откроется диалоговое окно Настройка нового проекта . The Configure your new project dialog opens.

Введите имя проекта ExpenseIt а затем щелкните создать. Enter the project name ExpenseIt and then select Create.

Visual Studio создаст проект и откроет конструктор для окна приложения по умолчанию с именем MainWindow. XAML. Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

Откройте Application. XAML (Visual Basic) или app. XAML (C#). Open Application.xaml (Visual Basic) or App.xaml (C#).

Этот XAML-файл определяет приложение WPF и все ресурсы приложения. This XAML file defines a WPF application and any application resources. Этот файл также используется для указания пользовательского интерфейса, в данном случае MainWindow. XAML, который автоматически отображается при запуске приложения. You also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

КОД XAML должен выглядеть следующим образом в Visual Basic: Your XAML should look like the following in Visual Basic:

И следующим образом C#: And like the following in C#:

Откройте файл MainWindow. XAML. Open MainWindow.xaml.

Этот XAML-файл является главным окном приложения и отображает содержимое, созданное на страницах. This XAML file is the main window of your application and displays content created in pages. Класс Window определяет свойства окна, такие как заголовок, размер или значок, а также обрабатывает события, такие как закрытие или скрытие. The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

Измените элемент Window на NavigationWindow, как показано в следующем коде XAML: Change the Window element to a NavigationWindow, as shown in the following XAML:

Это приложение переходит к другому содержимому в зависимости от введенных пользователем данных. This app navigates to different content depending on the user input. Именно поэтому основное Window необходимо изменить на NavigationWindow. This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow наследует все свойства Window. NavigationWindow inherits all the properties of Window. Элемент NavigationWindow в файле XAML создает экземпляр класса NavigationWindow. The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. Дополнительные сведения см. в разделе Общие сведения о навигации. For more information, see Navigation overview.

Удалите элементы Grid из тегов NavigationWindow. Remove the Grid elements from between the NavigationWindow tags.

Измените следующие свойства в коде XAML для элемента NavigationWindow: Change the following properties in the XAML code for the NavigationWindow element:

Задайте для свойства Title значение » ExpenseIt «. Set the Title property to » ExpenseIt «.

Задайте для свойства Height значение 350 пикселей. Set the Height property to 350 pixels.

Задайте для свойства Width значение 500 пикселей. Set the Width property to 500 pixels.

КОД XAML должен выглядеть следующим образом для Visual Basic: Your XAML should look like the following for Visual Basic:

И следующим образом C#: And like the following for C#:

Откройте файл MainWindow. XAML. vb или MainWindow.XAML.CS. Open MainWindow.xaml.vb or MainWindow.xaml.cs.

Этот файл является файлом кода программной части, который содержит код для работы с событиями, объявленными в файле MainWindow. XAML. This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. Этот файл содержит разделяемый класс для окна, определенного в XAML-коде. This file contains a partial class for the window defined in XAML.

Если вы используете C#, измените класс MainWindow на производный от NavigationWindow. If you’re using C#, change the MainWindow class to derive from NavigationWindow. (В Visual Basic это происходит автоматически при изменении окна в XAML.) Теперь C# ваш код должен выглядеть следующим образом: (In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:

Добавление файлов в приложение Add files to the application

В этом разделе вы добавите в приложение две страницы и изображение. In this section, you’ll add two pages and an image to the application.

Добавьте в проект новую страницу и назовите ее ExpenseItHome.xaml : Add a new page to the project, and name it ExpenseItHome.xaml :

В Обозреватель решенийщелкните правой кнопкой мыши узел проекта ExpenseIt и выберите пункт добавить > страницу. In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

В диалоговом окне Добавление нового элемента шаблон Page (WPF) уже выбран. In the Add New Item dialog, the Page (WPF) template is already selected. Введите имя ExpenseItHome и нажмите кнопку Добавить. Enter the name ExpenseItHome , and then select Add.

Эта страница является первой страницей, отображаемой при запуске приложения. This page is the first page that’s displayed when the application is launched. Отобразится список людей для выбора, чтобы отобразить отчет о расходах для. It will show a list of people to select from, to show an expense report for.

Откройте ExpenseItHome.xaml . Open ExpenseItHome.xaml .

Задайте для Title значение » ExpenseIt — Home «. Set the Title to » ExpenseIt — Home «.

Задайте для DesignHeight значение 350 пикселей, а DesignWidth — 500 пикселей. Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

Теперь XAML выглядит следующим образом для Visual Basic: The XAML now appears as follows for Visual Basic:

И следующим образом C#: And like the following for C#:

Откройте файл MainWindow. XAML. Open MainWindow.xaml.

Добавьте свойство Source в элемент NavigationWindow и задайте для него значение » ExpenseItHome.xaml «. Add a Source property to the NavigationWindow element and set it to » ExpenseItHome.xaml «.

Этот параметр задает ExpenseItHome.xaml первой страницей, открытой при запуске приложения. This sets ExpenseItHome.xaml to be the first page opened when the application starts.

Пример XAML в Visual Basic: Example XAML in Visual Basic:

Также можно задать свойство Source в категории Разное в окне Свойства . You can also set the Source property in the Miscellaneous category of the Properties window.

Добавьте еще одну новую страницу WPF в проект и назовите ее файл ExpenseReportPage. XAML:: Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

В Обозреватель решенийщелкните правой кнопкой мыши узел проекта ExpenseIt и выберите пункт добавить > страницу. In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

В диалоговом окне Добавление нового элемента выберите шаблон Page (WPF) . In the Add New Item dialog, select the Page (WPF) template. Введите имя файл ExpenseReportPageи нажмите кнопку Добавить. Enter the name ExpenseReportPage, and then select Add.

На этой странице отображается отчет о расходах для пользователя, выбранного на странице ExpenseItHome . This page will show the expense report for the person that is selected on the ExpenseItHome page.


Откройте файл ExpenseReportPage.xaml. Open ExpenseReportPage.xaml.

Задайте для Title значение » ExpenseIt — View Expense «. Set the Title to » ExpenseIt — View Expense «.

Задайте для DesignHeight значение 350 пикселей, а DesignWidth — 500 пикселей. Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

Файл ExpenseReportPage. XAML теперь выглядит следующим образом в Visual Basic: ExpenseReportPage.xaml now looks like the following in Visual Basic:

И следующим образом C#: And like the following in C#:

Откройте ExpenseItHome. XAML. vb и файл ExpenseReportPage. XAML. vb, а также ExpenseItHome.XAML.CS и ExpenseReportPage.XAML.CS. Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

При создании нового файла подкачки Visual Studio автоматически создает свой файл кода программной части . When you create a new Page file, Visual Studio automatically creates its code-behind file. Эти файлы кода программной части обрабатывают логику, реагирующую на действия пользователя. These code-behind files handle the logic for responding to user input.

Код должен выглядеть следующим образом для ExpenseItHome : Your code should look like the following for ExpenseItHome :

И, как и для файл ExpenseReportPage: And like the following for ExpenseReportPage:

Добавьте в проект образ с именем водяной знак. png . Add an image named watermark.png to the project. Вы можете создать собственный образ, скопировать файл из примера кода или получить его из репозитория GitHub Microsoft/WPF-Samples . You can create your own image, copy the file from the sample code, or get it from the microsoft/WPF-Samples GitHub repository.

Щелкните правой кнопкой мыши узел проекта и выберите добавить > существующий элементили нажмите SHIFT+ALT+A. Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

В диалоговом окне Добавление существующего элемента задайте для фильтра файлов значение все файлы или файлы изображений, перейдите к файлу изображения, который необходимо использовать, а затем нажмите кнопку Добавить. In the Add Existing Item dialog, set the file filter to either All Files or Image Files, browse to the image file you want to use, and then select Add.

Построение и запуск приложения Build and run the application

Чтобы выполнить сборку и запуск приложения, нажмите клавишу F5 или выберите начать отладку в меню Отладка . To build and run the application, press F5 or select Start Debugging from the Debug menu.

На следующем рисунке показано приложение с кнопками NavigationWindow. The following illustration shows the application with the NavigationWindow buttons:

Закройте приложение, чтобы вернуться в Visual Studio. Close the application to return to Visual Studio.

Создание макета Create the layout

Макет предоставляет упорядоченный способ размещения элементов пользовательского интерфейса, а также управляет размером и положением этих элементов при изменении размера пользовательского интерфейса. Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. Обычно макет создается с одним из следующих элементов управления макетом. You typically create a layout with one of the following layout controls:

  • Canvas — определяет область, в которой можно явно располагать дочерние элементы с помощью координат, относящихся к области Canvas. Canvas — Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
  • DockPanel — определяет область, в которой можно расположить дочерние элементы по горизонтали или по вертикали относительно друг друга. DockPanel — Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
  • Grid — определяет гибкую область сетки, состоящую из столбцов и строк. Grid — Defines a flexible grid area that consists of columns and rows.
  • StackPanel — упорядочивает дочерние элементы в одну строку, которая может быть ориентирована горизонтально или вертикально. StackPanel — Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel — упорядочивает и виртуализировать содержимое в одной строке, ориентированной либо горизонтально, либо вертикально. VirtualizingStackPanel — Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • WrapPanel размещает дочерние элементы в последовательном положении слева направо, разбивая содержимое на следующую строку на границе содержащего поля. WrapPanel — Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Последующее упорядочение происходит последовательно сверху вниз или справа налево в зависимости от значения свойства Orientation. Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.
Цукерберг рекомендует:  Вращающиеся блоки

Каждый из этих элементов управления макета поддерживает определенный тип макета для своих дочерних элементов. Each of these layout controls supports a particular type of layout for its child elements. размеры страниц ExpenseIt можно изменять, и каждая страница содержит элементы, расположенные горизонтально и вертикально вместе с другими элементами. ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. В этом примере Grid используется в качестве элемента макета для приложения. In this example, the Grid is used as layout element for the application.

Дополнительные сведения об элементах Panel см. в разделе Общие сведения о панелях. For more information about Panel elements, see Panels overview. Дополнительные сведения о макете см. в разделе Layout. For more information about layout, see Layout.

В этом разделе вы создадите таблицу с одним столбцом с тремя строками и 10-пиксельным полем, добавив определения столбцов и строк в Grid в ExpenseItHome.xaml . In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml .

В ExpenseItHome.xaml задайте для свойства Margin элемента Grid значение «10, 0, 10, 10», которое соответствует левому, верхнему, правому и нижнему полям: In ExpenseItHome.xaml , set the Margin property on the Grid element to «10,0,10,10», which corresponds to left, top, right and bottom margins:

Можно также задать значения полей в окне свойства в категории Макет : You can also set the Margin values in the Properties window, under the Layout category:

Добавьте следующий код XAML между тегами Grid, чтобы создать определения строк и столбцов: Add the following XAML between the Grid tags to create the row and column definitions:

Height двух строк имеет значение Auto. Это означает, что размер строк зависит от содержимого строк. The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. Height по умолчанию — Star размер, что означает, что высота строки является взвешенной пропорциями доступного пространства. The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. Например, если две строки имеют Height «*», каждая из них имеет высоту, которая является половиной доступного пространства. For example if two rows each have a Height of «*», they each have a height that is half of the available space.

Теперь Grid должен содержать следующий код XAML: Your Grid should now contain the following XAML:

Добавить элементы управления Add controls

В этом разделе вы обновите пользовательский интерфейс домашней страницы, чтобы отобразить список людей, в которых вы выбрали одного пользователя для отображения отчета о расходах. In this section, you’ll update the home page UI to show a list of people, where you select one person to display their expense report. Элементы управления — это объекты пользовательского интерфейса, позволяющие пользователям взаимодействовать с приложением. Controls are UI objects that allow users to interact with your application. Более подробную информацию см. в разделе Элементы управления. For more information, see Controls.

Чтобы создать этот пользовательский интерфейс, добавьте в ExpenseItHome.xaml следующие элементы: To create this UI, you’ll add the following elements to ExpenseItHome.xaml :

  • ListBox (для списка пользователей). A ListBox (for the list of people).
  • Label (для заголовка списка). A Label (for the list header).
  • Button (щелкните, чтобы просмотреть отчет о расходах для пользователя, выбранного в списке). A Button (to click to view the expense report for the person that is selected in the list).

Каждый элемент управления помещается в строку Grid путем установки присоединенного Grid.Row свойства. Each control is placed in a row of the Grid by setting the Grid.Row attached property. Дополнительные сведения о вложенных свойствах см. в разделе Общие сведения о вложенных свойствах. For more information about attached properties, see Attached Properties Overview.

В ExpenseItHome.xaml добавьте в теги Grid следующий код XAML: In ExpenseItHome.xaml , add the following XAML somewhere between the Grid tags:

Можно также создать элементы управления, перетащив их из окна панель элементов в окно конструктора, а затем задав их свойства в окне свойства . You can also create the controls by dragging them from the Toolbox window onto the design window, and then setting their properties in the Properties window.

Выполните сборку и запуск приложения. Build and run the application.

На следующем рисунке показаны созданные элементы управления. The following illustration shows the controls you created:

Добавление изображения и заголовка Add an image and a title

В этом разделе вы обновите пользовательский интерфейс домашней страницы, используя изображение и заголовок страницы. In this section, you’ll update the home page UI with an image and a page title.

В ExpenseItHome.xaml добавьте еще один столбец в ColumnDefinitions с фиксированной Width 230 пикселей: In ExpenseItHome.xaml , add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

Добавьте еще одну строку в RowDefinitions, чтобы всего четыре строки: Add another row to the RowDefinitions, for a total of four rows:

Переместите элементы управления во второй столбец, задав для свойства Grid.Column значение 1 в каждом из трех элементов управления (граница, ListBox и кнопка). Move the controls to the second column by setting the Grid.Column property to 1 in each of the three controls (Border, ListBox, and Button).

Переместите каждый элемент управления по строке, увеличив значение Grid.Row на 1 для каждого из трех элементов управления (границы, ListBox и Button) и для элемента Border. Move each control down a row by incrementing its Grid.Row value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.

Теперь XAML для трех элементов управления выглядит следующим образом: The XAML for the three controls now looks like the following:

Задайте для свойства Panel.Background файл изображения водяного знака. png , добавив следующий код XAML в любом месте между тегами и : Set the Panel.Background property to the watermark.png image file, by adding the following XAML anywhere between the and tags:

Перед элементом Border добавьте Label с содержимым «Просмотр отчета о расходах». Before the Border element, add a Label with the content «View Expense Report». Эта метка является заголовком страницы. This label is the title of the page.

Выполните сборку и запуск приложения. Build and run the application.

На следующем рисунке показаны результаты только что добавленных элементов. The following illustration shows the results of what you just added:

Добавление кода для обработчика событий Add code to handle events

В ExpenseItHome.xaml добавьте обработчик событий Click в элемент Button. In ExpenseItHome.xaml , add a Click event handler to the Button element. Дополнительные сведения см. в разделе инструкции. Создание простого обработчика событий. For more information, see How to: Create a simple event handler.

Откройте ExpenseItHome.xaml.vb или ExpenseItHome.xaml.cs . Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs .

Добавьте следующий код в класс ExpenseItHome , чтобы добавить обработчик событий нажатия кнопки. Add the following code to the ExpenseItHome class to add a button click event handler. Обработчик событий открывает страницу файл ExpenseReportPage . The event handler opens the ExpenseReportPage page.

Создание пользовательского интерфейса для файл ExpenseReportPage Create the UI for ExpenseReportPage

Файл ExpenseReportPage. XAML отображает отчет о расходах для пользователя, выбранного на странице ExpenseItHome . ExpenseReportPage.xaml displays the expense report for the person that’s selected on the ExpenseItHome page. В этом разделе вы создадите пользовательский интерфейс для файл ExpenseReportPage. In this section, you’ll create the UI for ExpenseReportPage. Вы также добавите цвета фона и заливки в различные элементы пользовательского интерфейса. You’ll also add background and fill colors to the various UI elements.

Откройте файл ExpenseReportPage.xaml. Open ExpenseReportPage.xaml.

Добавьте следующий код XAML между тегами Grid: Add the following XAML between the Grid tags:

Этот пользовательский интерфейс похож на ExpenseItHome.xaml , за исключением того, что данные отчета отображаются в DataGrid. This UI is similar to ExpenseItHome.xaml , except the report data is displayed in a DataGrid.

Выполните сборку и запуск приложения. Build and run the application.

Нажмите кнопку Просмотр . Select the View button.

Появится страница отчета по расходам. The expense report page appears. Также обратите внимание, что кнопка обратной навигации включена. Also notice that the back navigation button is enabled.

На следующем рисунке показаны элементы пользовательского интерфейса, добавленные в файл ExpenseReportPage. XAML. The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Элементы управления стиля Style controls

Внешний вид различных элементов часто одинаков для всех элементов одного типа в пользовательском интерфейсе. The appearance of various elements is often the same for all elements of the same type in a UI. Пользовательский интерфейс использует стили для того, чтобы внешний вид можно было использовать в нескольких элементах. UI uses styles to make appearances reusable across multiple elements. Многократное использование стилей помогает упростить создание XAML и управление им. The reusability of styles helps to simplify XAML creation and management. В этом разделе атрибуты, установленные ранее для каждого элемента, заменяются стилями. This section replaces the per-element attributes that were defined in previous steps with styles.

Откройте Application. XAML или app. XAML. Open Application.xaml or App.xaml.

Добавьте следующий код XAML между тегами Application.Resources: Add the following XAML between the Application.Resources tags:


Этот код XAML добавляет следующие стили: This XAML adds the following styles:

headerTextStyle для форматирования заголовка страницы Label; headerTextStyle : To format the page title Label.

labelStyle для форматирования элементов управления Label ; labelStyle : To format the Label controls.

columnHeaderStyle для форматирования DataGridColumnHeader; columnHeaderStyle : To format the DataGridColumnHeader.

listHeaderStyle для форматирования элементов управления Border заголовков списка; listHeaderStyle : To format the list header Border controls.

listHeaderTextStyle : для форматирования Labelзаголовка списка. listHeaderTextStyle : To format the list header Label.

buttonStyle : для форматирования Button на ExpenseItHome.xaml . buttonStyle : To format the Button on ExpenseItHome.xaml .

Обратите внимание, что стили являются ресурсами и дочерними элементами элемента свойства Application.Resources. Notice that the styles are resources and children of the Application.Resources property element. Здесь стили применяются ко всем элементам в приложении. In this location, the styles are applied to all the elements in an application. Пример использования ресурсов в приложении .NET см. в разделе использование ресурсов приложения. For an example of using resources in a .NET app, see Use Application Resources.

В ExpenseItHome.xaml замените все между элементами Grid следующим кодом XAML: In ExpenseItHome.xaml , replace everything between the Grid elements with the following XAML:

Свойства, определяющие внешний вид элементов управления, такие как VerticalAlignment и FontFamily , при применении стилей удаляются и заменяются. The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. Например, headerTextStyle применяется к Label»Просмотр отчета о расходах». For example, the headerTextStyle is applied to the «View Expense Report» Label.

Откройте файл ExpenseReportPage.xaml. Open ExpenseReportPage.xaml.

Замените все элементы Grid элементами следующим кодом XAML: Replace everything between the Grid elements with the following XAML:

Этот XAML добавляет стили к элементам Label и Border. This XAML adds styles to the Label and Border elements.

Выполните сборку и запуск приложения. Build and run the application. Внешний вид окна такой же, как и ранее. The window appearance is the same as previously.

Закройте приложение, чтобы вернуться в Visual Studio. Close the application to return to Visual Studio.

Привязка данных к элементу управления Bind data to a control

В этом разделе вы создадите XML-данные, привязанные к различным элементам управления. In this section, you’ll create the XML data that is bound to various controls.

В ExpenseItHome.xaml после открытия элемента Grid добавьте следующий код XAML, чтобы создать XmlDataProvider, содержащий данные для каждого пользователя: In ExpenseItHome.xaml , after the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person:

Данные создаются в качестве Grid ресурса. The data is created as a Grid resource. Обычно эти данные загружаются в виде файла, но для простоты данные добавляются встроенным образом. Normally this data would be loaded as a file, but for simplicity the data is added inline.

В элементе добавьте следующий элемент , который определяет способ отображения данных в ListBoxпосле элемента : Within the element, add the following element, which defines how to display the data in the ListBox, after the element:

Дополнительные сведения о шаблонах данных см. в разделе Общие сведенияо создании шаблонов данных. For more information about data templates, see Data templating overview.

Замените существующий ListBox следующим кодом XAML: Replace the existing ListBox with the following XAML:

Этот XAML привязывает свойство ItemsSource ListBox к источнику данных и применяет шаблон данных в качестве ItemTemplate. This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Подключение данных к элементам управления Connect data to controls

Далее предстоит добавить код для получения имени, выбранного на странице ExpenseItHome , и передать его конструктору файл ExpenseReportPage. Next, you’ll add code to retrieve the name that’s selected on the ExpenseItHome page and pass it to the constructor of ExpenseReportPage. Файл ExpenseReportPage устанавливает в качестве контекста данных переданный элемент, который является элементом управления, определенным в привязке файл ExpenseReportPage. XAML к. ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

Откройте файл ExpenseReportPage.xaml.vb или ExpenseReportPage.xaml.cs. Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

Добавьте конструктор, принимающий объект, чтобы можно было передавать данные отчета о затратах выбранного человека. Add a constructor that takes an object so you can pass the expense report data of the selected person.

Откройте ExpenseItHome.xaml.vb или ExpenseItHome.xaml.cs . Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs .

Измените обработчик событий Click, чтобы вызвать новый конструктор, передающий данные отчета о затратах выбранного человека. Change the Click event handler to call the new constructor passing the expense report data of the selected person.

Применение стилей к данным с помощью шаблонов данных Style data with data templates

В этом разделе вы обновите пользовательский интерфейс для каждого элемента в списках с привязкой к данным с помощью шаблонов данных. In this section, you’ll update the UI for each item in the data-bound lists by using data templates.

Откройте файл ExpenseReportPage.xaml. Open ExpenseReportPage.xaml.

Привяжите содержимое элементов «Name» и «Department» Label к соответствующему свойству источника данных. Bind the content of the «Name» and «Department» Label elements to the appropriate data source property. Дополнительные сведения о привязке данных см. в разделе Общие сведения о привязке данных. For more information about data binding, see Data binding overview.

После открытия элемента Grid добавьте следующие шаблоны данных, определяющие способ отображения данных отчета о расходах: After the opening Grid element, add the following data templates, which define how to display the expense report data:

Замените элементы DataGridTextColumn DataGridTemplateColumn в элементе DataGrid и примените к ним шаблоны. Replace the DataGridTextColumn elements with DataGridTemplateColumn under the DataGrid element and apply the templates to them.

Выполните сборку и запуск приложения. Build and run the application.

Выберите пользователя и нажмите кнопку Просмотр . Select a person and then select the View button.

На следующем рисунке показаны страницы ExpenseIt ного приложения с элементами управления, макетом, стилями, привязкой данных и применяемыми шаблонами данных: The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

В этом примере демонстрируется конкретная функция WPF, которая не соответствует всем рекомендациям, таким как безопасность, локализация и специальные возможности. This sample demonstrates a specific feature of WPF and doesn’t follow all best practices for things like security, localization, and accessibility. Полный охват WPF и рекомендации по разработке приложений .NET см. в следующих разделах: For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:

Цукерберг рекомендует:  Открываем обучение для компаний!

Следующие шаги Next steps

В этом пошаговом руководстве вы узнали о ряде методов создания пользовательского интерфейса с помощью Windows Presentation Foundation (WPF). In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Теперь у вас должно быть базовое представление о стандартных блоках приложений .NET с привязкой к данным. You should now have a basic understanding of the building blocks of a data-bound .NET app. Более подробную информацию об архитектуре и моделях программирования WPF см. в следующих разделах: For more information about the WPF architecture and programming models, see the following topics:

Более подробную информацию о создании приложений см. в следующих разделах: For more information about creating applications, see the following topics:

Почему все пишут приложения на WinForms если WPF лучше? [закрыт]

Очень часто на этом форуме встречаются вопросы которые начинаются таким образом

Я лично пробовал писать на Win Form и на WPF, и, как мне показалось, WPF более точный, более красивый в плане дизайна UI элементов. К тому же, в комплекте в WPF идёт замечательнейший язык Xaml, с которым работать намного легче чем с C# кодом внутри WinForms.

В связи с этим и задаюсь вопросом: какие преимущества есть у Win Form перед WPF и почему многие пишут на Win Form, хотя у них устарелый дизайн и они не поддерживаются?

Закрыт по причине того, что необходимо переформулировать вопрос так, чтобы можно было дать объективно верный ответ участниками Streletz, insolor, default locale, VenZell, Eugene Krivenja 21 июл ’17 в 13:11 .

Вопрос порождает бесконечные прения и дискуссии, основанные не на знаниях, а на мнениях. Для получения ответа перефразируйте ваш вопрос так, чтобы на него можно было дать однозначно правильный ответ, либо удалите вопрос вовсе. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

4 ответа 4

У WPF и правда масса преимуществ перед WinForms. Особенно серьёзным преимуществом я бы назвал понятие привязки ( Binding ) и DataContext , которые радикально облегчают написание правильно структурированных программ, в которых представление отделено от модели, бизнес-логики и контента.

(Не то, чтобы на WinForms невозможно было писать правильно, это намного сложнее, и требует ручной работы.)

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

Тем, у кого есть опыт программирования на MFC или похожих UI-фреймворках, намного легче перейти на практически аналогичный WinForms, чем учить новые (хотя бы и более удобные и продуктивные) концепции, которые помогают лёгкому, удобному программированию на WPF.

Думаю, именно это является основной причиной того, что WinForms всё ещё существует.

Не знаю как другие, но лично я не помню тот момент когда последний раз использовал WinForms, если десктоп — лишь только WPF и как бы высокопарно это не звучало, в этой среде он до сих пор впереди планеты всей. При этом не важно, это кровавый enterprise или приложение с «бабочками и цветочками».

  • Декларативное программирование, web подобная модель компоновки.
  • Независимость от разрешающей способности, аппаратное ускорение, поддержка мультисенсорного ввода.
  • Стили, триггеры, шаблоны, анимация, аудио и видео, команды, мощная система привязки, маршрутизируемые события.
  • Продвинутые возможности для рисования.
  • Приложения со страничной организацией.

и куча всего. Кроме того идеи, принципы и философия, которые положены в основу данной технологии, мне очень импонируют, близки и симпатичны. При этом я не являюсь каким-то ярым противником WinForms или фанатиком WPF, но просто если на секунду вдуматься и поразмыслить чего бы стоило сделать на «формах» то что в WPF реализуется минут за 5 или 10, невольно понимаешь всю мощь и те возможности, которые эта технология предоставляет.

При этом как все мирское, WPF не идеальна и не лишена недостатков, но просто плюсов все-равно больше и это факт.

Скорее всего, это новички, которые только начинают учить .NET. Естественно, они начинают с более простой в изучении WinForms. И им не важно, что там что-то устарело, не поддерживается и т. д. Их цель — научиться писать программы.

По поводу устарелого дизайна, я вас не понял.

По поводу поддержки Win Forms мне кажется она никуда не делась, в этом можно убедиться почитав новости про Visual Studio 2020 и .net 4.7.

Лично мои наблюдения:

WPF говорит от потрясающем быстродействии в отрисовке элементов на экране благодаря работе на DirectX. У меня комп прекрасен всем — и CPU и GPU, но, по факту, отрисовка на экране у Win Forms гораздо быстрее (GDI тоже на месте не стоит).

Контрол DataGrid на WPF крайне сырой(по крайней мере пару лет назад был). Это самый важный контрол для представления данных вообще. Он должен быть очень универсальным, именно такой он в Win Forms, но не в WPF. Для виртуализации данных в DataGrid (WPF) можно использовать только виртуализацию самого источника данных через DataSource.

В Win Forms с DataGridView можно делать буквально все, что только угодно благодаря старому доброму механизму событий(CellVlueNeeded и CellValueFormating), причем очень просто (ну и DataSource тоже на месте).


Кстати, может кто то подскажет, появился способ в DataGrid поставить програмно фокус в строку номер N не прибегая к коду в 30 строк с применением рефлексии?

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

Для бизнес-приложений важно как раз все остальное, эти приложения люди используют долгое время, по многу часов в день. Функционал их сложен и, как правило, нестандартен. Поэтому их интерфейс должен быть максимально функциональным и не оттягивать внимание на самого себя. Человек не должен уставать от пестрого и мультяшного интерфейса.

В пользу WPF скажу только, что сам принцип построения интерфейса в нем очень интересен тем, что похож на таковой в интернет-страницах. Это очень интересно, но пока сыро (до сих пор! Когда был впервые представлен WPF!?). И да, я не обожаю XAML.

Курс WPF для начинающих

Форма обучения

Целевая аудитория

Разработчики, которые хотят изучить технологию Windows Presentation Foundation.

Предварительные требования

• Знание языка C#
• Знание основных библиотек .NET Framework

Описание курса
WPF для начинающих

До появления технологии Windows Presentation Foundation разработчики создавали настольные приложения, используя технологию Windows Forms. Windows Forms — зрелая и полнофункциональная технология, способная выполнить основные задачи современных бизнес программ. Но работа технологии жестко связана на архитектуре операционной системы и некоторые задачи, которые должны выполняться быстро и без лишнего программирования, требуют больших затрат времени и усилий.
Технология Windows Presentation Foundation (WPF) изменила мир программирования настольных приложений. Положив в основу технологию DirectX, Microsoft предоставляет возможность разработчикам быстро создавать сложные элементы управления и полностью управлять процессом визуализации. Теперь создать красивую кнопку с анимационными эффектами можно, не написав ни строчки кода на C#. Работать с мультимедийным содержанием стало намного проще, расширилась модель связывания данных, печати и работы с документами. WPF комбинирует лучшие аспекты традиционной разработки для Windows, с множеством нововведений, позволяя строить насыщенные графикой интерфейсы для пользователя.

⚛ Изучение: C#, WPF

У меня был выделен сайт ранее кем-то рекомендованный (не помню кем), вот ссылочка: [stepik.org]. На нем я нашел бесплатный курс по WPF (технологии которая мне в данный момент нужна для разработок, так как с WindowsForm перебрался именно на неё). В общем буду изучать.

На сайте указан курс от начала до конца, по этому просто буду строго следовать ему, выкладывать сюда результаты и какие-либо шаблоны (мало-ли в будущем пригодятся).

Так же это переходный пункт к цели: https://smartprogress.do/goal/269764/ — 100 задач по программированию

Критерий завершения

Изучил основные функции, свободно пользуюсь WPF.

Обучение WPF и MVVM

Недавно я присоединился к новому развивающему проекту, создав толстое клиентское приложение с использованием WPF и MVVM. Я разработал приложения в различных .NET framework от 1,1 до 3,5 и всех основных технологий; WebForms, MVC и WinForms. По всем моим проектам я наслаждался каждой минутой, но в этом проекте я чувствую, что я борюсь и, как таковой, не наслаждаюсь им. Когда .NET 3.5 появился в 2008 году, мне очень понравилось изучать новые языковые возможности (LINQ, MVC, Lambda Expressions и т.д.) И проваливаться в WPF, поэтому, пожалуйста, не предполагайте, что я против изучения чего-то нового.

Но кривая обучения в этом проекте кажется действительно крутой, и я чувствую, что изучение MVVM поверх WPF + приложения немного сложно. Хотя я был только на проекте в течение короткого времени (2 недели), мне очень нравится WPF, но не понравился шаблону MVVM. Мое неприятие шаблона MVVM может быть связано с тем, что я действительно не понимаю его, и я чувствую, что мне нужно написать много кода «не лучшей практики», чтобы сделать то, что было относительно просто в мои дни WinForms.

Итак, мой вопрос: кто-то еще столкнулся с подобной ситуацией, и вы придерживались MVVM или пошли в другом архитектурном направлении?

Я работаю с WPF с бета-версий, и я никогда не вернусь к winforms. Для меня MVVM — это философия, и она требует много работы и дисциплины, чтобы претворить ее в жизнь. Он поощряет полную развязку между пользовательским интерфейсом и логикой взаимодействия, что означает отсутствие какого-либо кода, который бы означал проверяемую логику взаимодействия, которая очень сложно сделать с winforms.

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

Если вы еще этого не сделали, я настоятельно рекомендую вам прочитать статью MS по MVVM:

Его фантастика и обязательное чтение для членов моей команды, которые пишут любой код WPF.

Я не уверен, как вы и ваша команда работаете, но вам нужно спросить себя, MVVM для вас или нет. Если модульное тестирование/тестовый и развязанный пользовательский интерфейс — это то, что вы уже делаете или важно для вас, тогда MVVM определенно является хорошим путем. Если ваша команда довольна написанием кода позади, и вы не понимаете, почему вам следует беспокоиться о развязывании, тогда не беспокойтесь о MVVM, поскольку вы обнаружите, что это замедлит вас. Лично последнее никогда не является для меня вариантом.

Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо конкретные вопросы о WPF или MVVM.

Обучение WPF без успеха

Здравствуйте разработчики и дизайнеры,

Я очень хочу научиться WPF, в котором я использую C # в качестве логического кода. Или я «попробовать» в любом случае.

Я написал 2-страничный код позади в форме-стиле , хотя, так что я знаю , некоторый синтаксис. Но это было очень громоздким способом сделать это.

Проблема заключается в том, что я все еще сохраняющиеся вокруг области понимания по крайней мере, основную концепцию объектно-ориентированного программирования. Но 9 из 10 раз я не получаю пример-коды полностью из-за этого 1 вещицу из которых я даже не знаю, как это называется. Как вы даже знаете, если есть команда для функции, которую вы хотите, чтобы выразить и что более важно . как это называется и где он находится, в каком пространстве имен?

Даже самые лучшие видео-примеры не делают это для меня, потому что, когда какой-либо код набран, они никогда не объясняют, как именно работает код. И в большинстве случаев это просто не даже добавить до того, что я знаю логического кода (конечно, я ошибаюсь).

В первые дни я узнал Basic в Commodore 64 не проблема. Обучение и писать Actionscript (Flash), в течение 2 месяцев создания 2D-shoot’em до обучения и написания CMD, в течение 3-х месяцев, пишущих 5000 + строк кода для всех видов функций.

Почему в бороде Мерлина является WPF так сложно? Наблюдая за «простой» учебник-Video, становитесь все более и более де-мотивационным.

Любой признает это?

Спасибо за чтение, Дэнни

Что касается WPF статьи , которые я нашел , чтобы быть наиболее полезными являются обзоры на MSDN, они могут занять некоторое время , чтобы работать через , но они являются краткими и углубленными см этой страницы для мастер-обзора.

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

Кто — то из Microsoft , который сделал презентацию на F # в 2008 году сказал , что если вы знаете , три из ключевых слов, let , fun и |> , вы знаете , весь язык, который не является даже то , что большая часть завышению. WPF с другой стороны , это не язык , это подфреймворка. Если F # можно сравнить с 3 нанотехнологических строительных блоков , то в WPF является 50 метров столешниц сгруппирован с инструментами (средства управления) и дюжины тяжелых машин (WPF механизмов , таких как свойств зависимостей , связывающих данные , командует , шаблонам данных и т.д.), и всех тех , кто пришел с руководством. Так что, если вы столкнулись с проблемой , вам очень много нужно знать , что все инструменты и машины делают , так что вы знаете , какой из них использовать, а затем, конечно , вы также должны знать , как использовать их, кроме своей основной функциональности каждый может даже иметь свои перегибы и особенности , которые важно иметь в виду.

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

Какую книгу посоветуете для изучения c# WPF [дубликат]

На данный вопрос уже ответили:

Доброе время суток, посоветуйте книгу по изучению c# wpf с нуля. так же интересует c# с нуля, какая книга лучше для новичка. Заранее спасибо!

Отмечен как дубликат участниками Regent, Андрей NOP, A K ♦ , Denis Bubnov, Эдуард 16 мар ’18 в 9:21 .

Подобный вопрос задавали ранее и на него уже получен ответ. Если представленные ответы не являются исчерпывающими, пожалуйста, задайте новый вопрос.

4 ответа 4

WPF 4. Подробное руководство Адам Натан

Имеется перечень книг предлагаемых для изучения, они все предложены тут.

Сам учился по книге «Изучаем C#». Авторы Эндрю Стиллмен, Дженнифер Грин. Там и про особенности языка и про wpf. Довольно всё доходчиво и в лёгкой повествовательной форме, без тяжёлых, нагруженных конструкций более серьёзных учебников.

Лучший вариант — это примеры кода хорошего .net разработчика. Т.к. увиденное на примере куда лучше дней, а то и недель изучения. Посоветую базовый курс (для совсем новичков) и курс для начинающих (это основная база), и курс для профессионалов вот этого человека:https://www.youtube.com/watch?v=x0udrpe_gZE&t=47s

Поймешь все быстрее и в голове будет не каша, а правильное представление об ООП и возможностях .NET. Мое субъективное мнение.

H C# WPF – Разработка WPF пользовательских компонентов в черновиках Tutorial

Изучение WPF для тех, кто с WinForms

В прошлой публикации ссылка я рассказал о разработке компонента на WinForms. Поэтому, цель следующая: сделать такой же «по-смыслу» компонент, но на WPF. В целом, подход такой же и советы для WinForms работают и на WPF.
Забегая вперёд, получился следующий компонент, представленный на рисунке ниже.

Компонент (далее – «dpkEditWPF»), так же как и его «собрат» на WinForms является «partial» (разделён на несколько файлов (partial class), для удобства разработки).

У него также есть Свойство «Значение слова ДПК» (32 разряда) и «Текстовая метка» (чтобы там время отображать). Событие клика по «битовой ячейке» с номером бита также имеется, но только оно стало «маршрутизируемым».

Вывод

комментарии ( 31 )

Неканонично. Слепое портирование с WinForms.

Следует использовать dependency property с метаданными, которые предписывают перерисовать содержимое. Ну или цепочкой зависимостей приводить к изменению таких свойств.

Никаких методов Paint быть не должно, такого понятия не существует.

Следует использовать RoutedEvent, чтобы события могли роутиться.

А дальше уже совсем вакханалия пошла с ручной отрисовкой. Вам на что дадены биндинги, шаблоны, стили, триггеры и прочее? Не, круто, вы изменили названия классов с System.Windows.Forms на System.Windows. Но при чём здесь WPF?

Цукерберг рекомендует:  Информатика - помогите пожалуйста по С++

У нас целая тонна наработок по контролам WPF различной сложности.
От всяких спидометров, джойстиков, контролов для пультов управления умных домов, кастомных ListView поддерживающих анимацию, игровых элементов и пр. до собственного окна с производительной прерастиризованной анимацией у навигации (как в WinStore приложениях)
И главное — мы умеем потом это стилизовать в XAML, собственно без нормального XAML интерфейса, контрол на WPF теряет смысл.


Если у аудитории есть интерес, могу попробовать что-то написать

Недавно пришла мысль в голову: пора переходить на использование WPF!

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

Ну и выше уже написали, что вы просто заменили названия классов с одного пространства имен на другое. Советую почитать про DataBinding, стили и прочее. Тогда ваш код станет еще более лаконичным и сможете коллегам доказать.

Между разработкой на Wpf и WinRT/UAP кардинальной разницы нет. Можно сказать, в большинстве случаев просто отличаются пространства имён, синтаксис там и сям, где-то плюс фича, где-то минус.

А вот рендеринг и технологии под капотом разные. Wpf был создан во времена DirectX 9 и, хоть он GPU-accelerated, рендеринг неоптимизирован и очень груб. WinRT Xaml же — это Direct2D (появившийся, если не ошибаюсь, в WIndows 8). То, каким бы мог быть Wpf.

Хоронить его пытаются все кому не лень. Уже лет 5 как. Но я пока сам на нем пишу и не жалуюсь — он стабилен, багов мало, в корпоративном сегменте еще лет 10 проживет. Но начинать с WinForms переходить на WPF сейчас, когда саму WPF уже почти 10 лет стукнуло, это странно.

Что касается Windows Store — да, XAML тот же. Но это просто язык разметки, все равно что сказать, что WinForms и WPF — это тот же самый C#. Да, паттерны они туда перетащили, но начинка разная и когда пишешь серьезные приложения, то в начинку надо погружаться всегда.

Но начинать с WinForms переходить на WPF сейчас, когда саму WPF уже почти 10 лет стукнуло, это странно.

А какие варианты? Оставаться на WinForms? Переходить на UWP? Забить на C# и уходить на Qt5? Собственно, сейчас WPF — самый актуальный гуёвый фреймворк на дотнете для десктопа. Вариантов нет.

Это не столько WPF умирает, сколько мелкомягкие забили на десктоп в целом.

Не забили, просто стали мыслить в другом направлении.
1. Они выпустили W10, в которой приложения Windows Store и UAP способны запускаться в привычных для каждого окошках.
2. Они назвали W10 последней версией и всячески пытаются переманить всех на неё (особенно народ с W7).
Косвенно это означает, что популярность и востребованность UAP-приложений со временем будет расти.
Вот, пожалуйста, получаем новый десктоп. (А ещё мобильники и планшеты, почти бесплатно.)

Есть конечно определённая проблема в том, что UAP-приложения сидят в песочнице, т.е. какие-то системные утилиты не поделать. Но, например, энтерпрайз, который использует именно UAP, я могу себе представить.

«Метрошный» калькулятор теперь стал выглядеть менее глупо, но удобным, как старый калькулятор, он не стал. У «универсальных» приложений проблема не в окошечности, а в ориентированности под тач и ущербной функциональности по сравнению с нормальным десктопом. От того, что приложения для тача стало возможно использовать на десктопе, принципиально в них ничего не поменялось. Невозможно сделать так, чтобы интерфейс был одновременно удобным и функциональным и для тача, и для мыши.

Скажем так, я буду всерьёз воспринимать «универсальные» приложения, когда Adobe портирует на эту платформу Photoshop. И не ту игрушку, напоминающую инстаграм по функциональности, а полноценный взрослый фотошоп.

Энтерпрайзу эти универсальные приложения тоже нафиг не нужны. Если приложение должно работать и на планшетах, и на мобилках, и на десктопах, и на прочих устройствах (скажем, гуй для заказа в ресторане, которым могут пользоваться официанты и клиенты) — да, универсальные приложения выглядят как удобная платформа. Но вот гуй для менеджеров со стандартным нагромождением гридов портировать под урезанные приложения для тача, где ни черта не работает — кому оно надо?

Вот, выбирайте размер элементов, который будет удобен и для мыши, и для тача: 7х7мм, 10х10мм. В W10 как раз пункты меню «Пуск» — 10х10мм, контекстное меню — 7х7мм. Мне удобно всё это жмакать и на десктопе, и на планшете.
2. Если различия в функционале/интерфейсы слишком большие при использовании мыши и тача, на старте можно определять наличие мыши и адаптировать интерфейс.
3. Существуют нечастые случаи, когда к планшету подключается мышка. На этот случай есть возможность следить за изменением устройств, проверять, подключилась ли мышка и опять адаптировать интерфейс.

Не все приложения подходят для UAP. Не все приложения подходят для использования без мыши (или без клавиатуры). Это нормально.

Что такое «урезанные приложения для тача»? В чем нагромождение гридов будет урезано по сравнению с legacy win32? Я сейчас как раз работаю с зубодробительными отчётами и многоуровневыми гридами. Я вижу, что всё это будет удобно и красиво на UAP. Другое дело, что тётечки в гос. учреждениях, для которых эти гриды делаются, даже не слышали про какие-то там W10.

«Ни черта не работает» — это вообще безосновательное утверждение.

Ручной рендеринг используется в исключительных случаях, когда очень критична производительность. Часто это пишется не вручную, а берётся из чужих библиотек. Скажем, всякие графики так оптимизируют, но об этом голова разработчика приложения не болит.

Проблемы с виртуализацией и лишними вычислениями — это оптимизация, а нужда в ней возникает не так уж часто (хотя от приложения зависит, да). Можно считать это платой за мощь.

Скажем, если приложение состоит из нескончаемых гридов, то разницы между WinForms и WPF примерно ноль. Если же в приложении дикое разнообразие современных интерфейсов, то в случае WinForms в коде будет совершенно нечитаемое месиво, а в WPF можно будет хоть что-то понять, и кода будет меньше.

Взять этот же метод, рисующий всё вручную. В WinForms из такой нечитаемой и невизуализируемой каши будет состоять весь код сложных контролов. Да, если глюк где-то среди этой каши, то у вас будет идеальный стек и никакой магии, но насколько будет приятно эту кашу разбирать?

Наверное, непонятно написал: Я утверждаю что в WPF сложнее диагностировать проблемы. По разным причинам: он больше, сложнее, он работает в нескольких потоках, больше тулзней которые надо знать, больше особенностей в поведении стандартных элементов которые надо знать. Так же я привел несколько примеров когда сложно диагностировать причины проблемы.

А вы пытаетесь доказать здесь что разработчику приложения никогда не придется заглядывать «под капот». Это не так.

Обучение WPF и MVVM

Недавно я присоединился к новому развивающему проекту, создав толстое клиентское приложение с использованием WPF и MVVM. Я разработал приложения в различных .NET framework от 1,1 до 3,5 и всех основных технологий; WebForms, MVC и WinForms. По всем моим проектам я наслаждался каждой минутой, но в этом проекте я чувствую, что я борюсь и, как таковой, не наслаждаюсь им. Когда .NET 3.5 появился в 2008 году, мне очень понравилось изучать новые языковые возможности (LINQ, MVC, Lambda Expressions и т.д.) И проваливаться в WPF, поэтому, пожалуйста, не предполагайте, что я против изучения чего-то нового.

Но кривая обучения в этом проекте кажется действительно крутой, и я чувствую, что изучение MVVM поверх WPF + приложения немного сложно. Хотя я был только на проекте в течение короткого времени (2 недели), мне очень нравится WPF, но не понравился шаблону MVVM. Мое неприятие шаблона MVVM может быть связано с тем, что я действительно не понимаю его, и я чувствую, что мне нужно написать много кода «не лучшей практики», чтобы сделать то, что было относительно просто в мои дни WinForms.

Итак, мой вопрос: кто-то еще столкнулся с подобной ситуацией, и вы придерживались MVVM или пошли в другом архитектурном направлении?

Я работаю с WPF с бета-версий, и я никогда не вернусь к winforms. Для меня MVVM — это философия, и она требует много работы и дисциплины, чтобы претворить ее в жизнь. Он поощряет полную развязку между пользовательским интерфейсом и логикой взаимодействия, что означает отсутствие какого-либо кода, который бы означал проверяемую логику взаимодействия, которая очень сложно сделать с winforms.

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

Если вы еще этого не сделали, я настоятельно рекомендую вам прочитать статью MS по MVVM:

Его фантастика и обязательное чтение для членов моей команды, которые пишут любой код WPF.

Я не уверен, как вы и ваша команда работаете, но вам нужно спросить себя, MVVM для вас или нет. Если модульное тестирование/тестовый и развязанный пользовательский интерфейс — это то, что вы уже делаете или важно для вас, тогда MVVM определенно является хорошим путем. Если ваша команда довольна написанием кода позади, и вы не понимаете, почему вам следует беспокоиться о развязывании, тогда не беспокойтесь о MVVM, поскольку вы обнаружите, что это замедлит вас. Лично последнее никогда не является для меня вариантом.

Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо конкретные вопросы о WPF или MVVM.

C# Разработка

Блог о создании приложений на платформе .NET Framework

4 июня 2020 г.

Snoop WPF. Как использовать? Полное описание на русском.

При разработке интерфейса на WPF, не раз может возникать ситуация, когда требуется найти тот или иной элемент управления в Visual Tree приложения, узнать его свойства или путь до него. Если работодатель еще не приобрел Visual Studio 2015, в котором была добавлена функция UI Debugging, то можно использовать бесплатную утилиту Snoop. О всех её особенностях я постараюсь рассказать далее.

Главное окно Snoop.

  1. Кнопка цели под номером один позволяет выбрать конкретное окно приложения. Если зажать левую кнопку мыши на прицеле, то мышь превратится в такой же прицел. Далее не отпуская левую кнопку надо навести на окно (заголовок или любое место внутри) вашего приложения. Если все сделать правильно, то покажется окно с Visual Tree. При этом, если у приложения два и более окон, то можно с помощью этого прицела выбирать нужное вам окно.
  2. В ситуации, когда приложения работает, а окно скрыто, можно воспользоваться кнопкой поиска всех совместимых окон работающих процессов. После нажатия кнопку обновить (2), все WPF приложения появятся в списке пункта три.
  3. Если вы воспользовались кнопкой в пункте два, то в раскрывающемся списке появятся все работающие WPF приложения.
  4. При нажатии на бинокль, если в списке пункта три присутствует приложение, тогда откроется Visual Tree его главного окна.
  5. С помощью этого прицела, можно выбрать окно для визуального просмотра всех его элементов управления. При просмотре есть возможностью увеличить какой то участок окна, рассмотрев все с точностью до 1 пикселя. Так же слева в углу можно увидеть 3D режим, тем самым понять, как получается видимый Layout.
  6. Запускает аналогичное действие с пунктом пять, но с выбранным в списке окном приложения.

Описание основных возможностей Visual Tree окна.

На изображении ниже представлены два окна. Слева окно вашего приложения, справа окно, которое появится если зажать прицел у начала стрелки и перетащить на ваше приложение. В появившемся окне можно увидеть Visual Tree вашего приложения:

Далее опишу элементы Visual Tree окна:

    Visual Tree — дерево Controls. Каждый элемент, кроме ресурсов, имеет строгий формат имени:

NameProperty (ClassType) ChildrenCount

  • NameProperty — выведется, если у элемента заполнено значение свойство Name.
  • ClassType — содержит тип элемента управления. Так же его можно увидеть сразу под Properties вместе с полным Namespace.
  • ChildrenCount — общее количество дочерних элементов (Если раскрыть все дочерние узлы, тогда их количество и будет это число).
  • Элементы дерева можно выбирать, что бы узнать их свойства.
  • При каждом выборе элемента дерева, если он видим на форме, то вокруг него будет появляться красная рамочка.
  • Окно свойств содержит 4 колонки:
    • Name — имя свойства.
    • Value — его текущее значение свойство.
    • Value Source — откуда берется значение. К примеру:
      • Local — говорит о том, что свойство было задано вручную.
      • Default — говорит о том, что используется значение по умолчанию для DependencyProperty.
      • DefaultStyle — используется значение из стиля по умолчанию.
      • Style — говорит о том, что к Control был применен пользовательский стиль. Для просмотра стиля можно отрыть свойство Style.
      • StyleTrigger — поля было заполнено через сработанный Trigger.
      • ParentTemplate — значение в зято из родительского Template.
      • Inherited — говорит о том, что у Control есть базовый класс с DependencyProperty.
    • Binding Errors — содержит текст ошибки Binding, если такая есть. В этом случае строка красится в красный цвет. Что бы посмотреть текст ошибки, можно нажать по строке RightMouseButton > Display Binding Errors. Пример текст ошибки:
  • Снизу выводится крайне полезная информация о том, на каком элементе стоит фокус. Как известно, используя клавишу TAB можно осуществлять переходы по элементам управления окна. После получения фокуса, у него появляется пунктирная рамка, а если это поле ввода, то будет мигающий курсор. Все эти элементы будут отображаться напротив Keyboard.FocusedElement. Значение говорит о том, что фокус отсутствует.
    При нажатии произойдет раскрытие дерева до данного узла. Удобно использовать для навигации.
  • Поле для ввода поиска как по имени или типу элемента дерева.
  • При открытии окна с Visual Tree происходит снятие снимка дерева. Таким образом, если в ходе работы происходит добавление или удаление UI элементов, тогда кнопкой обновить можно снять новый снимок дерева.
    В каком случае состав узлов может меняться?
    К примеру в ListBox списке добавились или удалились новые строки, или к Control применился по триггеру какой то Template .
  • Когда кнопка отжата, то в списке свойств выводятся ТОЛЬКО те, у которых значение отличное от Default в DependencyProperty. Таким образом, фильтруется до 80% не нужных взгляду свойств. Особенно если используется DevExpress, у которого огромное количество общих DependencyProperties и все они видны в списке у всех элементов дерева.
  • При нажатии на значок включения появится Preview выделенного элемента дерева. Странно, что данная опция при первом старте выключена.
  • ВАЖНО! Для поиска видимого Control в дереве можно использовать ещё один способ. Зажимает CTRL+SHIFT наводим указатель на нужный нам участок, отпускаем клавиши и видим, что дерево раскрылось до нужного нам элемента находящегося под курсором.

    Список свойств элемента и DataContext.

    • Зелёный фон строки говорит о том , что при задании используется механизм Binding.
    • Красный фон строки говори о том , что для данного свойства имеется ошибка в Binding.
    • Желтый фон строки говорит о том , что значение свойство только что изменилось.
    • Если цвет текста строки тёмно синий , значит данного значение указано вручную.
    • Если же цвет текста строки серый , значит свойство имеет значение по умолчанию.

    Ещё одной из особенностей Snoop является возможность узнать, что является DataContext для любого узла дерева. Когда форма представляет из себя «пирог» из View и ViewModel, очень легко допустить ошибку при написании Binding. Поэтому анализируя текст ошибки конкретного Binding и список свойств DataContext ускоряет процесс нахождения неисправностей. Для получения информации о текущем DataContext элемента достаточно выделить интересующий узел и перейти на вкладку «Data Сontext«:

    ВАЖНО! Свойства элемента управления и DataContext можно редактировать в Runtime, если они являются простым типом, строкой или enum. При этом, изменения свойств элементов дерева будут применяться «на лету», а вот свойства DataContext, только если присутствует обратная связь в Binding из ViewModel -> View.

    Функция просмотра свойств объектов.

    Предположим у нас есть свойство элемента дерева или «Data Context», для которого хотелось бы узнать больше информации. В данном случае Snoop позволяет это сделать простым двойным щелчком по строке.

    Допустим имеется элемент у которого заполнено поле Style:

    Нажав по строке двойным щелчком и перейдя в Setters можно понять сколько у стиля Setter и какие значения задает каждый из них.

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

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих