From 1763ebeb8cc6d951c5cefb494a00ac445ba0e168 Mon Sep 17 00:00:00 2001
From: "Terentev A. A." <terentev.a.a@recloud.tech>
Date: Sun, 10 Aug 2025 14:38:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D0=BE=20=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D1=81?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=B9=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20(Items?=
 =?UTF-8?q?Panel).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../current/concepts/custom-itemspanel.md     | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/concepts/custom-itemspanel.md

diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/concepts/custom-itemspanel.md b/i18n/ru/docusaurus-plugin-content-docs/current/concepts/custom-itemspanel.md
new file mode 100644
index 000000000..e7776bc6f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/concepts/custom-itemspanel.md
@@ -0,0 +1,70 @@
+---
+description: КОНЦЕПЦИИ
+---
+
+import ItemsControlCanvasScreenshot from '/img/concepts/itemscontrol-with-canvas.png';
+
+# Пользовательская панель элементов (ItemsPanel)
+
+Все элементы управления `ItemsControl` имеют панель-контейнер элементов, которая используется для компоновки их элементов. Возможно переопределить тип панели, используемой элементом управления, чтобы достичь пользовательских/альтернативных вариантов компоновки элементов в элементе управления. Этот документ предоставляет несколько примеров, демонстрирующих, как и зачем это делать.
+ 
+- [`ItemsControl`](./../reference/controls/itemscontrol)
+- [`TreeView`](./../reference/controls/treeview-1)
+- [`Carousel`](./../reference/controls/carousel)
+- [`Menu`](./../reference/controls/menu)
+- [`ComboBox`](./../reference/controls/combobox)
+- [`ListBox`](./../reference/controls/listbox) 
+
+## Пример
+Этот пример связывает коллекцию Observable с `Rectangle` (на основе данных модели представления Tile) с элементом управления `ItemsControl`. ItemsControl.ItemPanel установлен на `Canvas`, и мы используем стиль для позиционирования `Rectangle` внутри `Canvas`.
+
+```xml
+<ItemsControl ItemsSource="{Binding TileList}">
+  <ItemsControl.ItemsPanel>
+    <ItemsPanelTemplate>
+      <Canvas Width="50" Height="50" Background="Yellow" Margin="3"/>
+    </ItemsPanelTemplate>
+  </ItemsControl.ItemsPanel>
+  <ItemsControl.ItemTemplate>
+    <DataTemplate>
+      <Rectangle Fill="Green" Height="{Binding Size}" Width="{Binding Size}"/>
+    </DataTemplate>
+  </ItemsControl.ItemTemplate>
+  <ItemsControl.Styles>
+    <Style Selector="ContentPresenter"  x:DataType="vm:Tile">
+      <Setter Property="Canvas.Left" Value="{Binding TopX}"/>
+      <Setter Property="Canvas.Top" Value="{Binding TopY}"/>
+    </Style>
+  </ItemsControl.Styles>
+</ItemsControl>
+```
+
+```csharp title='C# Модель представления'
+using AvaloniaControls.Models;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+
+namespace AvaloniaControls.ViewModels
+{
+    public class MainWindowViewModel
+    {
+        public ObservableCollection<Tile> TileList { get; set; }
+        
+        public MainWindowViewModel()
+        {
+            TileList = new ObservableCollection<Tile>(new List<Tile>
+            {
+                new Tile(10, 10, 10),
+                new Tile(10, 20, 20),
+                new Tile(10, 30, 30),
+            });    
+        }
+    }
+}
+```
+
+```csharp title='C# Класс элемента'
+public record Tile(int Size, int TopX, int TopY);
+```
+
+<img src={ItemsControlCanvasScreenshot} alt="" />
\ No newline at end of file