{"id":16566871,"url":"https://github.com/russkyc/responsive-avalonia","last_synced_at":"2025-07-17T13:33:35.363Z","repository":{"id":257820739,"uuid":"870811615","full_name":"russkyc/responsive-avalonia","owner":"russkyc","description":"Responsive breakpoints for AvaloniaUI","archived":false,"fork":false,"pushed_at":"2025-05-24T13:42:38.000Z","size":25,"stargazers_count":28,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-26T01:47:58.741Z","etag":null,"topics":["avalonia","avaloniaui","responsive","responsive-layout"],"latest_commit_sha":null,"homepage":"https://www.nuget.org/packages/Responsive.Avalonia","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/russkyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-10T17:57:54.000Z","updated_at":"2025-06-20T05:56:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"915b468a-82a4-40fa-983a-4cf847162b75","html_url":"https://github.com/russkyc/responsive-avalonia","commit_stats":null,"previous_names":["russkyc/responsive-avalonia"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/russkyc/responsive-avalonia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/russkyc%2Fresponsive-avalonia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/russkyc%2Fresponsive-avalonia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/russkyc%2Fresponsive-avalonia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/russkyc%2Fresponsive-avalonia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/russkyc","download_url":"https://codeload.github.com/russkyc/responsive-avalonia/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/russkyc%2Fresponsive-avalonia/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265611323,"owners_count":23797859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avalonia","avaloniaui","responsive","responsive-layout"],"created_at":"2024-10-11T21:04:53.674Z","updated_at":"2025-07-17T13:33:35.357Z","avatar_url":"https://github.com/russkyc.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eResponsive.Avalonia - Use Breakpoints in AvaloniaUI\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/nuget/v/Responsive.Avalonia?color=1f72de\" alt=\"Nuget\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-.NET%20Standard%202.0-blueviolet?color=1f72de\u0026label=NET\" alt=\"\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/russkyc/responsive-avalonia\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/russkyc/responsive-avalonia\"\u003e\n    \u003cimg src=\"https://img.shields.io/nuget/dt/Responsive.Avalonia\"\u003e\n\u003c/p\u003e\n\n## Overview\n\nResponsive.Avalonia is a library that provides responsive breakpoints for AvaloniaUI applications. It allows developers\nto create responsive layouts that adapt to different screen sizes using predefined breakpoints.\n\n## Features\n\n\u003e [!NOTE]\n\u003e Custom conditions can now be added by using the `Condition` property of the `Show` control. Read more in this section: [Custom Conditions](#custom-conditions).\n\n- **Predefined Breakpoints**: Use predefined breakpoints such as `Xs`, `Sm`, `Md`, `Lg`, `Xl`, and `Xxl`.\n- **Customizable Visibility**: Control the visibility of UI elements based on the current screen width.\n- **Easy Integration**: Simple to integrate into existing AvaloniaUI projects.\n\n## Installation\n\nYou can install the library via NuGet Package Manager:\n\n```sh\ndotnet add package Responsive.Avalonia\n```\n\n## Usage\n\nAdd Namespace\n\n```xaml\nxmlns:rc=\"using:Responsive.Avalonia\"\n```\n\nThere are two controls needed to be used. The `BreakpointProvider` is the root that detects\nthe width changes, and the `Show` control contains the elements that will be shown when the width\nis within the breakpoint.\n\n```xml\n\n\u003crc:BreakpointProvider\u003e\n    \u003crc:Show Breakpoint=\"Xs\"\u003e\n        \u003cTextBlock HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" Foreground=\"White\"\n                   FontWeight=\"Medium\" FontSize=\"14\" Text=\"Visible on Small Screens\"/\u003e\n    \u003c/rc:Show\u003e\n    \u003crc:Show Breakpoint=\"Sm\"\u003e\n        \u003cTextBlock HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" Foreground=\"White\"\n                   FontWeight=\"Medium\" FontSize=\"24\" Text=\"Visible on Medium Screens\"/\u003e\n    \u003c/rc:Show\u003e\n    \u003crc:Show Breakpoint=\"MdAndUp\"\u003e\n        \u003cTextBlock HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" Foreground=\"White\"\n                   FontWeight=\"Medium\" FontSize=\"38\" Text=\"Visible on Large Screens\"/\u003e\n    \u003c/rc:Show\u003e\n\u003c/rc:BreakpointProvider\u003e\n```\n\n## Show Control Properties\n\n**Breakpoint** - Specifies the breakpoint at which the content should be visible. It is of type `Breakpoint`.\n\n| Breakpoint           | Pixel Equivalent         |\n|----------------------|--------------------------|\n| Breakpoint.Xs        | width \u003c 600px            |\n| Breakpoint.SmAndDown | width \u003c 960px            |\n| Breakpoint.Sm        | 600px \u003c= width \u003c 960px   |\n| Breakpoint.SmAndUp   | width \u003e= 600px           |\n| Breakpoint.MdAndDown | width \u003c 1280px           |\n| Breakpoint.Md        | 960px \u003c= width \u003c 1280px  |\n| Breakpoint.MdAndUp   | width \u003e= 960px           |\n| Breakpoint.LgAndDown | width \u003c 1920px           |\n| Breakpoint.Lg        | 1280px \u003c= width \u003c 1920px |\n| Breakpoint.LgAndUp   | width \u003e= 1280px          |\n| Breakpoint.XlAndDown | width \u003c 2560px           |\n| Breakpoint.Xl        | 1920px \u003c= width \u003c 2560px |\n| Breakpoint.XlAndUp   | width \u003e= 1920px          |\n| Breakpoint.Xxl       | width \u003e= 2560px          |\n\n**Condition** - A custom condition that can be used to determine the visibility of the content. It is a `Func\u003cdouble,bool\u003e` delegate\nthat returns true if the content should be visible. see the [Custom Conditions](#custom-conditions) section for more details.\n\n**Invert** - A boolean property that inverts the visibility condition. If set to true, the content will be hidden at the\n  specified breakpoint. Not that this property is also respected when using the `Condition` property.\n\n## Custom Conditions\nFor 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:\n```csharp\nusing System;\n\nnamespace SampleApp;\n\npublic static class CustomBreakpoints\n{\n    // Example implementation of a custom breakpoint for demonstration purposes.\n    public static Func\u003cdouble,bool\u003e Width600To700Condition =\u003e width =\u003e width is \u003e= 600 and \u003c 700;\n}\n```\n\nTo use this, we can set the `Condition` property of the `Show` control:\n\n```xaml\n\u003crc:Show Condition=\"{x:Static sampleApp:CustomBreakpoints.Width600To700Condition}\"\u003e\n   \u003cTextBlock Text=\"Visible if width is between 600px and 700px\" /\u003e\n\u003c/rc:Show\u003e\n```\n\u003e [!IMPORTANT]\n\u003e When using custom conditions, the `Breakpoint` property will be ignored.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusskyc%2Fresponsive-avalonia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frusskyc%2Fresponsive-avalonia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusskyc%2Fresponsive-avalonia/lists"}