Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a confetti view #92

Merged
merged 7 commits into from
Sep 8, 2020
Merged

Add a confetti view #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0f69900
Re-work the projects and add the UI and Controls
mattleibow Sep 8, 2020
696d22a
Add the BlurHash implementation
mattleibow Sep 8, 2020
fa94d04
Merge remote-tracking branch 'origin/main' into dev/blurhash
mattleibow Sep 8, 2020
01e5a00
Don't allow nulls
mattleibow Sep 8, 2020
0c26193
Add the SKConfettiView and tests
mattleibow Sep 8, 2020
4d90616
Add required flags
mattleibow Sep 8, 2020
06807f1
Merge remote-tracking branch 'origin/main' into dev/confettiview
mattleibow Sep 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions samples/SkiaSharpDemo/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
x:Class="SkiaSharpDemo.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<views:BottomTabBarResources />
</ResourceDictionary.MergedDictionaries>

<converters:RoundToIntConverter x:Key="RoundToInt" />
<converters:RoundToConverter x:Key="RoundTo" />
Expand All @@ -19,6 +22,38 @@
<Setter Property="Padding" Value="0" />
</Style>

<!-- OptionButton styles -->
<ResourceDictionary>
<Style x:Key="OptionButtonStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="3" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale" Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BorderColor" Value="Black" />
<Setter Property="BorderWidth" Value="3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="TextOptionButtonStyle" TargetType="Button" BasedOn="{StaticResource OptionButtonStyle}">
<Setter Property="BackgroundColor" Value="Accent" />
<Setter Property="TextColor" Value="White" />
<Setter Property="Padding" Value="24,12" />
</Style>
</ResourceDictionary>
</ResourceDictionary>

<!-- Application resource dictionary -->
Expand Down
2 changes: 2 additions & 0 deletions samples/SkiaSharpDemo/App.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ public partial class App : Application
{
public App()
{
Device.SetFlags(new[] { "CarouselView_Experimental" });

InitializeComponent();

// register the default fonts that we want for Iconify
Expand Down
121 changes: 121 additions & 0 deletions samples/SkiaSharpDemo/Demos/Confetti/ConfettiConfig.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using SkiaSharp;
using SkiaSharp.Extended.UI.Controls;
using Xamarin.Forms;

namespace SkiaSharpDemo.Demos
{
public class ConfettiConfig : BindableObject
{
private static readonly SKPath heartGeometry = SKPath.ParseSvgPathData("M 311.92745,171.20458 170.5061,312.62594 29.08474,171.20458 A 100,100 0 0 1 170.5061,29.783225 100,100 0 0 1 311.92745,171.20458 Z");

private int minSpeed = 100;
private int maxSpeed = 200;
private double lifetime = 2;
private double duration = 5;

public ConfettiConfig(int numberOfSystems = 1)
{
NumberOfSystems = numberOfSystems;
}

public int NumberOfSystems { get; }

public int MinSpeed
{
get => minSpeed;
set
{
minSpeed = value;
OnPropertyChanged();
}
}

public int MaxSpeed
{
get => maxSpeed;
set
{
maxSpeed = value;
OnPropertyChanged();
}
}

public double Lifetime
{
get => lifetime;
set
{
lifetime = value;
OnPropertyChanged();
}
}

public double Duration
{
get => duration;
set
{
duration = value;
OnPropertyChanged();
}
}

public ObservableCollection<string> Shapes { get; } = new ObservableCollection<string>
{
"Square",
"Circle",
"Line",
};

public ObservableCollection<Color> Colors { get; } = new ObservableCollection<Color>
{
Color.FromUint(0xfffce18a),
Color.FromUint(0xffff726d),
Color.FromUint(0xfff4306d),
Color.FromUint(0xffb48def),
};

public Action<int, SKConfettiSystem>? OnCreateSystem { get; set; }

public IEnumerable<SKConfettiSystem> CreateSystems()
{
for (var i = 0; i < NumberOfSystems; i++)
{
var system = new SKConfettiSystem
{
Lifetime = Lifetime,
Emitter = SKConfettiEmitter.Stream(100, Duration),
EmitterBounds = SKConfettiEmitterBounds.Top,
Colors = new SKConfettiColorCollection(Colors),
Shapes = new SKConfettiShapeCollection(GetShapes(Shapes).SelectMany(s => s)),
MinimumInitialVelocity = MinSpeed,
MaximumInitialVelocity = MaxSpeed,
};

OnCreateSystem?.Invoke(i, system);

yield return system;
}
}

private static IEnumerable<IEnumerable<SKConfettiShape>> GetShapes(IEnumerable<string> shapes)
{
foreach (var shape in shapes)
{
yield return shape.ToLowerInvariant() switch
{
"square" => new SKConfettiShape[] { new SKConfettiSquareShape(), new SKConfettiRectShape(0.5) },
"circle" => new SKConfettiShape[] { new SKConfettiCircleShape(), new SKConfettiOvalShape(0.5) },
"line" => new[] { new SKConfettiRectShape(0.1) },
"heart" => new[] { new SKConfettiPathShape(heartGeometry) },
"star" => new[] { new ConfettiStar(5) },
_ => throw new ArgumentOutOfRangeException(nameof(shape)),
};
}
}
}
}
157 changes: 157 additions & 0 deletions samples/SkiaSharpDemo/Demos/Confetti/ConfettiPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
xmlns:views="clr-namespace:SkiaSharpDemo.Views"
x:Class="SkiaSharpDemo.Demos.ConfettiPage"
Title="Confetti">

<Grid>

<Label Text="{Binding Message}" FontSize="32" FontAttributes="Bold"
Margin="0,-150,0,0"
HorizontalOptions="Center" VerticalOptions="Center" />

<controls:SKConfettiView x:Name="confettiView">
<controls:SKConfettiView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</controls:SKConfettiView.GestureRecognizers>
</controls:SKConfettiView>

<views:BottomTabBar SelectedIndex="{Binding SelectedTab}" PagePadding="12,6">
<views:BottomTabCollection>

<!-- "add type" -->
<views:BottomTab Title="&#xf04b;" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout Orientation="Horizontal" Spacing="12"
views:OptionButtons.AllowNone="False"
views:OptionButtons.SelectionMode="Single"
views:OptionButtons.SelectedItem="{Binding ConfigName}">
<StackLayout.Resources>
<ResourceDictionary>
<Style TargetType="Button" BasedOn="{StaticResource TextOptionButtonStyle}">
<Setter Property="BindingContext" Value="{Binding Text, Source={RelativeSource Self}}" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>

<Button Text="Top" />
<Button Text="Center" />
<Button Text="Sides" />
</StackLayout>
</views:BottomTab>

<!-- colors -->
<views:BottomTab Title="&#xf53f;" HorizontalOptions="Center" VerticalOptions="Center">
<Grid RowSpacing="12" ColumnSpacing="12"
views:OptionButtons.AllowNone="False"
views:OptionButtons.SelectionMode="Multiple"
views:OptionButtons.SelectedItems="{Binding CurrentConfig.Colors}">
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="Button" BasedOn="{StaticResource OptionButtonStyle}">
<Setter Property="WidthRequest" Value="48" />
<Setter Property="HeightRequest" Value="32" />
<Setter Property="BindingContext" Value="{Binding BackgroundColor, Source={RelativeSource Self}}" />
</Style>
</ResourceDictionary>
</Grid.Resources>

<Button BackgroundColor="#fffce18a" Grid.Column="0" Grid.Row="0" />
<Button BackgroundColor="#ffff726d" Grid.Column="1" Grid.Row="0" />
<Button BackgroundColor="#fff4306d" Grid.Column="2" Grid.Row="0" />
<Button BackgroundColor="#ffb48def" Grid.Column="3" Grid.Row="0" />
<Button BackgroundColor="#ff38ba9e" Grid.Column="0" Grid.Row="1" />
<Button BackgroundColor="#ff3aaab8" Grid.Column="1" Grid.Row="1" />
<Button BackgroundColor="#ffbb3d72" Grid.Column="2" Grid.Row="1" />
<Button BackgroundColor="#ff006ded" Grid.Column="3" Grid.Row="1" />
</Grid>
</views:BottomTab>

<!-- shapes -->
<views:BottomTab Title="&#xf61f;" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout Orientation="Horizontal" Spacing="12"
views:OptionButtons.AllowNone="False"
views:OptionButtons.SelectionMode="Multiple"
views:OptionButtons.SelectedItems="{Binding CurrentConfig.Shapes}">
<StackLayout.Resources>
<ResourceDictionary>
<Style TargetType="Button" BasedOn="{StaticResource TextOptionButtonStyle}">
<Setter Property="FontFamily" Value="FontAwesome" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Padding" Value="0" />
<Setter Property="WidthRequest" Value="48" />
<Setter Property="HeightRequest" Value="48" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>

<Button Text="&#xf0c8;" BindingContext="Square" />
<Button Text="&#xf111;" BindingContext="Circle" />
<Button Text="&#xf068;" BindingContext="Line" />
<Button Text="&#xf004;" BindingContext="Heart" />
<Button Text="&#xf005;" BindingContext="Star" />
</StackLayout>
</views:BottomTab>

<views:BottomTab Title="&#xf3fd;" HorizontalOptions="Fill" VerticalOptions="Center">
<Grid ColumnDefinitions="Auto,*,30" ColumnSpacing="12" RowSpacing="12" Padding="12">
<Label Text="Min"
Grid.Column="0" Grid.Row="0"
HorizontalOptions="End" VerticalOptions="Center" />
<Slider Maximum="500" Minimum="10" Value="{Binding CurrentConfig.MinSpeed, Converter={StaticResource RoundToInt}}"
Grid.Column="1" Grid.Row="0"
VerticalOptions="Center"
MinimumTrackColor="Accent" MaximumTrackColor="Accent"
ThumbColor="Accent" />
<Label Text="{Binding CurrentConfig.MinSpeed}"
Grid.Column="2" Grid.Row="0"
HorizontalOptions="Start" VerticalOptions="Center" />

<Label Text="Max"
Grid.Column="0" Grid.Row="1"
HorizontalOptions="End" VerticalOptions="Center" />
<Slider Maximum="500" Minimum="10" Value="{Binding CurrentConfig.MaxSpeed, Converter={StaticResource RoundToInt}}"
Grid.Column="1" Grid.Row="1"
VerticalOptions="Center"
MinimumTrackColor="Accent" MaximumTrackColor="Accent"
ThumbColor="Accent" />
<Label Text="{Binding CurrentConfig.MaxSpeed}"
Grid.Column="2" Grid.Row="1"
HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</views:BottomTab>

<views:BottomTab Title="&#xf017;" HorizontalOptions="Fill" VerticalOptions="Center">
<Grid ColumnDefinitions="Auto,*,30" ColumnSpacing="12" RowSpacing="12" Padding="12">
<Label Text="Lifetime"
Grid.Column="0" Grid.Row="0"
HorizontalOptions="End" VerticalOptions="Center" />
<Slider Maximum="6" Minimum="0" Value="{Binding CurrentConfig.Lifetime, Converter={StaticResource RoundTo}, ConverterParameter=1}"
Grid.Column="1" Grid.Row="0"
VerticalOptions="Center"
MinimumTrackColor="Accent" MaximumTrackColor="Accent"
ThumbColor="Accent" />
<Label Text="{Binding CurrentConfig.Lifetime, StringFormat='{}{0}s'}"
Grid.Column="2" Grid.Row="0"
HorizontalOptions="Start" VerticalOptions="Center" />

<Label Text="Duration"
Grid.Column="0" Grid.Row="1"
HorizontalOptions="End" VerticalOptions="Center" />
<Slider Maximum="6" Minimum="0" Value="{Binding CurrentConfig.Duration, Converter={StaticResource RoundTo}, ConverterParameter=1}"
Grid.Column="1" Grid.Row="1"
VerticalOptions="Center"
MinimumTrackColor="Accent" MaximumTrackColor="Accent"
ThumbColor="Accent" />
<Label Text="{Binding CurrentConfig.Duration, StringFormat='{}{0}s'}"
Grid.Column="2" Grid.Row="1"
HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</views:BottomTab>

</views:BottomTabCollection>
</views:BottomTabBar>

</Grid>

</ContentPage>
Loading