|
|
@@ -19,7 +19,7 @@
|
|
|
|
|
|
В **C#** есть несколько технологий для созданий оконных приложений:
|
|
|
|
|
|
-* **Windows Forms** - разработка "классических" приложений Windows, считается устаревшей
|
|
|
+* **Windows Forms** - разработка "классических" приложений Windows (считается устаревшей)
|
|
|
|
|
|
**Windows Forms** — интерфейс программирования приложений (API), отвечающий за графический интерфейс пользователя и являющийся частью *Microsoft .NET Framework*. Данный интерфейс упрощает доступ к элементам интерфейса Microsoft Windows за счет создания обёртки для существующего **Win32 API** в управляемом коде. Причём управляемый код — классы, реализующие API для **Windows Forms**, не зависят от языка разработки.
|
|
|
|
|
|
@@ -55,30 +55,19 @@
|
|
|
|
|
|
## Установка Avalonia
|
|
|
|
|
|
-Avalonia мы использовать не будем, поэтому этот раздел можно пропустить
|
|
|
+>Нужно тем, кто использует Linux или MacOs
|
|
|
|
|
|
-1. В основном окне **Rider** выбрать вкладку *Configure -> Plugins*:
|
|
|
+Установите шаблоны проектов для **Avalonia**. В консоли выполните команду:
|
|
|
|
|
|
- 
|
|
|
-
|
|
|
- И установите `AvaloniaRider` (в строке поиска введите "avalonia")
|
|
|
-
|
|
|
- При установке может выдать сообщение, что плагин разработан не в **JetBrains** и использовать на свой страх - соглашаемся (**Accept**)
|
|
|
-
|
|
|
-1. После установки плагина перезагрузите IDE и установите шаблоны проектов для **Avalonia**. В консоли выполните команду:
|
|
|
-
|
|
|
- ```
|
|
|
- dotnet new install Avalonia.Templates
|
|
|
- ```
|
|
|
-
|
|
|
- >Для .NET 6.0 и более ранних версий замените install на --install.
|
|
|
- >Версию .NET можно узнать выполнив в консоли команду `dotnet --version`
|
|
|
+```
|
|
|
+dotnet new install Avalonia.Templates
|
|
|
+```
|
|
|
|
|
|
## Создание оконного приложения
|
|
|
|
|
|
### Microsoft Visual Studio
|
|
|
|
|
|
-Создайте новый проект "Приложение WPF (Майкрософт)"
|
|
|
+Создайте новый проект "Приложение WPF (Майкрософт)". Обратите внимание, что доступно два варианта: просто `.NET` и `.NET Framework`. Первый вариант использует кросплатформенную библиотеку (и мы всегда будем использовать именно его), а второй - устаревшая версия только под Windows.
|
|
|
|
|
|

|
|
|
|
|
|
@@ -92,13 +81,7 @@ Avalonia мы использовать не будем, поэтому этот
|
|
|
|
|
|
Если каких-то панелей нет на экране, то можно их найти в меню Вид.
|
|
|
|
|
|
-### Rider
|
|
|
-
|
|
|
-Запустите **Rider** и создайте новое решение:
|
|
|
-
|
|
|
-Если шаблоны установлены нормально, то в окне создания нового проекта появится секция *Other*:
|
|
|
-
|
|
|
-Выберите **Avalonia .NET Core App**
|
|
|
+>Если вы используете Linux/MacOs, то Vusual Studio вам недоступен, для разработки под эти платформы используйте Visual Studio Code
|
|
|
|
|
|
### Настройка проекта
|
|
|
|
|
|
@@ -213,11 +196,11 @@ XAML предлагает очень простую и ясную схему о
|
|
|
</Window>
|
|
|
```
|
|
|
|
|
|
-Сначала идет элемент самого высшего уровня - **Window** (я содержимое вырезал, чтобы не засорять код) и в нем уже определен элемент **Button**, представляющий кнопку.
|
|
|
+Сначала идет элемент самого высшего уровня - **Window** (я атрибуты вырезал, чтобы не засорять код) и в нем уже определен элемент **Button**, представляющий кнопку.
|
|
|
|
|
|
-Для кнопки мы можем определить свойства в виде атрибутов. Здесь определены атрибуты `x:Name` (имя кнопки), `Width`, `Height` и `Content`.
|
|
|
+Для кнопки мы можем определить свойства в виде атрибутов. Здесь определены атрибуты `x:Name` (имя кнопки, по которой мы сможем обратиться к ней из кода на C#), `Width`, `Height` и `Content`.
|
|
|
|
|
|
-Подобным образом мы можем определить и другие атрибуты, которые нам нужны. Либо мы можем не определять атрибуты, и тогда они будут использовать значения по умолчанию.
|
|
|
+Подобным образом мы можем установить и другие атрибуты, которые нам нужны. Либо мы можем не устанавливать атрибуты, и тогда они будут использовать значения по умолчанию.
|
|
|
|
|
|
Определив разметку xaml, мы можем запустить проект, и нам отобразится графически весь код xaml - то есть наша кнопка.
|
|
|
|
|
|
@@ -225,7 +208,7 @@ XAML предлагает очень простую и ясную схему о
|
|
|
|
|
|
#### Специальные символы
|
|
|
|
|
|
-При определении интерфейса в XAML мы можем столкнуться с некоторыми ограничениями. В частности, мы не можем использовать специальные символы, такие как знак амперсанда `&`, кавычки `"` и угловые скобки `<` и `>`. Например, мы хотим, чтобы текст кнопки был следующим: `<"Hello">`. У кнопки есть свойство *Content*, которое задает содержимое кнопки. И можно предположить, что нам надо написать так:
|
|
|
+При определении интерфейса в XAML мы можем столкнуться с некоторыми ограничениями. В частности, мы не можем использовать специальные символы, такие как знак амперсанда `&`, двойные кавычки `"` и угловые скобки `<` и `>`. Например, мы хотим, чтобы текст кнопки был следующим: `<"Hello">`. У кнопки есть свойство *Content*, которое задает содержимое кнопки. И можно предположить, что нам надо написать так:
|
|
|
|
|
|
```xml
|
|
|
<Button
|
|
|
@@ -466,7 +449,7 @@ xmlns:sys="clr-namespace:System;assembly=mscorlib"
|
|
|
|
|
|
### Grid (сетка)
|
|
|
|
|
|
-Это наиболее мощный и часто используемый контейнер, напоминающий обычную таблицу. Он содержит столбцы и/или строки, количество которых задает разработчик. Для определения строк используется свойство *RowDefinitions*, а для определения столбцов - свойство *ColumnDefinitions*:
|
|
|
+Это наиболее мощный и часто используемый контейнер, напоминающий обычную таблицу. Он содержит столбцы и/или строки, количество которых задает разработчик. Для определения количества строк используется свойство *RowDefinitions*, а для определения количества столбцов - свойство *ColumnDefinitions*:
|
|
|
|
|
|
```xml
|
|
|
<Grid>
|
|
|
@@ -483,7 +466,7 @@ xmlns:sys="clr-namespace:System;assembly=mscorlib"
|
|
|
</Grid>
|
|
|
```
|
|
|
|
|
|
-Каждая строка задается с помощью вложенного элемента *RowDefinition*. При этом задавать дополнительную информацию необязательно. То есть в данном случае у нас определено в гриде 3 строки.
|
|
|
+Каждая строка задается с помощью вложенного элемента *RowDefinition*. При этом задавать дополнительную информацию необязательно. То есть в данном случае у нас определено в сетке 3 строки.
|
|
|
|
|
|
Каждая столбец задается с помощью вложенного элемента *ColumnDefinition*. Таким образом, здесь мы определили 3 столбца. То есть в итоге у нас получится таблица 3х3.
|
|
|
|
|
|
@@ -602,11 +585,11 @@ xmlns:sys="clr-namespace:System;assembly=mscorlib"
|
|
|
<ColumnDefinition Width="1.5*" />
|
|
|
```
|
|
|
|
|
|
-В этом случае сумма коэффициентов равна `1 + 0.5 + 1.5 = 3`. Если у нас грид имеет ширину `300` единиц, то коэфициент `1` будет соответствовать пространству `300 / 3 = 100` единиц. Поэтому первый столбец будет иметь ширину в `100` единиц, второй - `100*0.5=50` единиц, а третий - `100 * 1.5 = 150` единиц.
|
|
|
+В этом случае сумма коэффициентов равна `1 + 0.5 + 1.5 = 3`. Если у нас сетка имеет ширину `300` единиц, то коэфициент `1` будет соответствовать пространству `300 / 3 = 100` единиц. Поэтому первый столбец будет иметь ширину в `100` единиц, второй - `100*0.5=50` единиц, а третий - `100 * 1.5 = 150` единиц.
|
|
|
|
|
|

|
|
|
|
|
|
-Можно комбинировать все типы размеров. В этом случае от ширины/высоты грида отнимается ширина/высота столбцов/строк с абсолютными или автоматическими размерами, и затем оставшееся место распределяется между столбцами/строками с пропорциональными размерами:
|
|
|
+Можно комбинировать все типы размеров. В этом случае от ширины/высоты сетки отнимается ширина/высота столбцов/строк с абсолютными или автоматическими размерами, и затем оставшееся место распределяется между столбцами/строками с пропорциональными размерами:
|
|
|
|
|
|

|
|
|
|
|
|
@@ -637,7 +620,7 @@ xmlns:sys="clr-namespace:System;assembly=mscorlib"
|
|
|
|
|
|
Двигая центральную линию, разделяющую правую и левую части, мы можем устанавливать их ширину.
|
|
|
|
|
|
-Итак, чтобы использовать элемент **GridSplitter**, нам надо поместить его в ячейку в **Grid**-e. По сути это обычный элемент, такой же, как кнопка. Как выше, у нас три ячейки (так как три столбца и одна строка), и **GridSplitter** помещен во вторую ячейку. Обычно строка или столбец, в которые помещают элемент, имеет для свойств _Height_ или _Width_ значение `Auto`.
|
|
|
+Итак, чтобы использовать элемент **GridSplitter**, нам надо поместить его в ячейку в **Grid**-e. По сути это обычный элемент, такой же, как кнопка. Как выше, у нас три ячейки (так как три столбца и одна строка), и **GridSplitter** помещён во вторую ячейку. Обычно строка или столбец, в которые помещают элемент, имеет для свойств _Height_ или _Width_ значение `Auto`.
|
|
|
|
|
|
Если у нас несколько строк, и мы хотим, чтобы разделитель распространялся на несколько строк, то мы можем задать свойство _Grid.RowSpan_:
|
|
|
|