{"id":13709611,"url":"https://github.com/mrxten/XamEffects","last_synced_at":"2025-05-06T16:32:04.564Z","repository":{"id":54615865,"uuid":"98308510","full_name":"mrxten/XamEffects","owner":"mrxten","description":"📱 Xamarin.Forms UI effects","archived":false,"fork":false,"pushed_at":"2021-02-08T10:25:04.000Z","size":3166,"stargazers_count":248,"open_issues_count":12,"forks_count":41,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-03T16:49:17.396Z","etag":null,"topics":[],"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/mrxten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-25T13:21:53.000Z","updated_at":"2024-07-31T09:56:57.000Z","dependencies_parsed_at":"2022-08-13T21:40:34.115Z","dependency_job_id":null,"html_url":"https://github.com/mrxten/XamEffects","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrxten%2FXamEffects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrxten%2FXamEffects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrxten%2FXamEffects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrxten%2FXamEffects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrxten","download_url":"https://codeload.github.com/mrxten/XamEffects/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252454572,"owners_count":21750492,"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":[],"created_at":"2024-08-02T23:00:42.443Z","updated_at":"2025-05-06T16:32:03.374Z","avatar_url":"https://github.com/mrxten.png","language":"C#","readme":"\u003cimg src=\"/nuget/XamEffects_icon.png\" height=\"100\"/\u003e\n\n# XamEffects - UI effects for Xamarin.Forms\n[![NuGet](https://img.shields.io/nuget/v/xameffects.svg?maxAge=259200\u0026style=flat)](http://www.nuget.org/packages/XamEffects/)\n\n### Setup\n```bash\nInstall-Package XamEffects\n```\n* You have to install this nuget package to Xamarin.Forms project and each platform project.\n* Call after ```Forms.Init(...)```:\n    * ```XamEffects.iOS.Effects.Init();``` for iOS AppDelegate in **FinishedLaunching**\n    * ```XamEffects.Droid.Effects.Init();``` for Android MainActivity in **OnCreate**\n\n|Platform|Minimum version|\n|------------|------------|\n|iOS|8|\n|Android|4.1 (API 16)|\n|Xamarin.Forms|2.5.0|\n|.NETStandard|1.0|\n\n### Features\n* [TouchEffect](#toucheffect) - Add touch effect to views.\n* [Commands](#commands) - Add command to views.\n* [BorderView](#borderview) - View with borders, corner radius and clipping to bounds.\n* [EffectsConfig](#effectsconfig) - Config for effects.\n\n\n## TouchEffect\nAdd touch effect to views.\n\nFor Android API \u003e=21 using Ripple effect, for Android API \u003c21 and iOS using animated highlighted view.\n\n|iOS|Android API \u003e=21|Android API \u003c21|\n|------------|------------|------------|\n\u003cimg src=\"images/touch/ios.gif\" width=\"450\"/\u003e|\u003cimg src=\"images/touch/android.gif\" width=\"450\"/\u003e|\u003cimg src=\"images/touch/old_android.gif\" width=\"450\"/\u003e\n\n\n|Property|Type|Value type|Default|Description|\n|------------|------------|------------|------------|------------|\n|Color|bindable attached|Color|Color.Default|Front/Ripple color when touched. For deactivate effect set Color.Default value. If color will have alpha channel is 255 effect will change it to ±80.|\n    \n### Example \n```xml\n\u003cContentPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:local=\"clr-namespace:XamEffects.Sample\"\n             xmlns:xe=\"clr-namespace:XamEffects;assembly=XamEffects\"\n             x:Class=\"XamEffects.Sample.MainPage\"\u003e\n    \u003cGrid HorizontalOptions=\"Center\"\n          VerticalOptions=\"Center\"\n          HeightRequest=\"100\"\n          WidthRequest=\"200\"\n          BackgroundColor=\"LightGray\" \n          xe:TouchEffect.Color=\"Red\"\u003e\n        \u003cLabel Text=\"Test touch effect\"\n               HorizontalOptions=\"Center\"\n               VerticalOptions=\"Center\"/\u003e\n    \u003c/Grid\u003e\n\u003c/ContentPage\u003e\n```\n\n```csharp\nTouchEffect.SetColor(view, Color.Red);\n```\n\n### Important \u0026 known issues\n* Effect may not work in views with enabled [Fast Renderers](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/internals/fast-renderers).\n* Effect may not work in views with another gestures and effects like Button, Slider, Picker, Entry, Editor etc.\n* Effect may not work correctly with standard gestures in Xamarin.Forms. If you need some gestures with touch effect, use not GestureRecognizer, but [Commands](#commands).\n\nIf effect doesn't work, try wrap view with ContentView and add effect to wrapper.\n\n## Commands\nAdd command to views.\n\n|Property|Type|Value type|Default|Description|\n|------------|------------|------------|------------|------------|\n|Tap|bindable attached|ICommand|null|Tap command|\n|TapParameter|bindable attached|object|null|Tap command parameter|\n|LongTap|bindable attached|ICommand|null|Long tap command|\n|LongTapParameter|bindable attached|object|null|Long tap command parameter|\n    \n### Example \n```xml\n\u003cContentPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:local=\"clr-namespace:XamEffects.Sample\"\n             xmlns:xe=\"clr-namespace:XamEffects;assembly=XamEffects\"\n             x:Class=\"XamEffects.Sample.MainPage\"\u003e\n    \u003cGrid HorizontalOptions=\"Center\"\n          VerticalOptions=\"Center\"\n          HeightRequest=\"100\"\n          WidthRequest=\"200\"\n          BackgroundColor=\"LightGray\" \n          xe:Commands.Tap=\"{Binding TapCommand}\"\n          xe:Commands.LongTap=\"{Binding LongTapCommand}\"\u003e\n        \u003cLabel Text=\"Test commands\"\n               HorizontalOptions=\"Center\"\n               VerticalOptions=\"Center\"/\u003e\n    \u003c/Grid\u003e\n\u003c/ContentPage\u003e\n```\n\n```csharp\nCommands.SetTap(view, new Command(() =\u003e {\n  //do something\n}));\nCommands.SetTapParameter(view, someObject);\n```\n\n## BorderView\nView with borders, corner radius and clipping to bounds. View based on ContentView, you can specify child through Content property.\n\n|Property|Type|Value type|Default|Description|\n|------------|------------|------------|------------|------------|\n|CornerRadius|bindable attached|double|0|Corner radius|\n|BorderWidth|bindable attached|double|0|Border width|\n|BorderColor|bindable attached|Color|Color.Default|Border color|\n\n### Example \n```xml\n\u003cContentPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:local=\"clr-namespace:XamEffects.Sample\"\n             xmlns:xe=\"clr-namespace:XamEffects;assembly=XamEffects\"\n             x:Class=\"XamEffects.Sample.MainPage\"\u003e\n    \u003cxe:BorderView \n          HeightRequest=\"100\"\n          WidthRequest=\"200\"\n          HorizontalOptions=\"Center\"\n          VerticalOptions=\"Center\"\n          BackgroundColor=\"LightGray\"\n          CornerRadius=\"15\"\n          BorderColor=\"Green\"\n          BorderWidth=\"2\"\u003e\n        \u003cLabel HorizontalOptions=\"Center\"\n               VerticalOptions=\"Center\"\n               Text=\"Some content\"/\u003e\n    \u003c/xe:BorderView\u003e\n\u003c/ContentPage\u003e\n```\n\nWhy view, not effect like other features? Firstly I planned to do this. For iOS there are no problems, but for Android for clipping to rounded corners need override DispatchDraw from native view, that isn't possible from effect.\n\n### Important \u0026 known issues\n* Padding work incorrectly in Android. Use margin in child view.\n\n## EffectsConfig\n\nConfigs and helpers for effects.\n\n|Property|Type|Value type|Default|Description|\n|------------|------------|------------|------------|------------|\n|AutoChildrenInputTransparent|usual static|bool|True|Set ChildrenInputTransparent automatically for views with TouchEffect or Command. If value is True you **DON'T** need manually configure **ChildrenInputTransparent**. |\n|ChildrenInputTransparent|bindable attached|bool|False|If you use **TouchEffect** or **Commands** for Layout (Grid, StackLayout, etc.) and EffectsConfig.AutoChildrenInputTransparent is False you have to set this parameter to True otherwise in Android layout's children will overlaps these effects. Also you can set `InputTransparent = True` for each children (EXCEPT views using any effect) manually.|\n\n## License\nMIT Licensed.\n\n## To do\nSupport UWP\n\n### Release notes\nMoved to [Release notes](ReleaseNotes.md)\n","funding_links":[],"categories":["UI","Effects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxten%2FXamEffects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrxten%2FXamEffects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxten%2FXamEffects/lists"}