Skip to content

Commit

Permalink
Merge branch 'main' into deploy
Browse files Browse the repository at this point in the history
# Conflicts:
#	docusaurus.config.js
  • Loading branch information
zdpcdt committed Aug 5, 2023
2 parents 35cc6a0 + 025f455 commit eb4928f
Show file tree
Hide file tree
Showing 82 changed files with 1,111 additions and 177 deletions.
2 changes: 1 addition & 1 deletion docs/basics/data/data-binding/compiled-bindings.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ If you have compiled bindings enabled in the root node (via `x:CompileBindings="
In some cases the target type of the binding expression cannot be automatically evaluated. In such cases you muss provide an explicite type cast in the binding expression.

```markup
<ItemsRepeater Items="{Binding MyItems}">
<ItemsRepeater ItemsSource="{Binding MyItems}">
<ItemsRepeater.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Expand Down
4 changes: 2 additions & 2 deletions docs/basics/user-interface/controls/builtin-controls.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ Here are some of the more commonly-used Avalonia controls, organised by catagory
|[Button](../../../reference/controls/buttons/button.md)|The basic button control - can display text, an icon or both. Has standard 'click' behavior.|
|[Repeat Button](../../../reference/controls/buttons/repeatbutton.md)|A button that raises its click event repeatedly when it is pressed and held.|
|[Radio Button](../../../reference/controls/buttons/radiobutton.md)|A button that has a selected state. It can be placed in a group so that selection of one button deselects all the others in the group.|
|[Toggle Button](../../../reference/controls/detailed-reference/togglesplitbutton.md)|A button that has a selected state and a unselected state. Subsequent clicks 'toggle' this state. A 'checked' pseudo class allows different styles to be allocated to the selected and unselected states.|
|[Toggle Button](../../../reference/controls/buttons/togglesplitbutton.md)|A button that has a selected state and a unselected state. Subsequent clicks 'toggle' this state. A 'checked' pseudo class allows different styles to be allocated to the selected and unselected states.|
|[Button Spinner](../../../reference/controls/buttons/buttonspinner.md)|A control with two spin buttons and a content zone.|
|[Split Button](../../../reference/controls/buttons/splitbutton.md)|This functions as a button with primary and secondary parts that can be pressed independently. The primary part behaves like standard button, and the secondary part opens a flyout with additional actions.|
|[Toggle Split Button](../../../reference/controls/detailed-reference/togglesplitbutton.md)|This functions as a button with primary and secondary parts that can be pressed independently. The primary part behaves like toggle button, and the secondary part opens a flyout with additional actions.|
|[Toggle Split Button](../../../reference/controls/buttons/togglesplitbutton.md)|This functions as a button with primary and secondary parts that can be pressed independently. The primary part behaves like toggle button, and the secondary part opens a flyout with additional actions.|

## Repeating Data Controls

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ Custom-drawn controls offer the highest level of customization in Avalonia. With
Custom-drawn controls are typically used where the control represents a mostly non-interactive graphical element that will not need to be themed.
:::

To create a custom-drawn control, you override the control's `OnRender` method and use low-level drawing APIs, such as `DrawingContext`, to define the control's appearance. This approach provides fine-grained control over every pixel of the control's visual representation.
To create a custom-drawn control, you override the control's `Render` method and use low-level drawing APIs, such as `DrawingContext`, to define the control's appearance. This approach provides fine-grained control over every pixel of the control's visual representation.

Creating a custom-drawn control involves the following steps:

1. **Define the Control Class**: Create a new class that derives from `Control`. This class will define the behavior and rendering logic of the control.

2. **Override the OnRender Method**: Override the `OnRender` method in the control class and use the `DrawingContext` to draw the control's content.
2. **Override the Render Method**: Override the `Render` method in the control class and use the `DrawingContext` to draw the control's content.
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,12 @@
id: index
title: Creating Controls
---

# Creating Controls

```mdx-code-block
import {DocsCardList} from '../../../../../src/components/DocsCard';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
<DocsCardList list={useCurrentSidebarCategory().items} />
```
17 changes: 9 additions & 8 deletions docs/basics/user-interface/styling/themes/fluent.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Avalonia Fluent theme is inspired by Microsoft's Fluent Design System, which is

## How to use

As a first step, [Avalonia.Themes.Fluent](https://www.nuget.org/packages/Avalonia.Themes.Fluent/) nuget package needs to be installed.
As a first step, [Avalonia.Themes.Fluent](https://www.nuget.org/packages/Avalonia.Themes.Fluent/) nuget package needs to be installed.

:::info
On how to add a nuget package, you can follow steps from the Nuget page or [Visual Studio](https://learn.microsoft.com/en-us/nuget/quickstart/install-and-use-a-package-in-visual-studio), [Rider](https://www.jetbrains.com/help/rider/Using_NuGet.html) documentation.
Expand Down Expand Up @@ -68,22 +68,22 @@ To do so, you need to define
// highlight-start
<FluentTheme.Palettes>
<!-- Palette for Light theme variant -->
<ColorPaletteResources x:Key="Light" AccentColor="Green" RegionColor="White" ErrorText="Red" />
<ColorPaletteResources x:Key="Light" Accent="Green" RegionColor="White" ErrorText="Red" />
<!-- Palette for Dark theme variant -->
<ColorPaletteResources x:Key="Dark" AccentColor="DarkGreen" RegionColor="Black" ErrorText="Yellow" />
<ColorPaletteResources x:Key="Dark" Accent="DarkGreen" RegionColor="Black" ErrorText="Yellow" />
</FluentTheme.Palettes>
// highlight-end
</FluentTheme>
</Application.Styles>
</Application>
```

While `ColorPaletteResources` has many color properties that can be overriden independently for each variant, it is possible to redefine only minimal set of what's needed, and keep everything else as per defaults. As in examples above, only a couple of colors are overriden.
While `ColorPaletteResources` has many color properties that can be overridden independently for each variant, it is possible to redefine only minimal set of what's needed, and keep everything else as per defaults. As in examples above, only a couple of colors are overridden.

If AccentColor is not overriden, Avalonia uses platform OS accent color if available.
Also, AccentColor supports bindings and can be changed in runtime. But not other properties, as they are read once after app started and are statically used for performance reasons.
If Accent is not overridden, Avalonia uses platform OS accent color if available.
Also, Accent supports bindings and can be changed in runtime. But not other properties, as they are read once after app started and are statically used for performance reasons.

It is possible to build palettes from the code behind, but same rules apply - only AccentColor can be updated dynamically, and palettes should be
It is possible to build palettes from the code behind, but same rules apply - only Accent can be updated dynamically, and palettes should be

:::note
FluentTheme supports only Dark and Light theme variants, and it's not possible to define palettes for custom variants.
Expand All @@ -92,7 +92,8 @@ FluentTheme supports only Dark and Light theme variants, and it's not possible t
## Creating custom color palettes with online editor

Microsoft Fluent Theme Editor was ported to Avalonia and now available to be used with our FluentTheme as well.
It is available on https://theme.xaml.live/ page and supports following features:
It is available on <https://theme.xaml.live/> page and supports following features:

1. Editing palette colors for both Light and Dark variants.
2. Previewing of the current palette.
3. Exporting current palettes as XAML code that can be copy pasted into `App.axaml` file.
Expand Down
81 changes: 81 additions & 0 deletions docs/concepts/headless/headless-custom.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
id: headless-custom
title: Manual Setup of Headless Platform
---

:::warning
This page explains an advanced usage scenario with the Headless platform.
We recommend using the [XUnit](headless-xunit.md) or [NUnit](headless-nunit.md) testing frameworks instead.
:::

## Install Packages

To set up the Headless platform, you need to install two packages:
- [Avalonia.Headless](https://www.nuget.org/packages/Avalonia.Headless), which also includes Avalonia.
- [Avalonia.Themes.Fluent](https://www.nuget.org/packages/Avalonia.Themes.Fluent), as even headless controls need a theme.

:::tip
The Headless platform doesn't require any specific theme, and it is possible to swap FluentTheme with any other.
:::

## Setup Application

As in any other Avalonia app, an `Application` instance needs to be created, and themes need to be applied. When using the Headless platform, the setup is not much different from a regular Avalonia app and can mostly be reused.

```xml title=App.axaml
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Tests.App">
<Application.Styles>
<FluentTheme />
</Application.Styles>
</Application>
```

And the code:

```csharp title=App.axaml.cs
using Avalonia;
using Avalonia.Headless;

public class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
}
```

## Run Headless Session

```csharp title=Program.cs
using Avalonia.Controls;
using Avalonia.Headless;

// Start Headless session passing Application type.
using var session = HeadlessUnitTestSession.StartNew(typeof(App));

// Since the Headless session has its own thread internally, we need to dispatch actions there:
await session.Dispatch(() =>
{
// Setup controls:
var textBox = new TextBox();
var window = new Window { Content = textBox };

// Open window:
window.Show();

// Focus text box:
textBox.Focus();

// Simulate text input:
window.KeyTextInput("Hello World");

// Assert:
if (textBox.Text != "Hello World")
{
throw new Exception("Assert");
}
}, CancellationToken.None);
```
91 changes: 91 additions & 0 deletions docs/concepts/headless/headless-nunit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
id: headless-nunit
title: Headless Testing with NUnit
---

## Preparation

This page assumes that NUnit project was already created.
If not, please follow NUnit "Getting Started" and "Installation" here https://docs.nunit.org/articles/nunit/getting-started/installation.html.

## Install packages

Aside from NUnit packages, we need to install two more packages:
- [Avalonia.Headless.NUnit](https://www.nuget.org/packages/Avalonia.Headless.NUnit) which also includes Avalonia.
- [Avalonia.Themes.Fluent](https://www.nuget.org/packages/Avalonia.Themes.Fluent) as even headless controls need a theme

:::tip
Headless platform doesn't require any specific theme, and it is possible to swap FluentTheme with any other.
:::

## Setup Application
As in any other Avalonia app, an `Application` instance needs to be created, and themes need to be applied. When using the Headless platform, the setup is not much different from a regular Avalonia app and can mostly be reused.

```xml title=App.axaml
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Tests.App">
<Application.Styles>
<FluentTheme />
</Application.Styles>
</Application>
```

And the code:

```csharp title=App.axaml.cs
using Avalonia;
using Avalonia.Headless;

public class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
}
```

:::note
Usually, the `BuildAvaloniaApp` method is defined in the Program.cs file, but NUnit/XUnit tests don't have it, so it is defined in the `App` file instead.
:::

## Initialize NUnit Tests

The `[AvaloniaTestApplication]` attribute wires the tests in the current project with the specific application. It needs to be defined once per project in any file.

```csharp
[assembly: AvaloniaTestApplication(typeof(TestAppBuilder))]

public class TestAppBuilder
{
public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>()
.UseHeadless(new AvaloniaHeadlessPlatformOptions());
}
```

## Test Example

```csharp
[AvaloniaTest]
public void Should_Type_Text_Into_TextBox()
{
// Setup controls:
var textBox = new TextBox();
var window = new Window { Content = textBox };

// Open window:
window.Show();

// Focus text box:
textBox.Focus();

// Simulate text input:
window.KeyTextInput("Hello World");

// Assert:
Assert.AreEqual("Hello World", textBox.Text);
}
```

Instead of the typical `[Test]` attribute, we need to use `[AvaloniaTest]` as it sets up the UI thread. Similarly, instead of `[Theory]`, there is a `[AvaloniaTheory]` attribute.
91 changes: 91 additions & 0 deletions docs/concepts/headless/headless-xunit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
id: headless-xunit
title: Headless Testing with XUnit
---

## Preparation

This page assumes that XUnit project was already created.
If not, please follow XUnit "Getting Started" and "Installation" here https://xunit.net/docs/getting-started/netfx/visual-studio.

## Install packages

Aside from XUnit packages, we need to install two more packages:
- [Avalonia.Headless.XUnit](https://www.nuget.org/packages/Avalonia.Headless.XUnit) which also includes Avalonia.
- [Avalonia.Themes.Fluent](https://www.nuget.org/packages/Avalonia.Themes.Fluent) as even headless controls need a theme

:::tip
Headless platform doesn't require any specific theme, and it is possible to swap FluentTheme with any other.
:::

## Setup Application
As in any other Avalonia app, an `Application` instance needs to be created, and themes need to be applied. When using the Headless platform, the setup is not much different from a regular Avalonia app and can mostly be reused.

```xml title=App.axaml
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Tests.App">
<Application.Styles>
<FluentTheme />
</Application.Styles>
</Application>
```

And the code:

```csharp title=App.axaml.cs
using Avalonia;
using Avalonia.Headless;

public class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
}
```

:::note
Usually, the `BuildAvaloniaApp` method is defined in the Program.cs file, but NUnit/XUnit tests don't have it, so it is defined in the `App` file instead.
:::

## Initialize XUnit Tests

The `[AvaloniaTestApplication]` attribute wires the tests in the current project with the specific application. It needs to be defined once per project in any file.

```csharp
[assembly: AvaloniaTestApplication(typeof(TestAppBuilder))]

public class TestAppBuilder
{
public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>()
.UseHeadless(new AvaloniaHeadlessPlatformOptions());
}
```

## Test Example

```csharp
[AvaloniaFact]
public void Should_Type_Text_Into_TextBox()
{
// Setup controls:
var textBox = new TextBox();
var window = new Window { Content = textBox };

// Open window:
window.Show();

// Focus text box:
textBox.Focus();

// Simulate text input:
window.KeyTextInput("Hello World");

// Assert:
Assert.Equal("Hello World", textBox.Text);
}
```

Instead of the typical `[Fact]` attribute, we need to use `[AvaloniaFact]` as it sets up the UI thread. Similarly, instead of `[Theory]`, there is a `[AvaloniaTheory]` attribute.
Loading

0 comments on commit eb4928f

Please sign in to comment.