Ghost1372

everything can be handy

Bubble

BubbleButton

Attributes

Name
BubbleForeground

Example

1
<dev:BubbleButton Content="Button" BubbleForeground="Pink" />

BubbleProgressButton

Attributes

Name
BubbleForeground
Content
CompletedBackground
State
ProgressForeground
IsBubbing

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<StackPanel Orientation="Horizontal"
            Spacing="10">
    <dev:BubbleProgressButton x:Name="LikeButton"
                              Content="{dev:FontIcon GlyphName=Like}"
                              GestureRecognizerHolding="OnGestureRecognizerHolding"
                              GestureRecognizerTapped="OnGestureRecognizerTapped" />
    <dev:BubbleProgressButton x:Name="CoinButton"
                              Content="{dev:FontIcon GlyphName=ButtonA}"
                              GestureRecognizerHolding="OnGestureRecognizerHolding"
                              GestureRecognizerTapped="OnGestureRecognizerTapped"
                              Value="{Binding ElementName=LikeButton, Path=Value}" />
    <dev:BubbleProgressButton x:Name="FavoriteButton"
                              Content="{dev:FontIcon GlyphName=Favicon}"
                              GestureRecognizerHolding="OnGestureRecognizerHolding"
                              GestureRecognizerTapped="OnGestureRecognizerTapped"
                              Value="{Binding ElementName=LikeButton, Path=Value}" />
</StackPanel>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
private bool _isAnimateBegin;
private readonly Storyboard _progressStoryboard;

public Init()
{
    _progressStoryboard = CreateStoryboard();
}

private void OnLikeButtonTapped(object sender, TappedRoutedEventArgs e)
{
    if (LikeButton.State != BubbleProgressState.Completed)
        LikeButton.State = BubbleProgressState.Completed;
    else
        LikeButton.State = BubbleProgressState.Idle;
}


private void OnGestureRecognizerTapped(object sender, TappedEventArgs e)
{
    var progressButton = sender as BubbleProgressButton;
    if (progressButton.State == BubbleProgressState.Idle)
        progressButton.State = BubbleProgressState.Completed;
    else
        progressButton.State = BubbleProgressState.Idle;
}


private void OnGestureRecognizerHolding(object sender, HoldingEventArgs e)
{
    var progressButton = sender as BubbleProgressButton;
    if (e.HoldingState == HoldingState.Started)
    {
        if (!_isAnimateBegin)
        {
            _isAnimateBegin = true;
            (_progressStoryboard.Children[0] as DoubleAnimation).From = progressButton.Minimum;
            (_progressStoryboard.Children[0] as DoubleAnimation).To = progressButton.Maximum;
            Storyboard.SetTarget(_progressStoryboard.Children[0] as DoubleAnimation, progressButton);
            _progressStoryboard.Begin();
        }
    }
    else
    {
        _isAnimateBegin = false;
        _progressStoryboard.Stop();
    }
}

private Storyboard CreateStoryboard()
{
    var animation = new DoubleAnimation
    {
        EnableDependentAnimation = true,
        Duration = TimeSpan.FromSeconds(2)
    };

    Storyboard.SetTargetProperty(animation, nameof(BubbleProgressButton.Value));
    var storyboard = new Storyboard();
    storyboard.Children.Add(animation);
    storyboard.Completed += OnProgressStoryboardCompleted;
    storyboard.FillBehavior = FillBehavior.Stop;
    return storyboard;
}

private void OnProgressStoryboardCompleted(object sender, object e)
{
    LikeButton.State = BubbleProgressState.Completed;
    CoinButton.State = BubbleProgressState.Completed;
    FavoriteButton.State = BubbleProgressState.Completed;
}

BubbleView

you can use BubbleView to create your custom controls. see BubbleButton Source codes for a example.

DevWinUI

Demo

you can run demo and see this feature.

0%