Шаг 3. Настройка свойств формы Step 3: Set your form properties

Далее окно Свойства используется для изменения внешнего вида формы. Next, you use the Properties window to change the way your form looks.

Настройка свойств формы How to set your form properties

Убедитесь, что отображается конструктор Windows Forms. Be sure you’re looking at Windows Forms Designer. В интегрированной среде разработки Visual Studio откройте вкладку Form1.cs [Design] (или вкладку Form1.vb [Design] в Visual Basic). In the Visual Studio integrated development environment (IDE), choose the Form1.cs [Design] tab (or the Form1.vb [Design] tab in Visual Basic).

Чтобы выделить форму Form1, щелкните в любом ее месте. Choose anywhere inside the form Form1 to select it. Посмотрите на окно Свойства. Теперь оно должно отображать свойства формы. Look at the Properties window, which should now be showing the properties for the form. У формы есть различные свойства. Forms have various properties. Например, можно установить цвет переднего плана и фона, текст заголовка, который отображается в верхней части формы, размер формы и другие свойства. For example, you can set the foreground and background color, title text that appears at the top of the form, size of the form, and other properties.

Если окно Свойства не открывается, остановите приложение, нажав квадратную кнопку Остановить отладку на панели инструментов, или просто закройте окно. If the Properties window doesn’t appear, stop your app by choosing the square Stop Debugging button on the toolbar, or just close the window. Если приложение остановлено, но окно Свойства все равно не отображается, в строке меню выберите Вид > Окно свойств. If the app is stopped and you still don’t see the Properties window, on the menu bar, choose View > Properties Window.

Когда форма будет выбрана, найдите свойство Text в окне Свойства. After the form is selected, find the Text property in the Properties window. В зависимости от того, как отсортирован список, может потребоваться прокрутить вниз. Depending on how the list is sorted, you might need to scroll down. Выберите Text, введите Программа просмотра изображений, а затем нажмите клавишу ВВОД. Choose Text, type Picture Viewer, and then choose Enter. Теперь форма должна содержать текст Программа просмотра изображений в заголовке окна. Окно Свойства должно выглядеть так, как показано на снимке экрана ниже. Your form should now have the text Picture Viewer in its title bar, and the Properties window should look similar to the following screenshot.

**Окно* _ _»Свойства» **Properties* _ _window

Свойства можно упорядочить по категориям или в алфавитном порядке. Properties can be ordered by a Categorized or Alphabetical view. Вы можете переключаться между двумя этими представлениями с помощью кнопок в окне Свойства. You can switch between these two views by using the buttons on the Properties window. В этом руководстве свойства легче находить в представлении, в котором свойства представлены в алфавитном порядке. In this tutorial, it’s easier to find properties through the Alphabetical view.

Вернитесь к конструктору Windows Forms. Go back to Windows Forms Designer. Нажмите нижний правый маркер перетаскивания формы, который представляет собой небольшой белый квадрат в нижнем правом углу формы и показан на рисунке ниже. Choose the form’s lower-right drag handle, which is the small white square in the lower-right of the form and appears as follows.

Маркер перетаскивания Drag handle

Перетащите маркер, чтобы изменить размер формы — она должна стать шире и немного выше. Drag the handle to resize the form so the form is wider and a bit taller.

Посмотрите в окно Свойства и обратите внимание, что изменилось значение свойства Size. Look at the Properties window, and notice that the Size property has changed. Свойство Size меняется при каждом изменении формы. The Size property changes each time you resize the form. Перетащите маркер, чтобы форма имела размер около 550, 350 (не обязательно точно такие значения). Такой размер вполне подходит для этого проекта. Try dragging the form’s handle to resize it to a form size of approximately 550, 350 (no need to be exact), which should work well for this project. В качестве альтернативы можно вводить значения непосредственно в свойстве Size и затем нажимать клавишу ВВОД. As an alternative, you can enter the values directly in the Size property and then choose the Enter key.

Запустите приложение еще раз. Run your app again. Помните, что для запуска приложения можно использовать любой из описанных ниже методов. Remember, you can use any of the following methods to run your app.

Нажмите клавишу F5. Choose the F5 key.

В строке меню выберите Отладка > Начать отладку. On the menu bar, choose Debug > Start Debugging.

На панели инструментов нажмите кнопку Начать отладку, которая показана на рисунке ниже. On the toolbar, choose the Start Debugging button, which appears as follows.

**Кнопка «Начать отладку»* _ _на панели инструментов* **Start Debugging* _ _toolbar button*

Как и ранее, интегрированная среда разработки выполняет сборку приложения и запускает его, после чего открывается окно. Just like before, the IDE builds and runs your app, and a window appears.

Перед переходом к следующему шагу остановите приложение, так как интегрированная среда разработки не позволяет изменять выполняющееся приложение. Before going to the next step, stop your app, because the IDE won’t let you change your app while it’s running. Помните, что для остановки приложения можно использовать любой из описанных ниже методов. Remember, you can use any of the following methods to stop your app.

На панели инструментов нажмите кнопку Остановить отладку. On the toolbar, choose the Stop Debugging button.

В строке меню выберите Отладка > Остановить отладку. On the menu bar, choose Debug > Stop Debugging.

На клавиатуре нажмите клавиши SHIFT+F5. Use your keyboard and press Shift+F5.

Нажмите кнопку X в верхнем углу окна Программа просмотра изображений. Choose the X button in the upper corner of the Picture Viewer window.

Дальнейшие действия Next steps

Предыдущий раздел руководства: Шаг 2. Запуск приложения для просмотра изображений. To return to the previous tutorial step, see Step 2: Run your picture viewer app.

Введение в Windows Forms

Для создания графических интерфейсов с помощью платформы .NET применяются разные технологии — Window Forms, WPF, приложения для магазина Windows Store (для ОС Windows 8/8.1/10). Однако наиболее простой и удобной платформой до сих пор остается Window Forms или формы. Данное руководство ставит своей целью дать понимание принципов создания графических интерфейсов с помощью технологии WinForms и работы основных элементов управления.

Создание графического приложения

Для создания графического проекта нам потребуется среда разработки Visual Studio. Поскольку наиболее распространенная пока версия Visual Studio 2013, то для данного руководства я буду использовать бесплатную версию данной среды Visual Studio Community 2013 которую можно найти на странице https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx.

После установки среды и всех ее компонентов, запустим Visual Studio и создадим проект графического приложения. Для этого в меню выберем пункт File (Файл) и в подменю выберем New — > Project (Создать — > Проект). После этого перед нами откроется диалоговое окно создания нового проекта:

В левой колонке выберем Windows Desktop , а в центральной части среди типов проектов — тип Windows Forms Application и дадим ему какое-нибудь имя в поле внизу. Например, назовем его HelloApp. После этого нажимаем OK.

После этого Visual Studio откроет наш проект с созданными по умолчанию файлами:

Большую часть пространства Visual Studio занимает графический дизайнер, который содержит форму будущего приложения. Пока она пуста и имеет только заголовок Form1. Справа находится окно файлов решения/проекта — Solution Explorer (Обозреватель решений). Там и находятся все связанные с нашим приложением файлы, в том числе файлы формы Form1.cs.

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

Теперь найдем в этом окне свойство формы Text и изменим его значение на любое другое:

Таким образом мы поменяли заголовок формы. Теперь перенесем на поле какой-нибудь элемент управления, например, кнопку. Для этого найдем в левой части Visual Studio вкладку Toolbox (Панель инструментов) . Нажмем на эту вкладку, и у нас откроется панель с элементами, откуда мы можем с помощью мыши перенести на форму любой элемент:

Найдем среди элементов кнопку и, захватив ее указателем мыши, перенесем на форму:

Это визуальная часть. Теперь приступим к самому программированию. Добавим простейший код на языке C#, который бы выводил сообщение по нажатию кнопки. Для этого мы должны перейти в файл кода, который связан с этой формой. Если у нас не открыт файл кода, мы можем нажать на форму правой кнопкой мыши и в появившемся меню выбрать View Code (Посмотреть файл кода):

Однако воспользуемся другим способом, чтобы не писать много лишнего кода. Наведем указатель мыши на кнопку и щелкнем по ней двойным щелчком. Мы автоматически попадаем в файл кода Form1.cs, который выглядит так:

Добавим вывод сообщения по нажатию кнопки, изменив код следующим образом:

Запуск приложения

Чтобы запустить приложение в режиме отладки, нажмем на клавишу F5 или на зеленую стрелочку на панели Visual Studio. После этого запустится наша форма с одинокой кнопкой. И если мы нажмем на кнопку на форме, то нам будет отображено сообщение с приветствием.

После запуска приложения студия компилирует его в файл с расширением exe. Найти данный файл можно, зайдя в папку проекта и далее в каталог bin/Debug или bin/Release

Рассмотрев вкратце создание проекта графического приложения, мы можем перейти к обзору основных компонентов и начнем мы с форм.

Создание приложения Windows Forms на C# в Visual Studio Create a Windows Forms app in Visual Studio with C#

В рамках этого краткого знакомства с возможностями интегрированной среды разработки Visual Studio (IDE) вы создадите простое приложение на C# с пользовательским интерфейсом на основе Windows. In this short introduction to the Visual Studio integrated development environment (IDE), you’ll create a simple C# application that has a Windows-based user interface (UI).

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

На некоторых снимках экрана в этом учебнике используется темная тема. Some of the screenshots in this tutorial use the dark theme. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio. If you aren’t using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

Создание проекта Create a project

Сначала вы создадите проект приложения на C#. First, you’ll create a C# application project. Для этого типа проекта уже имеются все нужные файлы шаблонов, что избавляет вас от лишней работы. The project type comes with all the template files you’ll need, before you’ve even added anything.

Откройте Visual Studio 2017. Open Visual Studio 2017.

В верхней строке меню последовательно выберите Файл > Создать > Проект. From the top menu bar, choose File > New > Project.

В левой области диалогового окна Новый проект разверните узел Visual C# и выберите Рабочий стол Windows. In the New Project dialog box in the left pane, expand Visual C#, and then choose Windows Desktop. На средней панели выберите Приложение Windows Forms (.NET Framework) . In the middle pane, choose Windows Forms App (.NET Framework). Назовите файл HelloWorld . Then name the file HelloWorld .

Если шаблон проекта Приложение Windows Forms (.NET Framework) отсутствует, закройте диалоговое окно Новый проект и в верхней строке меню выберите Сервис > Получить средства и компоненты. If you don’t see the Windows Forms App (.NET Framework) project template, cancel out of the New Project dialog box and from the top menu bar, choose Tools > Get Tools and Features. Запускается Visual Studio Installer. The Visual Studio Installer launches. Выберите рабочую нагрузку .Разработка классических приложений .NET и затем элемент Изменить. Choose the .NET desktop development workload, then choose Modify.

Запустите Visual Studio 2019. Open Visual Studio 2019.

На начальном экране выберите Создать проект. On the start window, choose Create a new project.

В окне Создать проект выберите шаблон Приложение Windows Forms (.NET Framework) для C#. On the Create a new project window, choose the Windows Forms App (.NET Framework) template for C#.

(При желании вы можете уточнить условия поиска, чтобы быстро перейти к нужному шаблону. (If you prefer, you can refine your search to quickly get to the template you want. Например, введите Приложение Windows Forms в поле поиска. For example, enter or type Windows Forms App in the search box. Затем выберите C# в списке языков и Windows в списке платформ.) Next, choose C# from the Language list, and then choose Windows from the Platform list.)

Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. If you do not see the Windows Forms App (.NET Framework) template, you can install it from the Create a new project window. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов. In the Not finding what you’re looking for? message, choose the Install more tools and features link.

После этого в Visual Studio Installer выберите рабочую нагрузку Разработка классических приложений .NET. Next, in the Visual Studio Installer, choose the Choose the .NET desktop development workload.

Затем нажмите кнопку Изменить в Visual Studio Installer. After that, choose the Modify button in the Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. You might be prompted to save your work; if so, do so. Выберите Продолжить, чтобы установить рабочую нагрузку. Next, choose Continue to install the workload. После этого вернитесь к шагу 2 в процедуре Создание проекта. Then, return to step 2 in this «Create a project» procedure.

В поле Имя проекта окна Настроить новый проект введите HelloWorld. In the Configure your new project window, type or enter HelloWorld in the Project name box. Затем нажмите Создать. Then, choose Create.

Новый проект открывается в Visual Studio. Visual Studio opens your new project.

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

Когда вы выберете шаблон проекта C# и зададите имя файла, Visual Studio открывает форму. After you select your C# project template and name your file, Visual Studio opens a form for you. Форма является пользовательским интерфейсом Windows. A form is a Windows user interface. Мы создадим приложение Hello World, добавив элементы управления на форму, а затем запустим его. We’ll create a «Hello World» application by adding controls to the form, and then we’ll run the app.

Добавление кнопки на форму Add a button to the form

Щелкните Панель элементов, чтобы открыть всплывающее окно «Панель элементов». Choose Toolbox to open the Toolbox fly-out window.

(Если параметр для всплывающего окна Панель элементов отсутствует, его можно открыть в строке меню. (If you don’t see the Toolbox fly-out option, you can open it from the menu bar. Для этого выберите Вид > Панель элементов. To do so, View > Toolbox. Либо нажмите клавиши CTRL+ALT+X.) Or, press Ctrl+Alt+X.)

Щелкните значок Закрепить, чтобы закрепить окно Панель элементов. Choose the Pin icon to dock the Toolbox window.

Выберите элемент управления Кнопка и перетащите его на форму. Choose the Button control and then drag it onto the form.

В окне Свойства найдите элемент Текст, измените имя с Button1 на Click this , а затем нажмите клавишу ВВОД. In the Properties window, locate Text, change the name from Button1 to Click this , and then press Enter.

(Если окно Свойства не отображается, его можно открыть в строке меню.) (If you don’t see the Properties window, you can open it from the menu bar. Для этого выберите Вид > Окно свойств. To do so, choose View > Properties Window. Или нажмите клавишу F4.) Or, press F4.)

В разделе Проектирование окна Свойства измените имя с Button1 на btnClickThis , а затем нажмите клавишу ВВОД. In the Design section of the Properties window, change the name from Button1 to btnClickThis , and then press Enter.

Если список был упорядочен по алфавиту в окне Свойства, Button1 появится в разделе (DataBindings) . If you’ve alphabetized the list in the Properties window, Button1 appears in the (DataBindings) section, instead.

Добавление метки на форму Add a label to the form

Теперь, когда мы добавили элемент управления »Кнопка» для создания действия, давайте добавим элемент управления «Метка», куда можно отправлять текст. Now that we’ve added a button control to create an action, let’s add a label control to send text to.

Выберите элемент управления Метка в окне Панель элементов, а затем перетащите его на форму и расположите под кнопкой Нажмите это. Select the Label control from the Toolbox window, and then drag it onto the form and drop it beneath the Click this button.

В разделе Проект или (DataBindings) окна Свойства измените имя Label1 на lblHelloWorld и нажмите клавишу ВВОД. In either the Design section or the (DataBindings) section of the Properties window, change the name of Label1 to lblHelloWorld , and then press Enter.

Добавление кода на форму Add code to the form

В окне Form1.cs [Проект] дважды щелкните кнопку Нажмите это, чтобы открыть окно Form1.cs. In the Form1.cs [Design] window, double-click the Click this button to open the Form1.cs window.

(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.) (Alternatively, you can expand Form1.cs in Solution Explorer, and then choose Form1.)

В окне Form1.cs после строки private void введите lblHelloWorld.Text = «Hello World!»; , как показано на следующем снимке экрана: In the Form1.cs window, after the private void line, type or enter lblHelloWorld.Text = «Hello World!»; as shown in the following screenshot:

Запуск приложения Run the application

Нажмите кнопку Запустить, чтобы запустить приложение. Choose the Start button to run the application.

Будет выполнено несколько операций. Several things will happen. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. In the Visual Studio IDE, the Diagnostics Tools window will open, and an Output window will open, too. Кроме того, вне этой среды откроется диалоговое окно Form1. But outside of the IDE, a Form1 dialog box appears. Оно будет содержать вашу кнопку Нажмите это и текст Label1. It will include your Click this button and text that says Label1.

Нажмите кнопку Нажмите это в диалоговом окне Form1. Choose the Click this button in the Form1 dialog box. Обратите внимание, что текст Label1 меняется на Hello World! . Notice that the Label1 text changes to Hello World!.

Закройте диалоговое окно Form1, чтобы завершить работу приложения. Close the Form1 dialog box to stop running the app.

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

Для получения дополнительных сведений перейдите к следующему руководству: To learn more, continue with the following tutorial: