https://github.com/russkyc/responsive-avalonia
Responsive breakpoints for AvaloniaUI
https://github.com/russkyc/responsive-avalonia
avalonia avaloniaui responsive responsive-layout
Last synced: 8 months ago
JSON representation
Responsive breakpoints for AvaloniaUI
- Host: GitHub
- URL: https://github.com/russkyc/responsive-avalonia
- Owner: russkyc
- License: mit
- Created: 2024-10-10T17:57:54.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-24T13:42:38.000Z (9 months ago)
- Last Synced: 2025-06-26T01:47:58.741Z (8 months ago)
- Topics: avalonia, avaloniaui, responsive, responsive-layout
- Language: C#
- Homepage: https://www.nuget.org/packages/Responsive.Avalonia
- Size: 24.4 KB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Responsive.Avalonia - Use Breakpoints in AvaloniaUI
## Overview
Responsive.Avalonia is a library that provides responsive breakpoints for AvaloniaUI applications. It allows developers
to create responsive layouts that adapt to different screen sizes using predefined breakpoints.
## Features
> [!NOTE]
> Custom conditions can now be added by using the `Condition` property of the `Show` control. Read more in this section: [Custom Conditions](#custom-conditions).
- **Predefined Breakpoints**: Use predefined breakpoints such as `Xs`, `Sm`, `Md`, `Lg`, `Xl`, and `Xxl`.
- **Customizable Visibility**: Control the visibility of UI elements based on the current screen width.
- **Easy Integration**: Simple to integrate into existing AvaloniaUI projects.
## Installation
You can install the library via NuGet Package Manager:
```sh
dotnet add package Responsive.Avalonia
```
## Usage
Add Namespace
```xaml
xmlns:rc="using:Responsive.Avalonia"
```
There are two controls needed to be used. The `BreakpointProvider` is the root that detects
the width changes, and the `Show` control contains the elements that will be shown when the width
is within the breakpoint.
```xml
```
## Show Control Properties
**Breakpoint** - Specifies the breakpoint at which the content should be visible. It is of type `Breakpoint`.
| Breakpoint | Pixel Equivalent |
|----------------------|--------------------------|
| Breakpoint.Xs | width < 600px |
| Breakpoint.SmAndDown | width < 960px |
| Breakpoint.Sm | 600px <= width < 960px |
| Breakpoint.SmAndUp | width >= 600px |
| Breakpoint.MdAndDown | width < 1280px |
| Breakpoint.Md | 960px <= width < 1280px |
| Breakpoint.MdAndUp | width >= 960px |
| Breakpoint.LgAndDown | width < 1920px |
| Breakpoint.Lg | 1280px <= width < 1920px |
| Breakpoint.LgAndUp | width >= 1280px |
| Breakpoint.XlAndDown | width < 2560px |
| Breakpoint.Xl | 1920px <= width < 2560px |
| Breakpoint.XlAndUp | width >= 1920px |
| Breakpoint.Xxl | width >= 2560px |
**Condition** - A custom condition that can be used to determine the visibility of the content. It is a `Func` delegate
that returns true if the content should be visible. see the [Custom Conditions](#custom-conditions) section for more details.
**Invert** - A boolean property that inverts the visibility condition. If set to true, the content will be hidden at the
specified breakpoint. Not that this property is also respected when using the `Condition` property.
## Custom Conditions
For more granular control, custom conditions can be used instead of the standard breakpoints. As an example, here is a condition to show the element if the width of the breakpoint provider is between 600 and 700 pixels:
```csharp
using System;
namespace SampleApp;
public static class CustomBreakpoints
{
// Example implementation of a custom breakpoint for demonstration purposes.
public static Func Width600To700Condition => width => width is >= 600 and < 700;
}
```
To use this, we can set the `Condition` property of the `Show` control:
```xaml
```
> [!IMPORTANT]
> When using custom conditions, the `Breakpoint` property will be ignored.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.