Particle.Maui
A MAUI library to display particles e.g. confetti. Should work on all platforms.
Install / Use
/learn @jmbowman1107/Particle.MauiREADME
Particle.Maui
A MAUI library to display particles e.g. confetti. Should work on all platforms. Ported from the Xamarin Forms version of this library: https://github.com/mariusmuntean/Particle.Forms
Preview
<img src="Media/sample.gif" width="640px" />API Reference
The starting point is the class ParticleView.
| BindableProperty | Default | Description |
|------------------|---------|-------------|
| IsActive | true | Whether or not the control is displaying particles. Use this property to stop and restart the particles. |
| IsRunning | true | Whether or not the control is animating particles. Use this property to pause and resume the particles. |
| HasFallingParticles | false | Whether or not falling particles should be shown. |
| FallingParticlesPerSecond | 60 | Amount of new particles to be added every second when HasFallingParticles is true. |
| AddParticlesOnTap | false | Whether or not to add particles on tap. |
| TapParticleCount | 30 | Amount of particles to add on tap when AddParticlesOnTap is true. |
| AddParticlesOnDrag | false | Whether or not to add particles on drag. |
| DragParticleCount | 60 | Amount of particles to add on drag when AddParticlesOnDrag is true. |
| DragParticleMoveType | ParticleMovetype.Fall | Particle movement type while dragging. |
| UseSKGLView | False on all platforms except Android | Whether or not to use the hardware-accelerated view for drawing. |
| ShowDebugInfo | False | Whether or not to show debug information. |
| DebugInfoColor | LawnGreen | Color to use when displaying debug information. |
<br>
These properties aren't bindable.
| Property | Default | Description |
|------------------|-|---------|
| TouchParticleGenerator | SimpleParticleGenerator | A ParticleBase generator to be used when interacting with the ParticleView |
| FallingParticleGenerator | FallingParticleGenerator | A ParticleBase generator to be used when showing particles that fall from the top edge to the bottom |
| CanvasSize | <none>| Contains the current canvas size |
<br>
Usage Sample
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:particle="clr-namespace:Particle.Maui;assembly=Particle.Maui"
x:Class="Particle.Maui.Sample.Demo2.Demo2"
Title="Custom Particles">
<ContentPage.Resources>
<x:Array Type="{x:Type Color}" x:Key="ConfettiColors">
<Color>#a864fd</Color>
<Color>#29cdff</Color>
<Color>#78ff44</Color>
<Color>#ff718d</Color>
<Color>#fdff6a</Color>
<Color>#ffcbf2</Color>
</x:Array>
</ContentPage.Resources>
<Grid VerticalOptions="FillAndExpand"
BackgroundColor="White"
Margin="0 ,0, 0, 5">
<particle:ParticleView x:Name="MyParticleCanvas"
IsActive="True"
IsRunning="True"
HasFallingParticles="True"
FallingParticlesPerSecond="20"
Margin="0, 20"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
ParticleColors="{StaticResource ConfettiColors}" />
</Grid>
</ContentPage>
Tip
To conserver resources you can pause the particles when the Page is about to disappear and resume when the Page is about to appear.
protected override void OnAppearing()
{
base.OnAppearing();
MyParticleCanvas.IsRunning = true;
}
protected override void OnDisappearing()
{
base.OnDisappearing();
MyParticleCanvas.IsRunning = false;
}
Related Skills
node-connect
354.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
112.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
354.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
354.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
