devchive / particle.forms

A Xamarin.Forms library to display particles e.g. confetti. Should work on all platforms.

Particles.Forms

A Xamarin.Forms library to display particles e.g. confetti. Should work on all platforms.

Get it from NuGet

Preview

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.

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		Contains the current canvas size

Usage Sample

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Particle.Forms;assembly=Particle.Forms"
             x:Class="Particle.Forms.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">


        <forms: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;
        }