.png)
+
+
+
+
+
+
+
- 
-
+
- 
-
+
-
+
-
+
-
+
-
+ (5).png)
+ (1) (1).png)
+ (1) (1).png)
+ (1) (1).png)
diff --git a/docs/concepts/attached-property.md b/docs/concepts/attached-property.md
index 2647e436d..c43d16e43 100644
--- a/docs/concepts/attached-property.md
+++ b/docs/concepts/attached-property.md
@@ -2,11 +2,14 @@
description: CONCEPTS
---
+import AttachedControlDiagram from '/img/gitbook-import/assets/image (9).png';
+import AttachedLayoutPropertyDiagram from '/img/gitbook-import/assets/image (17).png';
+
# Attached Properties
-_Avalonia UI_ controls support the **attached property** concept. This is a property applied to a child control that references its container control.
+_Avalonia UI_ controls support the **attached property** concept. This is a property applied to a child control that references its container control.
-In XMAL attached properties are defined as attributes of the child control element, using the format: `ContainerClassName.AttachedPropertyName="value"`
+In XAML, attached properties are defined as attributes of the child control element using the format: `ContainerClassName.AttachedPropertyName="value"`
Here are some scenarios where an attached property is used:
@@ -14,13 +17,13 @@ Here are some scenarios where an attached property is used:
An additional control is attached to a 'host control' for some purpose. This can be used where the control usually only allows a single child in its content zone. In this scenario the attached control is not counted as part of the content, but it will be used in some other way by the container. Examples include: context menus, tool tips and flyouts.
-.png)
+.png)
+.png)
+ (2).png)
+ (1) (2).png)
+
+
+ (2) (1).png)
+ (1).png)
+ (1) (1) (1).png)
+ (1) (1).png)
+ (1) (2).png)
-
-
-
-
+ (2).png)
+
+.png)
+.png)
+ (1).png)
+.png)
+.png)
+.png)
+
+.png)
+ (2).png)
+ (1).png)
+ (2).png)
+ (3).png)
+
-  (2).png)
-
+
-
-  (1) (1) (1).png)
-
+
-
-  (2) (1).png)
-
+
+
-
-  (1) (1).png)
-
+
-
-  (1).png)
-
+
-
- 
-
+
-
- 
-
+
-
-  (1) (1).png)
-
+
-
-  (1).png)
-
+
-
- 
-
+
-
-
-
+
-
-
-
+
-
- 
-
+
-
- 
-
+
-
-  (2) (1).png)
-
+
-
-  (1) (1).png)
-
+
-
-  (1).png)
-
+
-
-  (2).png)
-
+
-
- .png)
-
+
-
-  (2).png)
-
+
-
- .png)
-
+
- (2) (2).png)
+ (3).png)
+ (2).png)
+
+
+
+
+
+
+
+
+
+ (1) (4).png)
+.gif)
+| Profile | Setting |
|---|---|
.png) | SineEaseOut |
| Profile | Setting |
|---|---|
SineEaseOut |
-
-
+
+ (3).png>)
+
+
+
+
+
+
+
+
+
+
+
+ (2).png)
+| Property | Description |
|---|---|
Canvas.Left | Attached to a child control - gives the distance between the inner left edge of the canvas content zone to the outer left edge of the child (margin zone). |
Canvas.Top | Attached to a child control - gives the distance between the inner top edge of the canvas content zone to the outer top edge of the child (margin zone). |
Canvas.Right | Attached to a child control - gives the distance between the inner right edge of the canvas content zone to the outer right edge of the child (margin zone). |
Canvas.Bottom | Attached to a child control - gives the distance between the inner bottom edge of the canvas content zone to the outer bottom edge of the child (margin zone). |
Canvas.ZIndex | Attached to a child control - this can override the default drawing sequence (see below). |
 (2).png)
+
+
+
+
+
+
+
+ (4).png)
+
+
+
+ (1).png)
+
+ (1).png)
+ (2).png)
+
+
+
+
+
+
+
+ (5) (1).png)
+
+ (2).png)
+
-The **Preferences** screen will open.
+
+
-- Back at the Preferences window, click **Marketplace** enter 'Avalonia' in the search. Click **AvaloniaRider** when it appears in the search results pane, then click **Install**.
+
- After the installation has completed, click **Restart IDE** (button appears).
- Now _JetBrains Rider_ is ready to develop _Avalonia UI_ applications.
+Now _JetBrains Rider_ is ready to develop _Avalonia UI_ applications.
diff --git a/docs/stay-up-to-date/upgrade-from-0.10.md b/docs/stay-up-to-date/upgrade-from-0.10.md
index a6cbf2520..ab64996f4 100644
--- a/docs/stay-up-to-date/upgrade-from-0.10.md
+++ b/docs/stay-up-to-date/upgrade-from-0.10.md
@@ -280,7 +280,7 @@ var focusManager = TopLevel.GetTopLevel(control).FocusManager;
In addition, the `IFocusManager` API has been changed.
-- To get the currently focused element, use `IFocusManager.GetFocusedEleemnt()`
+- To get the currently focused element, use `IFocusManager.GetFocusedElement()`
- To focus a control use `control.Focus()`
There is currently no event for listening to focus changes on `IFocusManager`. To listen for focus changes, add a listener to the `InputElement.GotFocusEvent`:
diff --git a/docs/tutorials/index.md b/docs/tutorials/index.md
index 06fb0ca7a..c35a3a8d5 100644
--- a/docs/tutorials/index.md
+++ b/docs/tutorials/index.md
@@ -14,7 +14,7 @@ A simple to do list application using the Model View View-Model (MVVM) pattern,
* `IObservable<>`
* `Observable.Merge()` with `Select()`, `Take()`, and `Subscribe()` methods.
-This is a very good introduction to the MVVM and _ReactiveUI_ techniques recommended for _Avalonia UI_ programming. Follow the tutorial [here](todo-list-app/).
+This is a very good introduction to the MVVM and _ReactiveUI_ techniques recommended for _Avalonia UI_ programming. Follow the tutorial [here](./todo-list-app/).
## Music Store App
@@ -28,4 +28,4 @@ It uses the _JetBrains Rider_ IDE running on macOS, but the steps will be equiva
The app features a highly graphical application using the MVVM pattern, and including how to display a dialog, present images and collections of data, and implement data persistence.
-Follow this demonstration [here](music-store-app/).
+Follow this demonstration [here](./music-store-app/).
diff --git a/docs/tutorials/music-store-app/add-and-layout-controls.md b/docs/tutorials/music-store-app/add-and-layout-controls.md
index 196592ed4..136abb1cc 100644
--- a/docs/tutorials/music-store-app/add-and-layout-controls.md
+++ b/docs/tutorials/music-store-app/add-and-layout-controls.md
@@ -2,6 +2,11 @@
description: TUTORIALS - Music Store App
---
+import MusicStoreBuyButtonScreenshot from './images/buy-button.png';
+import MusicStoreFinishedAddButtonScreenshot from '/img/gitbook-import/assets/image (13) (2).png';
+import MusicStoreAddStylesScreenshot from './images/add-styles.png';
+import MusicStorePrettyButtonScreenshot from './images/pretty-button.png';
+
# Add and Layout Controls
The main window of the app will eventually show a list of album covers in the user's collection, with a button at its top-right corner to allow the user to add a new album. The button will open a search dialog window to find new albums to add.
@@ -34,7 +39,7 @@ To display a button in the content zone of the main window, follow this procedur
- Click **Debug** to compile and run the project.
-
+
-  (2).png)
-
+
-
-  (3).png)
-
+
-
-  (1) (3) (1).png)
-
+
-
- 
-
+
-
- 
-
+
-| Folder Name | Description |
|---|---|
| Assets | Contains any embedded assets that are compiled into the program. Images, Icons, Fonts etc, anything that the UI might need to display, |
| Models | This is an empty folder for code that is the 'model' part of the MVVM pattern. This often contains everything else the app needs that is not part of the UI. For example: interaction with a database, Web API, or interfaces with a hardware device. |
| View Models | This is a folder for all the view models in the project, and it already contains an example. View models contain the application logic in the MVVM pattern. For example: a button is enabled only when the user has typed something; or open a dialog when the user clicks here; or show an error if the user enters too high a number type of logic in this input. |
| Views | This is a folder for all the views in the project, and it already contains the view for the application main window. Views in the MVVM pattern contain only the presentation for the application; that is layout and form, fonts, colors, icons and images. In MVVM they have only enough code to link them to the view model layer. In Avalonia UI there is only enough code to manage windows and dialogs here. |
-  (1) (3).png)
-
+
-
-  (4).png)
-
+
-
-  (3).png)
-
-
+
-
-  (1) (2).png)
-
-
+
- (2).png)
-
+
- .png)
-
+
-
- .png)
-
+
-
-  (3).png)
-
+
-
- .png)
-
-
-
-
-  (1) (1).png)
-
+
-
-  (1) (2).png)
-
+
-
-  (1).png)
-
-
+
-
- .png)
-
+In this tutorial you will create a simple to do list application using _Avalonia UI_ and the Model View View-Model (MVVM) pattern with binding to the to do list (collection) data.
+
- .png)
-
+As no other data templates match, the search will eventually reach the `ViewLocator` in the application data templates element. This will run its checks and if they pass, return an instance of the corresponding view. In your app this will be the to do list view.
+<Window ...
- xmlns:views="clr-namespace:ToDoList.Views" ..>
-
-  (1) (1).png)
-
+
-
- .png)
-
+
-
-  (2).png)
-
+
-
-
-
-
+
-  (1).png)
-
-
-
-
-  (1).png)
-
+
-
-  (3).png)
-
+
-
-  (2).png)
-
+
-.png)
+.png)
+ (2).png)
+ (1).png)
+ (1).png)
+
+.png)
+
+
+
+
+
+
-
-
+
-
-
+
-
+
-
+
-
+
+
+
+
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/control-trees.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/control-trees.md
index 3f2c6eb13..206e6631e 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/control-trees.md
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/control-trees.md
@@ -2,6 +2,10 @@
description: CONCEPTS
---
+import ControlTreesLogicalScreenshot from '/img/gitbook-import/assets/image (61).png';
+import ControlTreesVisualScreenshot from '/img/gitbook-import/assets/image (15) (2).png';
+import ControlTreesEventScreenshot from '/img/gitbook-import/assets/image (1) (1) (2).png';
+
# 控件树
_Avalonia UI_ 从应用程序的 XAML 文件中创建控件树，以便能够渲染 UI 并管理应用程序的功能。
@@ -10,7 +14,7 @@ _Avalonia UI_ 从应用程序的 XAML 文件中创建控件树，以便能够渲
逻辑控件树以 XAML 中定义的层次结构表示应用程序控件（包括主窗口）。例如：窗口中的一个控件（按钮）在另一个控件（堆栈面板）内部，将形成一个三层的逻辑树。
-
+
+
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
+
-
-
-
+
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+| 配置 | 设置 |
|---|---|
| SineEaseOut |
| 配置 | 设置 |
|---|---|
SineEaseOut |
-
-
+
+
-## 更多信息
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+