Merge branch 'main' into deploy

.gitignore

@@ -8,6 +8,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.idea
 
 # Misc
 .DS_Store

docs/basics/data/data-binding/compiled-bindings.md

@@ -11,9 +11,25 @@ Bindings defined in the XAML are using reflection in order to find and access th
 
 ## Enable and disable compiled bindings
 
+:::info
+
+Depending on the template that was used to create the Avalonia project, compiled bindings may or may not be enabled by default. You can check this in the project file.
+
+::: 
+
+### Enable and disable globally
+
+If you want your application to use compiled bindings globally by default, you can add
+
+```markup
+<AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+```
+
+to your project file. You will still need to provide `x:DataType` for the objects you want to bind but you don't need to to set `x:CompileBindings="[True|False]"` for each `UserControl` or `Window`.
+
 ### Enable and disable per UserControl or Window
 
-Compiled bindings are not enabled by default. To enable compiled bindings, you will need to define the `DataType` of the object you want to bind to first. In [`DataTemplates`](../data-templates) there is a property `DataType`, for all other elements you can set it via `x:DataType`. Most likely you will set `x:DataType` in your root node, for example in a `Window` or an `UserControl`. You can also specify the `DataType` in the `Binding` directly.
+To enable compiled bindings, you will need to define the `DataType` of the object you want to bind to first. In [`DataTemplates`](../data-templates) there is a property `DataType`, for all other elements you can set it via `x:DataType`. Most likely you will set `x:DataType` in your root node, for example in a `Window` or an `UserControl`. You can also specify the `DataType` in the `Binding` directly.
 
 You can now enable or disable compiled bindings by setting `x:CompileBindings="[True|False]"`. All child nodes will inherit this property, so you can enable it in your root node and disable it for a specific child, if needed.
 
@@ -39,16 +55,6 @@ You can now enable or disable compiled bindings by setting `x:CompileBindings="[
 </UserControl>
 ```
 
-### Enable and disable globally
-
-If you want your application to use compiled bindings globally by default, you can add
-
-```markup
-<AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
-```
-
-to your project file. You will still need to provide `x:DataType` for the objects you want to bind but you don't need to to set `x:CompileBindings="[True|False]"` for each `UserControl` or `Window`.
-
 ## CompiledBinding-Markup
 
 If you don't want to enable compiled bindings for all child nodes, you can also use the `CompiledBinding`-markup. You still need to define the `DataType`, but you can omit `x:CompileBindings="True"`.

docs/basics/data/data-binding/data-binding-syntax.md

@@ -2,6 +2,8 @@
 description: CONCEPTS
 ---
 
+import DataBindingModeDiagram from '/img/gitbook-import/assets/image (2).png';
+
 # Data Binding Syntax
 
 In Avalonia, you can define data binding in XAML or code. To define data binding in XAML, you use the data binding mark-up extension, and this has its own syntax which is described here.
@@ -56,7 +58,7 @@ You can change how data is moved in a data binding by specifying the data bindin
 
  
 
-<img src="/img/gitbook-import/assets/image (2).png" alt=""/>
+<img src={DataBindingModeDiagram} alt=''/>
 
 For example:
 

docs/basics/data/data-binding/data-context.md

@@ -2,17 +2,22 @@
 description: CONCEPTS
 ---
 
+import DataContextBindingOverviewDiagram from '/img/gitbook-import/assets/image (56).png';
+import DataContextTreeSearchDiagram from '/img/gitbook-import/assets/image (62).png';
+import DataContextContentBindingScreenshot from '/img/gitbook-import/assets/image (20) (2).png';
+import DataContextPreviewerScreenshot from '/img/gitbook-import/assets/image (40) (1).png'
+
 # Data Context
 
 When Avalonia performs data binding, it has to locate an application object to bind to. This location is represented by a **Data Context**.
 
-<img src="/img/gitbook-import/assets/image (56).png" alt=""/>
+<img src={DataContextBindingOverviewDiagram} alt=''/>
 
 Every control in Avalonia has a property called `DataContext`, and this includes built-in controls, user controls and windows.&#x20;
 
 When binding, Avalonia performs a hierarchical search of the logical control tree, starting with the control where the binding is defined, until it finds a data context to use.&#x20;
 
-<img src="/img/gitbook-import/assets/image (62).png" alt=""/>
+<img src={DataContextTreeSearchDiagram} alt=''/>
 
 This means that a control defined in a window can use the data context of the window; or (as above) a control in a control in a window can use the window's data context.
 
@@ -72,13 +77,13 @@ In the main window file **MainWindow.axaml** you can see that the window content
 
 When the project runs, the data binder searches up the logical control tree from the text block and finds a data context set at the main window level. So the bound text appears as:
 
-<img src="/img/gitbook-import/assets/image (20) (2).png" alt=""/>
+<img src={DataContextContentBindingScreenshot} alt=""/>
 
 ## Design Data Context
 
 You may have noticed, after you first compiled this project, that the preview pane also shows the greeting.
 
-<img src="/img/gitbook-import/assets/image (40) (1).png" alt=""/>
+<img src={DataContextPreviewerScreenshot} alt=""/>
 
 This is because Avalonia can also set a data context for a control for use at design-time. You will find this useful because it means that the preview pane can show some realistic data while you adjust layout and styles.
 

docs/basics/data/data-binding/index.md

@@ -2,11 +2,13 @@
 description: CONCEPTS
 ---
 
+import DataBindingBasicOverviewDiagram from '/img/gitbook-import/assets/image (31) (1).png';
+
 # Data Binding
 
 Avalonia uses data binding to move data from application objects into UI controls, change the data in application objects in response to user input, and initiate actions on the application objects in response to commands from the user.  
 
-<img src="/img/gitbook-import/assets/image (31) (1).png" alt=""/>
+<img src={DataBindingBasicOverviewDiagram} alt=''/>
 
 In this arrangement, the control is the **binding target**, and the object is the **data source**.&#x20;
 

docs/basics/data/data-templates.md

@@ -25,7 +25,7 @@ For instance, if you have a `ListBox` that should display a collection of `Item`
  </StackPanel>
  </DataTemplate>
  </ListBox.ItemTemplate>
-<ListBox/>
+</ListBox>
 ```
 
 In this example, the Data Template defines a visual layout using a `StackPanel` container. Within the `StackPanel`, we have a `TextBlock` bound to the `Name` property of the item and an `Image` control bound to the `ImageSource` property.
@@ -36,4 +36,4 @@ Data Templates can be customized and tailored to specific scenarios. You can inc
 
 ## Further Reading
 
-For more information see the Deep Dive into to [data templates](../../concepts/templates).
+For more information see the Deep Dive into to [data templates](../../concepts/templates).

docs/basics/user-interface/animations.md

@@ -3,6 +3,8 @@ id: animations
 title: Animations
 ---
 
+import AnimationKeyframeDiagram from '/img/gitbook-import/assets/image (2) (1) (4).png';
+
 # Animations
 
 There are two types of animations in _Avalonia UI_:
@@ -14,7 +16,7 @@ There are two types of animations in _Avalonia UI_:
 
 The simplest keyframe animation will change one property value over a a specified duration by defining two keyframes with cue points at the start (0% of the duration) and the end (100% of the duration). 
 
-<img src="/img/gitbook-import/assets/image (2) (1) (4).png" alt=""/>
+<img src={AnimationKeyframeDiagram} alt=''/>
 
 The property value is then changed over time between the keyframes using the profile defined by an easing function. The default easing function is also the simplest - a straight-line interpolation between two keyframes.
 

docs/basics/user-interface/assets.md

@@ -3,13 +3,16 @@ id: assets
 title: Assets and Images
 ---
 
+import AssetIncludeFileAssetDiagram from '/img/gitbook-import/assets/image (8).png';
+import AssetIncludeLibraryAssetDiagram from '/img/gitbook-import/assets/image.png';
+
 # Assets
 
 Many applications need to include assets such as bitmaps, styles and resource dictionaries. Resource dictionaries contain graphical fundamentals that can be declared in XAML. Styles can also be written in XAML, but bitmap assets are binary files, for example PNG and JPEG formats.
 
 ## Including assets
 
-<img src='/img/gitbook-import/assets/image (8).png' alt=''/>
+<img src={AssetIncludeFileAssetDiagram} alt=''/>
 
 You include assets in an application by using the `<AvaloniaResource>` element in your project file.
 
@@ -46,7 +49,7 @@ As an alternative, you can use the rooted path:
 
 ## Library Assets
 
-<img src='/img/gitbook-import/assets/image.png' alt=''/>
+<img src={AssetIncludeLibraryAssetDiagram} alt=''/>
 
 If the asset is included in a different assembly from the XAML file, then you use the `avares:` URI scheme. For example, if the asset is contained in an assembly called `MyAssembly.dll` in a `Assets` folder, then you use:
 

docs/basics/user-interface/building-layouts/alignment-margins-and-padding.md

@@ -1,3 +1,9 @@
+import LayoutMarginsPaddingAlignmentBasicScreenshot from '/img/gitbook-import/assets/layout-margins-padding-alignment-graphic1.png';
+import LayoutMarginsPaddingAlignmentBasicAnnotatedScreenshot from '/img/gitbook-import/assets/layout-margins-padding-alignment-graphic2.png';
+import LayoutHorizontalAlignmentScreenshot from '/img/gitbook-import/assets/layout-horizontal-alignment-graphic.png';
+import LayoutVerticalAlignmentScreenshot from '/img/gitbook-import/assets/layout-vertical-alignment-graphic.png';
+import LayoutMarginsPaddingAlignmentComplexAnnotatedScreenshot from '/img/gitbook-import/assets/layout-margins-padding-aligment-graphic3.png';
+
 # Alignment, Margins and Padding
 
 An Avalonia control exposes several properties that are used to precisely position child elements. This topic discusses four of the most important properties: `HorizontalAlignment`, `Margin`, `Padding`, and `VerticalAlignment`. The effects of these properties are important to understand, because they provide the basis for controlling the position of elements in Avalonia applications.
@@ -8,7 +14,7 @@ There are numerous ways to position elements using Avalonia. However, achieving
 
 The following illustration shows a layout scenario that utilizes several positioning properties.
 
-<img src='/img/gitbook-import/assets/layout-margins-padding-alignment-graphic1.png' alt='Positioning Example'/>
+<img src={LayoutMarginsPaddingAlignmentBasicScreenshot} alt="Positioning Example"/>
 
 At first glance, the `Button` elements in this illustration may appear to be placed randomly. However, their positions are actually precisely controlled by using a combination of margins, alignments, and padding.
 
@@ -42,7 +48,7 @@ The following example describes how to create the layout in the preceding illust
 
 The following diagram provides a close-up view of the various positioning properties that are used in the preceding sample. Subsequent sections in this topic describe in greater detail how to use each positioning property.
 
-<img src='/img/gitbook-import/assets/layout-margins-padding-alignment-graphic2.png' alt='Positioning Properties'/>
+<img src={LayoutMarginsPaddingAlignmentBasicAnnotatedScreenshot} alt="Positioning Properties"/>
 
 ### Understanding Alignment Properties
 
@@ -72,7 +78,7 @@ The following example shows how to apply the `HorizontalAlignment` property to `
 
 The preceding code yields a layout similar to the following image. The positioning effects of each `HorizontalAlignment` value are visible in the illustration.
 
-<img src='/img/gitbook-import/assets/layout-horizontal-alignment-graphic.png' alt='HorizontalAlignment Sample'/>
+<img src={LayoutHorizontalAlignmentScreenshot} alt='HorizontalAlignment Sample'/>
 
 #### VerticalAlignment Property
 
@@ -112,7 +118,7 @@ The following example shows how to apply the `VerticalAlignment` property to `Bu
 
 The preceding code yields a layout similar to the following image. The positioning effects of each `VerticalAlignment` value are visible in the illustration.
 
-<img src='/img/gitbook-import/assets/layout-vertical-alignment-graphic.png' alt='VerticalAlignment property sample'/>
+<img src={LayoutVerticalAlignmentScreenshot} alt='VerticalAlignment property sample'/>
 
 ### Understanding Margin Properties
 
@@ -220,5 +226,5 @@ The following example demonstrates each of the concepts that are detailed in thi
 
 When compiled, the preceding application yields a UI that looks like the following illustration. The effects of the various property values are evident in the spacing between elements, and significant property values for elements in each column are shown within `TextBlock` elements.
 
-<img src='/img/gitbook-import/assets/layout-margins-padding-aligment-graphic3.png' alt='Several positioning properties in one application'/>
+<img src={LayoutMarginsPaddingAlignmentComplexAnnotatedScreenshot} alt="Several positioning properties in one application"/>
 

docs/basics/user-interface/building-layouts/panels-overview.md

@@ -1,6 +1,13 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import CanvasOverlapScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/CanvasExample.png';
+import DockPanelSampleScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/DockPanelExample.png';
+import GridSampleScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/GridExample.png';
+import StackPanelSampleScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/StackPanelExample.png';
+import WrapPanelSampleScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/WrapPanelExample.png';
+import UniformGridSampleScreenshot from '/img/basics/user-interface/building-layouts/panels-overview/UniformGridExample.png';
+
 # Panels Overview
 
 `Panel` elements are components that control the rendering of elements - their size and dimensions, their position, and the arrangement of their child content. _Avalonia UI_ provides a number of predefined `Panel` elements as well as the ability to construct custom `Panel` elements.
@@ -41,9 +48,7 @@ The `Canvas` element enables positioning of content according to absolute _x-_ a
 
 A `Canvas` can be instantiated simply by using XAML or code. The following example demonstrates how to use `Canvas` to absolutely position content. This code produces three 100-pixel squares. The first square is red, and its top-left (_x, y_) position is specified as (0, 0). The second square is green, and its top-left position is (100, 100), just below and to the right of the first square. The third square is blue, and its top-left position is (50, 50), thus encompassing the lower-right quadrant of the first square and the upper-left quadrant of the second. Because the third square is laid out last, it appears to be on top of the other two squares—that is, the overlapping portions assume the color of the third box.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/CanvasExample.png" alt="StackPanel Example" />
- </div>
+<img className="center" src={CanvasOverlapScreenshot} alt="StackPanel Example" />
 
 <Tabs
  defaultValue="xaml"
@@ -121,9 +126,7 @@ By default, the last child of a `DockPanel` element will "fill" the remaining, u
 
 The following example demonstrates how to partition space using a `DockPanel`. Five `Border` elements are added as children of a parent `DockPanel`. Each uses a different positioning property of a `DockPanel` to partition space. The final element "fills" the remaining, unallocated space.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/DockPanelExample.png" alt="StackPanel Example" />
- </div>
+<img className="center" src={DockPanelSampleScreenshot} alt="StackPanel Example" />
 
 <Tabs
  defaultValue="xaml"
@@ -239,9 +242,7 @@ Columns and rows defined within a `Grid` can take advantage of `Star` sizing in
 
 The following example demonstrates how to build a UI similar to that found on the Run dialog available on the Windows Start menu.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/GridExample.png" alt="Grid Example App" />
- </div>
+<img className="center" src={GridSampleScreenshot} alt="Grid Example App" />
 
 <Tabs
  defaultValue="xaml"
@@ -392,9 +393,7 @@ Although `DockPanel` can also "stack" child elements, `DockPanel` and `StackPane
 
 The following example demonstrates how to use a `StackPanel` to create a set of vertically-positioned buttons. For horizontal positioning, set the `Orientation` property to `Horizontal`.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/StackPanelExample.png" alt="StackPanel Example" />
- </div>
+<img className="center" src={StackPanelSampleScreenshot} alt="StackPanel Example" />
 
 <Tabs
  defaultValue="xaml"
@@ -449,9 +448,7 @@ myStackPanel.Children.Add(myButton3);
 
 The following example demonstrates how to create a `WrapPanel` to display `Button` controls that wrap when they reach the edge of their container.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/WrapPanelExample.png" alt="StackPanel Example" />
- </div>
+<img className="center" src={WrapPanelSampleScreenshot} alt="StackPanel Example" />
 
 <Tabs
  defaultValue="xaml"
@@ -536,9 +533,7 @@ For example, if you have 12 items and set `Rows` to 3, the `UniformGrid` will au
 
 The following example demonstrates how to define and use a `UniformGrid`. The example creates a `UniformGrid` with 3 rows and 4 columns and adds 12 rectangles as child elements.
 
- <div style={{textAlign: 'center'}}>
- <img src="/img/basics/user-interface/building-layouts/panels-overview/UniformGridExample.png" alt="StackPanel Example" />
- </div>
+<img className="center" src={UniformGridSampleScreenshot} alt="StackPanel Example" />
 
 <Tabs
  defaultValue="xaml"

docs/basics/user-interface/code-behind.md

@@ -3,13 +3,15 @@ id: code-behind
 title: Code-behind
 ---
 
+import VsSolutionExplorerScreenshot from '/img/basics/user-interface/code-behind/vs-solution-explorer.png';
+
 # Code-behind
 
 In addition to a XAML file, most Avalonia controls also have a _code-behind_ file that is commonly written in C#. The code-behind file by convention has the file extension `.axaml.cs` and is often displayed nested below the XAML file in your IDE.
 
 For instance, in the Visual Studio solution explorer, you can see a `MainWindow.axaml` file along with its code-behind file `MainWindow.axaml.cs`:
 
-![](/img/basics/user-interface/code-behind/vs-solution-explorer.png)
+<p><img src={VsSolutionExplorerScreenshot} className="medium-zoom-image" /></p>
 
 The code-behind file contains a class that shares the same name as the XAML file. For example: