{"id":29673363,"url":"https://github.com/diyari-kurdi/shimmerui","last_synced_at":"2025-08-27T11:13:51.705Z","repository":{"id":301091710,"uuid":"1008132335","full_name":"Diyari-Kurdi/ShimmerUI","owner":"Diyari-Kurdi","description":"Shimmer effect control for WPF to indicate loading state.","archived":false,"fork":false,"pushed_at":"2025-06-27T09:42:12.000Z","size":32,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-24T21:55:37.099Z","etag":null,"topics":["csharp","shimmer","shimmer-effect","ui","ux","windows-presentation-foundation","wpf"],"latest_commit_sha":null,"homepage":"","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/Diyari-Kurdi.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":"2025-06-25T04:47:12.000Z","updated_at":"2025-08-12T13:25:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4353665-0658-422b-8b49-6d9baf80831e","html_url":"https://github.com/Diyari-Kurdi/ShimmerUI","commit_stats":null,"previous_names":["diyari-kurdi/shimmerui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Diyari-Kurdi/ShimmerUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diyari-Kurdi%2FShimmerUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diyari-Kurdi%2FShimmerUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diyari-Kurdi%2FShimmerUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diyari-Kurdi%2FShimmerUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Diyari-Kurdi","download_url":"https://codeload.github.com/Diyari-Kurdi/ShimmerUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diyari-Kurdi%2FShimmerUI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272325255,"owners_count":24914617,"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","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["csharp","shimmer","shimmer-effect","ui","ux","windows-presentation-foundation","wpf"],"created_at":"2025-07-22T22:01:15.504Z","updated_at":"2025-08-27T11:13:51.697Z","avatar_url":"https://github.com/Diyari-Kurdi.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ShimmerWPF_Icon_256](https://github.com/user-attachments/assets/644ff578-2eaa-416e-92ef-206f5ff0e432)\n\n# Shimmer.Wpf\n\n**Shimmer.Wpf** is a customizable WPF control that displays a shimmer loading effect to enhance the user experience during data loading.\n\n![Light](https://github.com/user-attachments/assets/9bc9c224-6539-4294-b459-731de6fc8585)  ![Dark](https://github.com/user-attachments/assets/d2f05eff-5e13-4397-b37f-ecbc5f865af8)\n\n\n## ✨ Features\n\n- ⚡ **Fast \u0026 Lightweight** – Optimized for smooth WPF performance.\n- 🎨 **Fully Customizable** – Shimmer color, speed, width, opacity, duration, and corner radius.\n- 🔄 **MVVM-Friendly** – `IsShimmering` is a bindable dependency property.\n- 🚀 **Auto-Start Support** – Automatically starts shimmer on load if enabled.\n- 🖥️ **Design-Time Support** – Preview shimmer directly in XAML designer.\n- 🧩 **Group Control** – Manage grouped shimmer controls via `StartGroup`, `StopGroup`, and `ToggleGroup`.\n- 🌐 **Global Control** – Control all shimmer instances using static methods: `StartAll`, `StopAll`, `ToggleAll`.\n- 📡 **Event Hooks** – React to shimmer lifecycle events at instance, group, or global level.\n\n\n## 📦 Installation\n\n```sh\nInstall-Package Shimmer.Wpf\n```\n\nor with .NET CLI:\n\n```sh\ndotnet add package Shimmer.Wpf\n```\n\n### 🚀 Example Usage\n\n#### ✅ **1. Content with its own CornerRadius**\n\n```xml\n\u003cshimmer:ShimmerControl AutoStart=\"True\"\u003e\n    \u003cBorder Width=\"150\"\n            Height=\"150\"\n            CornerRadius=\"20\"\n            Background=\"#444\"\u003e\n        \u003cTextBlock Text=\"Rounded Content\"\n                   HorizontalAlignment=\"Center\"\n                   VerticalAlignment=\"Center\"\n                   Foreground=\"White\"/\u003e\n    \u003c/Border\u003e\n\u003c/shimmer:ShimmerControl\u003e\n```\n\n\u003e ✅ The control detects `CornerRadius` from the content if present.\n\n---\n\n#### ✅ **2. ShimmerControl with CornerRadius**\n\n```xml\n\u003cshimmer:ShimmerControl\n    Width=\"200\"\n    Height=\"30\"\n    AutoStart=\"True\"\n    CornerRadius=\"15\"\n    ShimmerDuration=\"0:0:0.8\"\u003e\n    \u003cTextBlock\n        HorizontalAlignment=\"Center\"\n        VerticalAlignment=\"Center\"\n        FontSize=\"24\"\n        Text=\"Hello World\" /\u003e\n\u003c/shimmer:ShimmerControl\u003e\n```\n\n\u003e ✅ Use this when your content (e.g., `TextBlock`) doesn’t support `CornerRadius`.\n\n---\n\n#### ✅ **3. Compact placeholder bars (often for skeleton loaders)**\n\n```xml\n\u003cStackPanel\u003e\n    \u003cshimmer:ShimmerControl\n        Margin=\"0,0,0,10\"\n        AutoStart=\"True\"\n        DesignModeShimmering=\"True\"\n        GroupName=\"LoadingCards\"\u003e\n        \u003cBorder\n            Width=\"200\"\n            Height=\"200\"\n            Background=\"Beige\"\n            CornerRadius=\"100\" /\u003e\n    \u003c/shimmer:ShimmerControl\u003e\n    \u003cshimmer:ShimmerControl\n        Width=\"125\"\n        Height=\"10\"\n        Margin=\"0,0,0,5\"\n        HorizontalAlignment=\"Center\"\n        AutoStart=\"True\"\n        CornerRadius=\"6\"\n        GroupName=\"LoadingCards\" /\u003e\n    \u003cshimmer:ShimmerControl\n        Width=\"80\"\n        Height=\"10\"\n        HorizontalAlignment=\"Center\"\n        AutoStart=\"True\"\n        CornerRadius=\"6\"\n        GroupName=\"LoadingCards\" /\u003e\n\u003c/StackPanel\u003e\n```\n\n---\n\n## 🧩 Usage\n\n### XAML Binding\n\nBind the shimmer state to your view model:\n\n```xml\n\u003cshimmer:ShimmerControl IsShimmering=\"{Binding IsLoading}\" /\u003e\n```\n\n### Automatic Start\n\nUse `AutoStart` to shimmer immediately when the control loads:\n\n```xml\n\u003cshimmer:ShimmerControl AutoStart=\"True\" /\u003e\n```\n\n### Controlling Shimmer Programmatically\n\nYou can control shimmer effects globally, by group, or individually using static methods:\n\n- **StartAll()** — Starts shimmer on all existing `ShimmerControl` instances.\n\n```csharp\nShimmerControl.StartAll();\n```\n\n- **StopAll()** — Stops shimmer on all instances.\n\n```csharp\nShimmerControl.StopAll();\n```\n\n- **ToggleAll()** — Toggles shimmer state on all instances.\n\n```csharp\nShimmerControl.ToggleAll();\n```\n\n- **StartGroup(string groupName)** — Starts shimmer on all controls in the specified group.\n\n```csharp\nShimmerControl.StartGroup(\"LoadingCards\");\n```\n\n- **StopGroup(string groupName)** — Stops shimmer on all controls in the specified group.\n\n```csharp\nShimmerControl.StopGroup(\"LoadingCards\");\n```\n\n- **ToggleGroup(string groupName)** — Toggles shimmer on all controls in the specified group.\n\n```csharp\nShimmerControl.ToggleGroup(\"LoadingCards\");\n```\n\n### Individual Control Methods\n\nYou can also start, stop or toggle shimmer on individual controls:\n\n```csharp\nmyShimmerControl.StartShimmering();\nmyShimmerControl.StopShimmering();\nmyShimmerControl.ToggleShimmering();\n```\n\n### Events\n\nSubscribe to static events to react to shimmer changes globally or per group:\n\n```csharp\nShimmerControl.ShimmeringGroupStarted += (s, e) =\u003e {\n    string group = e.GroupName;\n    int count = e.Count;\n    // handle group started\n};\n\nShimmerControl.ShimmeringGroupStopped += (s, e) =\u003e {\n    string group = e.GroupName;\n    int count = e.Count;\n    // handle group stopped\n};\n\nShimmerControl.ShimmeringGroupToggled += (s, e) =\u003e {\n    string group = e.GroupName;\n    int count = e.Count;\n    // handle group toggled\n};\n\nShimmerControl.AllShimmeringStarted += (s, e) =\u003e {\n    int count = e.Count;\n    // handle all shimmer started\n};\n\nShimmerControl.AllShimmeringStopped += (s, e) =\u003e {\n    int count = e.Count;\n    // handle all shimmer stopped\n};\n\nShimmerControl.AllShimmeringToggled += (s, e) =\u003e {\n    int count = e.Count;\n    // handle all shimmer toggled\n};\n```\n\n\n## 🎥 Preview\nThe recording is from the included `WPF_Demo` project, showcasing various usages of the control.\n\nhttps://github.com/user-attachments/assets/a18bda0a-75df-4751-952e-8366c51554a4\n\n## 🛠 Properties\n\n| Property                 | Description                                  |\n|--------------------------|----------------------------------------------|\n| `IsShimmering`           | Starts or stops the shimmer animation        |\n| `AutoStart`              | Starts shimmering automatically on load      |\n| `ShimmerColor`           | Highlight color of the shimmer               |\n| `ShimmerWidth`           | Width of the shimmer band                    |\n| `ShimmerOpacity`         | Opacity of the shimmer effect                |\n| `ShimmerDuration`        | Total animation cycle duration               |\n| `CornerRadius`           | Rounding of shimmer border                   |\n| `ShimmerGroup`           | Optional group identifier for group control  |\n| `ShimmerEasingFunction`  | Easing function for animation                |\n| `DesignModeShimmering`   | Enables shimmer effect in design view        |\n\n## 📄 License\n\nThis project is licensed under the [MIT License](https://github.com/Diyari-Kurdi/ShimmerUI/blob/master/LICENSE.txt).  \n© 2025 Diyari Ismael\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiyari-kurdi%2Fshimmerui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiyari-kurdi%2Fshimmerui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiyari-kurdi%2Fshimmerui/lists"}