Skip to content

Commit

Permalink
Merge pull request #606 from GamerVII-NET/features/introduction-to-xaml
Browse files Browse the repository at this point in the history 
[RU] Translation of the "Avalonia XAML" page
  • Loading branch information
@maxkatz6
maxkatz6 authored Jan 19, 2025
2 parents 1a9a276 + 6dc444b commit afec674
Showing 1 changed file with 44 additions and 65 deletions.
109 changes: 44 additions & 65 deletions ...aurus-plugin-content-docs/current/basics/user-interface/introduction-to-xaml.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ description: CONCEPTS

# Avalonia XAML

_Avalonia UI_ uses XAML to define a user interface. XAML is an XML-based mark-up language that is used by many UI frameworks.
_Avalonia UI_ использует XAML для описания пользовательского интерфейса. XAML — это язык разметки, основанный на XML, который применяется во многих фреймворках пользовательского интерфейса.

:::info
These pages will introduce you to how XAML is used specifically in _Avalonia UI_. For background information about how XAML is used elsewhere in Microsoft technologies, you can use these references:
На этих страницах вы узнаете, как именно XAML используется в _Avalonia UI_. Для получения общей информации о применении XAML в других технологиях Microsoft, вы можете обратиться к следующим ресурсам:

* Microsoft XAML documentation for WPF, see [here](https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/xaml-overview-wpf).
* Microsoft XAML documentation for UWP, see [here](https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview).
:::
- Документация по XAML в WPF: [ссылка](https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/xaml-overview-wpf).
- Документация по XAML в UWP: [ссылка](https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview).
:::

## AXAML File Extension
## Расширение файлов AXAML

The file extension for XAML files used elsewhere is `.xaml` but due to technical issues integrating with Visual Studio, _Avalonia UI_ uses its own `.axaml` extension - 'Avalonia XAML'.
В то время как стандартное расширение файлов XAML — `.xaml`, в _Avalonia UI_ используется собственное расширение `.axaml` (Avalonia XAML) из-за технических особенностей интеграции с Visual Studio.

## File Format
## Формат файла

A typical Avalonia XAML file looks like this:
Пример файла Avalonia XAML:

```xml
<Window xmlns="https://github.com/avaloniaui"
Expand All @@ -28,27 +28,27 @@ A typical Avalonia XAML file looks like this:
</Window>
```

In common with all XML files, there is a root element. The root element tag `<Window></Window>` defines the type of the root. This will correspond to a type of Avalonia UI control, in the above example a window.
Как и в любом XML-документе, в файле есть корневой элемент. В данном примере это `<Window></Window>`, который определяет тип корневого элемента. Этот элемент соответствует определённому контролу Avalonia UI, в данном случае окну.

The sample above uses three interesting attributes:
Пример выше использует три важных атрибута:

* `xmlns="https://github.com/avaloniaui"` - this is the XAML namespace declaration for _Avalonia UI_ itself. This is required, without it the file will not be recognised as an Avalonia XAML document.
* `xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"` - this is the declaration for the XAML language namespace.
* `x:Class="AvaloniaApplication1.MainWindow"` - this is an extension of the above declaration (for 'x') that tells the XAML compiler where to find the associated class for this file. The class is defined in a code-behind file, usually written in C#.
- `xmlns="https://github.com/avaloniaui"` — объявляет пространство имён XAML для _Avalonia UI_. Без него файл не будет распознан как документ Avalonia XAML.
- `xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"` — объявляет пространство имён для языка XAML.
- `x:Class="AvaloniaApplication1.MainWindow"` — указывает XAML-компилятору, где находится связанный класс для данного файла. Этот класс обычно описывается в C#-файле (code-behind).

:::info
For information about the code-behind concept, see [here](code-behind).
Подробнее о концепции "code-behind" можно прочитать [здесь](code-behind).
:::

## Control Elements
## Элементы управления

You can compose a UI for your application by adding XML elements that represent one of the _Avalonia UI_ controls. The element tag uses the same name as the control class name.
Вы можете создать пользовательский интерфейс (UI), добавляя XML-элементы, представляющие элементы управления _Avalonia UI_. Имя элемента совпадает с именем класса контрола.

:::info
A UI can be composed of several different types of control. To learn more about the concept of UI composition, see [here](../../concepts/ui-composition.md).
Интерфейс может состоять из множества разных элементов управления. Подробнее о создании сложного интерфейса можно прочитать [здесь](../../concepts/ui-composition.md).
:::

For example, this XAML adds a button to the content of a window:
Например, следующий код добавляет кнопку в окно:

```xml
<Window xmlns="https://github.com/avaloniaui"
Expand All @@ -58,14 +58,14 @@ For example, this XAML adds a button to the content of a window:
```

:::info
For a complete list of the _Avalonia UI_ built-in controls, see the reference [here](../../reference/controls).
Список встроенных контролов Avalonia UI можно найти [здесь](../../reference/controls).
:::

## Control Attributes
## Атрибуты элементов управления

The XML elements that represent controls have attributes corresponding to control properties that can be set. You can set a control property by adding an attribute to an element.
Атрибуты XML-элементов соответствуют свойствам контролов. Свойства можно задать, добавляя атрибуты к элементам.

For example, to specify a blue background for a button control, you add the `Background` attribute set the value to `"Blue"`. Like this:
Например, чтобы задать синий фон для кнопки, добавьте атрибут `Background`:

```xml
<Window xmlns="https://github.com/avaloniaui"
Expand All @@ -74,9 +74,9 @@ For example, to specify a blue background for a button control, you add the `Bac
</Window>
```

## Control Content
## Содержимое элементов управления

You might have noticed that the button in the above sample has its content (the 'Hello World' string) placed between its opening and closing tags. As an alternative, you can set the content attribute, as follows:
Содержимое кнопки в примере выше задаётся строкой "Hello World!", расположенной между открывающим и закрывающим тегами. Альтернативный способ — использование атрибута `Content`:

```xml
<Window xmlns="https://github.com/avaloniaui"
Expand All @@ -85,11 +85,11 @@ You might have noticed that the button in the above sample has its content (the
</Window>
```

This behaviour is specific to the content of an _Avalonia UI_ control.
Это поведение характерно для содержимого элементов управления в _Avalonia UI_.

## Data Binding
## Привязка данных

You will often use the _Avalonia UI_ binding system to link a control property to an underlying object. The link is declared using the `{Binding}` mark-up extension. For example:
Система привязки данных _Avalonia UI_ позволяет связывать свойства элементов управления с объектами. Это делается с помощью расширения разметки `{Binding}`. Например:

```xml
<Window xmlns="https://github.com/avaloniaui"
Expand All @@ -99,67 +99,46 @@ You will often use the _Avalonia UI_ binding system to link a control property t
```

:::info
For further information about the concept behind data binding, see [here](../data/data-binding).
Подробнее о концепции привязки данных можно прочитать [здесь](../data/data-binding).
:::

## Code-behind Files
## Файлы "code-behind"

Many XAML files also have an associated code-behind file that is usually written in C#, and has the file extension `.xaml.cs`.
Многие файлы XAML имеют связанный файл "code-behind", обычно написанный на C#, с расширением `.xaml.cs`.

:::info
For guidance about programming using code-behind files, see [here](code-behind).
Руководство по программированию с использованием "code-behind" доступно [здесь](code-behind).
:::

## XML Namespaces
## Пространства имён XML

In common with any XML format, in Avalonia XAML files you can declare namespaces. This allows the XML processor to find the definitions of the elements in the file.
В Avalonia XAML можно объявлять пространства имён, как и в любом XML-документе. Это позволяет процессору XML находить определения элементов.

:::info
For background information, see the Microsoft XML namespaces documentation [here](https://docs.microsoft.com/en-us/dotnet/standard/data/xml/managing-namespaces-in-an-xml-document).
Подробнее о пространствах имён XML читайте в [документации Microsoft](https://docs.microsoft.com/en-us/dotnet/standard/data/xml/managing-namespaces-in-an-xml-document).
:::

You can add a namespace using the `xmlns` attribute. The format of a namespace declaration is as follows:
Пространства имён добавляются с помощью атрибута `xmlns`. Формат объявления:

```xml
xmlns:alias="definition"
```

It is standard practice to define all the namespaces you are going to use in the root element.

Only one namespace in a file can be defined without using the alias part of the attribute name. The alias must always be unique with in a file.

The definition part of the namespace declaration can be either a URL or a code definition. Both of these are used to locate the definition of the elements in the file.

:::info
For detailed guidance on how namespace declarations work, see [here](../../guides/custom-controls/how-to-create-a-custom-controls-library.md).
:::

There are two valid syntax options for the definition part of a XAML namespace attribute that references code:
Чаще всего пространства имён объявляют в корневом элементе.

### **CLR Namespace Prefix**
### **Префикс CLR Namespace**

There is a prefix `clr-namespace:` you can use to reference both code in the current assembly and code in a referenced assembly.

For example, when the code is present in the same assembly as the XAML, you can use this syntax:

```xml
<Window ...
xmlns:myAlias1="clr-namespace:MyNamespace.AppNameSpace.UI"
... >
```

And if the code is in another referenced assembly (for example in a library), you must extend the description to include the name of the referenced assembly:
Для ссылок на код в текущей или подключённой сборке используется префикс `clr-namespace:`:

```xml
<Window ...
xmlns:myAlias2="clr-namespace:MyNameSpace.OtherAssembly;assembly=OtherAssembly"
... >
xmlns:myAlias1="clr-namespace:MyNamespace.AppNameSpace.UI"
xmlns:myAlias2="clr-namespace:MyNamespace.OtherAssembly;assembly=OtherAssembly"
```

### **Using Prefix**
### **Префикс Using**

There is an alternative prefix `using:` that you can use to reference code in the current assembly. For example:
Альтернативный префикс `using:` позволяет ссылаться на код в текущей сборке:

```xml
xmlns:myAlias3="using:MyNamespace.AppNameSpace.UI"
```
```

0 comments on commit afec674

Please sign in to comment.