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.

• 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.

You can install the library via NuGet Package Manager:

dotnet add package Responsive.Avalonia

Add Namespace

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.

<rc:BreakpointProvider>
    <rc:Show Breakpoint="Xs">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"
                   FontWeight="Medium" FontSize="14" Text="Visible on Small Screens"/>
    </rc:Show>
    <rc:Show Breakpoint="Sm">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"
                   FontWeight="Medium" FontSize="24" Text="Visible on Medium Screens"/>
    </rc:Show>
    <rc:Show Breakpoint="MdAndUp">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"
                   FontWeight="Medium" FontSize="38" Text="Visible on Large Screens"/>
    </rc:Show>
</rc:BreakpointProvider>

Breakpoint - Specifies the breakpoint at which the content should be visible. It is of type Breakpoint.

Condition - A custom condition that can be used to determine the visibility of the content. It is a Func<double,bool> delegate that returns true if the content should be visible. see the 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.

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:

using System;

namespace SampleApp;

public static class CustomBreakpoints
{
    // Example implementation of a custom breakpoint for demonstration purposes.
    public static Func<double,bool> Width600To700Condition => width => width is >= 600 and < 700;
}

To use this, we can set the Condition property of the Show control:

<rc:Show Condition="{x:Static sampleApp:CustomBreakpoints.Width600To700Condition}">
   <TextBlock Text="Visible if width is between 600px and 700px" />
</rc:Show>

This project is licensed under the MIT License. See the LICENSE file for more details.