Windows forms создание интерфейса — Ваш верный помощник с OS Windows

Первое приложение с .NET CLI

Последнее обновление: 25.11.2023

Для создания графических интерфейсов с помощью платформы .NET применяются разные технологии — Window Forms, WPF, UWP.
Однако наиболее простой и удобной платформой до сих пор остается Window Forms или сокращенно WinForms. Данное руководство ставит своей целью дать понимание принципов создания графических интерфейсов с помощью технологии WinForms
и работы основных элементов управления.

Создадим первое приложение на C# и Windows Forms. Что нам для этого потребуется? Прежде всего необходим текстовый редактор для написания кода программы.
Можно взять любой понравившийся текстовый редактор, например, Visual Studio Code

Также для компиляции и запуска программы нам потребуется .NET SDK. Для его установки перейдем на официальный сайт по ссылке
.NET SDK

После установки .NET SDK для первого проекта определим какую-нибудь папку. Например, в моем случае это будет папка C:\dotnet\winforms\helloapp.
Откроем терминал/командную строку и перейдем к созданной папке проекта с помощью команды cd

cd C:\dotnet\winforms\helloapp

В данном случае мы для создания и запуска проекта мы будем использовать встроенную инфраструктуру .NET CLI, которая устанавливается вместе с .NET SDK.

Для создания проекта в .NET CLI применяется команда dotnet new, после которой указывается тип проWindows Formsекта. Для создания проекта
Windows Forms применяется шаблон — winforms. Поэтому введем в терминале команду dotnet new winforms

C:\Users\eugen>cd C:\dotnet\winforms\helloapp

C:\dotnet\winforms\helloapp>dotnet new winforms
Шаблон "Приложение Windows Forms" успешно создан.

Идет обработка действий после создания...
Восстановление C:\dotnet\winforms\helloapp\helloapp.csproj:
  Определение проектов для восстановления...
  Восстановлен C:\dotnet\winforms\helloapp\helloapp.csproj (за 1,04 sec).
Восстановление выполнено.



C:\dotnet\winforms\helloapp>

После выполнения этой команды у нас будет создан следующий проект:

Структура проекта Windows Forms

Рассмотрим базовую структуру простейшего стандартного проекта Windows Forms:

helloapp.csproj: стандартный файл проекта C#, который соответствует назанию проекта (по умолчанию названию каталога) и описывает все его настройки.
helloapp.csproj.user: дополнительный файл проекта C#, который хранит специфичные для текущего пользователя настройки.
Form1.cs: содержит класс формы, которая по умолчанию запускается при старте приложения
Form1.Designer.cs: он содержит определение компонентов формы, добавленных
на форму в графическом дизайнере (графический дизайнер Windows Forms на данный момент официально доступен только в Visual Studio)
Program.cs: определяет класс Program, который запускается при старте приложения и запускает форму Form1

Например, посмотрим на содержимое файла helloapp.csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net8.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>

Для компиляции приложения Windows Forms указаны следующие настройки:

OutputType: определяет выходной тип проекта. Должен иметь значение WinExe — то есть выполняемое приложение с
расширением exe под Windows
TargetFramework: определяет применяемую для компиляции версию фреймворка .NET. Поскольку при создании проекта
была выбрана версия .NET 8, а сам проект зависит от компонентов Windows, то здесь должно быть значение net7.0-windows
Nullable: подключает в проект функционалность ссылочных nullable-типов
UseWindowsForms: указывает, будет ли проект использовать Windows Forms (для этого устанавливается значение true)
ImplicitUsings: подключает в проект функциональность неявно подключаемых глобальных пространств имен

Запуск проекта

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

C:\dotnet\winforms\helloapp>dotnet run

При запуске запускается графическая форма, код которой определяет класс Form1:

Первое приложение на Windows Forms на С# с .NET CLI

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

Файл Program.cs определяет точку входа в приложение:

namespace helloapp;

static class Program
{
    [STAThread]
    static void Main()
    {
        ApplicationConfiguration.Initialize();
        Application.Run(new Form1());
    }    
}

Метод Main снабжен атрибутом [STAThread]. Этот атрибут, грубого говоря,
необходим для корректной работы компонентов Windows. В самом методе сначала вызывается метод

ApplicationConfiguration.Initialize()

который устанавливает некоторую базовую конфигурацию приложения

Затем вызывается метод

Application.Run(new Form1());

в который передается объект отображаемой по умолчанию на экране формы.

То есть, когда мы запустим приложение, сработает метод Main, в котором будет вызван метод Application.Run(new Form1()),
благодаря чему мы увидим форму Form1 на экране.

Определение формы

Теперь посмотрим на определение формы и немного изменим его. Для этого откроем файл Form1.cs в текстовом редакторе. По умолчанию он выглядит следующим образом:

namespace helloapp;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }
}

Класс формы — Form1 представляет графическую форму — фактически то окно, которое мы увидим на экране при запуске проекта.

Этот класс определяется как частичный (с модификатором partial) и наследуется от встроенного класса Form,
который содержит базовую функциональность форм.

В самом классе Form1 определен по умолчанию только конструктор, где вызывается метод InitializeComponent(), который выполняет инициализацию компонентов формы из файла дизайнера
Form1.Designer.cs. По сути именно код этого файла передается выше через вызов InitializeComponent()

Теперь изменим его код следующим образом:

namespace helloapp;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        // определяем кнопку
        Button button = new Button();
        // текст кнопки
        button.Text ="Click";
        // положение кнопки
        button.Location = new Point(50, 50);
        // размер кнопки
        button.Size = new Size { Width = 80, Height = 30 };
        // обработчик нажатия кнопки
        button.Click += (o, e) => MessageBox.Show("Hello METANIT.COM!");
        // добавление кнопки на форму
        this.Controls.Add(button);
    }
}

В данном случае на форму добавляется кнопка, и у нее настраиваются различные свойства, как текст, положение на форме, размер, а также обработчик нажатия.
Заново запустим проект, и нам отобразится та же форма, которая теперь будет содержать кнопку. И по нажатию на кнопку появится маленькое окно с сообщением.

Первое приложение на Windows Forms на С#

Источник

Создание интерфейса приложений с использованием Windows Form ( для языка C#)

Шаг 1: Установите необходимые инструменты

Установите Visual Studio : Это интегрированная среда разработки (IDE), которая поддерживает разработку приложений на C# и Windows Forms.

Вы можете скачать бесплатную версию Visual Studio Community с официального сайта Microsoft .

Шаг 2: Создайте новый проект

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

На стартовом экране выберите «Создать новый проект» .

В окне выбора типа проекта выберите «Windows Forms App (.NET

Framework)» или «Windows Forms App (.NET)» в зависимости от ваших предпочтений.

Нажмите «Далее» .

Укажите имя проекта, выберите расположение и нажмите «Создать» .

Шаг 3: Разработка интерфейса

После создания проекта откроется дизайнер форм. Здесь вы можете добавлять элементы управления, такие как кнопки, текстовые поля и метки.

В панели инструментов (Toolbox) найдите нужные элементы управления и перетащите их на форму.

Настройте свойства элементов управления в окне «Свойства» (Properties).

Можно изменить такие свойства как Text, Name. Size и др.

Шаг 4: Добавление логики

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

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

Шаг 5: Компиляция и запуск приложения

Нажмите F5 или выберите «Запуск» в меню, чтобы скомпилировать и запустить ваше приложение.

Проверьте, работает ли приложение так, как вы ожидаете.

Шаг 6: Дальнейшие шаги

Добавьте больше функциональности, изучив различные элементы управления и их свойства.

Ознакомьтесь с обработкой ошибок и отладкой.

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

Источник

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

Доброго времени суток! В этом уроке мы создадим Ваше первое приложение с графическим интерфейсом в MS Visual Studio. Это будет своего рода «Hello World» для графических приложений. Скажу сразу, что использование Windows Forms — не единственный способ создания графических приложений (приложения с графическим интерфейсом пользователя) для C# программистов, но начать изучение лучше именно с этого. И так, запускаем Visual Studio.

Запустили? Тогда к делу! Идем в главное меню и выбираем пункт «Файл — Создать — Проект», как показано на рисунке ниже.

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

В появившемся окне:

в левой части выбираем «Шаблоны — Visual C# — Windows»;
в основной области выбираем элемент «Приложение Windows Forms»;
в нижней части окна вводим имя проекта и указываем его расположение на диске.

В общем, как показано на рисунке ниже.

Опции создания проекта

Указали что нужно? Тогда нажимайте на кнопку «OK». Теперь вы должны увидеть примерно следующее (основные области выделены прямоугольниками):

Только что созданный проект

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

В области дизайнера, сейчас располагается пустая «форма», это так называемое окно, в данном случае, главное окно нашей программы. В области свойств, отображаются свойства выделенного в дизайнере элемента, в данном случае, нашей формы, ну а область обозревателя решений, содержит файлы проекта, в том числи, относящиеся и к формам (окнам) программы. А теперь, давайте немного изменим нашу форму, и запустим это первое приложение.

Для этого, выделим в дизайнере форму (для этого, можно просто кликнуть левой кнопкой мыши по форме) и перейдем в блок свойств, в котором найдем строку «Text» (слово текст, ищем в левом столбце), как показано на рисунке ниже.

Свойство «Text» основной формы приложения

Обратите внимание, в левом столбце указано имя (название свойства), а в правом — его значение.

В данном случае, мы имеем дело с текстовым свойством, и его значение, отображается в заголовке окна, так что, давайте теперь укажем там что-то свое, например, что-то вроде: «Главное окно», как показано на рисунке ниже:

Установка свойства формы

Теперь, можно собрать проект и запустить. Для этого идем в главное меню и выбираем пункт «Сборка — Собрать решение». А потом запускаем приложение, для этого выбираем пункт «Отладка — Запуск без отладки» в главном меню. В результате Вы должны увидеть окно следующее окно.

Окно первого графического приложения

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

Перейти к следующему уроку

Источник

В следующей процедуре вы создадите несколькими областями пользовательский интерфейс, который аналогичен используемому в Microsoft Outlook с папку списке сообщений области и предварительнойверсии области. Это упорядочение достигается главным образом за счет закрепления элементов управления формы.

При закреплении элемента управления, вы можете определить, какие границы родительского контейнера элемента управления он прикреплен к. Таким образом Если задать Dock свойства Right, правый край элемента управления закрепляется по правому краю родительского элемента. Кроме того закрепленной края элемента управления изменяется в совпадали с элементом управления контейнера. Дополнительные сведения о том, как Dock свойство работает, см. как: Закрепление элементов управления в формах Windows Forms.

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

Чтобы создать этот пользовательский интерфейс, поместите все элементы управления внутри SplitContainer управления, который содержит TreeView элемента управления в левой панели. На правой панели SplitContainer элемент управления содержит второй SplitContainer было управлять с помощью ListView управления выше RichTextBox элемента управления. Эти SplitContainer элементы управления позволяют размер других элементов управления в форме. Вы можете адаптировать способов, описанных в эту процедуру для создания пользовательских интерфейсов, собственным.

Чтобы создать пользовательский интерфейс в стиле Outlook программным способом

В форме объявите каждый элемент управления, который состоит из пользовательского интерфейса. В этом примере используйте TreeView, ListView, SplitContainer, и RichTextBox элементы управления для имитации пользовательского интерфейса Microsoft Outlook.

Private WithEvents treeView1 As System.Windows.Forms.TreeView  
Private WithEvents listView1 As System.Windows.Forms.ListView  
Private WithEvents richTextBox1 As System.Windows.Forms.RichTextBox  
Private WithEvents splitContainer1 As _  
    System.Windows.Forms.SplitContainer  
Private WithEvents splitContainer2 As _  
    System.Windows.Forms.SplitContainer

private System.Windows.Forms.TreeView treeView1;  
private System.Windows.Forms.ListView listView1;  
private System.Windows.Forms.RichTextBox richTextBox1;  
private System.Windows.Forms. SplitContainer splitContainer2;  
private System.Windows.Forms. SplitContainer splitContainer1;

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

Public Sub CreateOutlookUI()  
    ' Create an instance of each control being used.  
    Me.components = New System.ComponentModel.Container()  
    Me.treeView1 = New System.Windows.Forms.TreeView()  
    Me.listView1 = New System.Windows.Forms.ListView()  
    Me.richTextBox1 = New System.Windows.Forms.RichTextBox()  
    Me.splitContainer1 = New System.Windows.Forms.SplitContainer()  
    Me.splitContainer2= New System.Windows.Forms. SplitContainer()  

    ' Should you develop this into a working application,  
    ' use the AddHandler method to hook up event procedures here.  

    ' Set properties of TreeView control.  
    ' Use the With statement to avoid repetitive code.  
    With Me.treeView1  
        .Dock = System.Windows.Forms.DockStyle.Fill  
        .TabIndex = 0  
        .Nodes.Add("treeView")  
    End With  

' Set properties of ListView control.  
   With Me.listView1  
      .Dock = System.Windows.Forms.DockStyle.Top  
      .TabIndex = 2  
      .Items.Add("listView")  
   End With  

' Set properties of RichTextBox control.  
   With Me.richTextBox1  
      .Dock = System.Windows.Forms.DockStyle.Fill  
      .TabIndex = 3  
      .Text = "richTextBox1"  
   End With  

    ' Set properties of the first SplitContainer control.  
    With Me.splitContainer1  
        .Dock = System.Windows.Forms.DockStyle.Fill  
        .TabIndex = 1  
        .SplitterWidth = 4  
        .SplitterDistance = 150  
        .Orientation = Orientation.Horizontal  
        .Panel1.Controls.Add(Me.listView1)  
        .Panel2.Controls.Add(Me.richTextBox1)  
End With  

    ' Set properties of the second SplitContainer control.  
    With Me.splitContainer2  
        .Dock = System.Windows.Forms.DockStyle.Fill  
        .TabIndex = 4  
        .SplitterWidth = 4  
        .SplitterDistance = 100  
        .Panel1.Controls.Add(Me.treeView1)  
        .Panel2.Controls.Add(Me.SplitContainer1)  
End With  

' Add the main SplitContainer control to the form.  
    Me.Controls.Add(Me.splitContainer2)  
    Me.Text = "Intricate UI Example"  
End Sub

public void createOutlookUI()  
{  
    // Create an instance of each control being used.  
    treeView1 = new System.Windows.Forms.TreeView();  
    listView1 = new System.Windows.Forms.ListView();  
    richTextBox1 = new System.Windows.Forms.RichTextBox();  
    splitContainer2 = new System.Windows.Forms.SplitContainer();  
    splitContainer1 = new System.Windows.Forms.SplitContainer();  

    // Insert code here to hook up event methods.  

    // Set properties of TreeView control.  
    treeView1.Dock = System.Windows.Forms.DockStyle.Fill;  
    treeView1.TabIndex = 0;  
    treeView1.Nodes.Add("treeView");  

    // Set properties of ListView control.  
    listView1.Dock = System.Windows.Forms.DockStyle.Top;  
    listView1.TabIndex = 2;  
    listView1.Items.Add("listView");  

    // Set properties of RichTextBox control.  
    richTextBox1.Dock = System.Windows.Forms.DockStyle.Fill;  
    richTextBox1.TabIndex = 3;  
    richTextBox1.Text = "richTextBox1";  

    // Set properties of first SplitContainer control.  
    splitContainer1.Dock = System.Windows.Forms.DockStyle.Fill;  
    splitContainer2.TabIndex = 1;  
    splitContainer2.SplitterWidth = 4;  
    splitContainer2.SplitterDistance = 150;  
    splitContainer2.Orientation = Orientation.Horizontal;  
    splitContainer2.Panel1.Controls.Add(this.listView1);  
    splitContainer2.Panel1.Controls.Add(this.richTextBox1);  

    // Set properties of second SplitContainer control.  
    splitContainer2.Dock = System.Windows.Forms.DockStyle.Fill;  
    splitContainer2.TabIndex = 4;  
    splitContainer2.SplitterWidth = 4;  
    splitContainer2.SplitterDistance = 100;  
    splitContainer2.Panel1.Controls.Add(this.treeView1);  
    splitContainer2.Panel1.Controls.Add(this.splitContainer1);  

    // Add the main SplitContainer control to the form.  
    this.Controls.Add(this.splitContainer2);  
    this.Text = "Intricate UI Example";  
}

В Visual Basic добавьте вызов процедуры, созданные в New() процедуры. В визуальном элементе C#, добавьте следующую строку кода в конструктор для класса формы.
```
' Add this to the New procedure.  
CreateOutlookUI()  
```
```
// Add this to the form class's constructor.  
createOutlookUI();  
```

См. также

SplitContainer
Элемент управления SplitContainer
Практическое руководство. Создание пользовательского интерфейса с несколькими областями с использованием форм Windows Forms с помощью конструктора

Источник