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.

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

Migrate ProgressIndicator to .NET MAUI #118

Open
AgustinBonilla opened this issue Jul 27, 2023 · 0 comments
Open

Migrate ProgressIndicator to .NET MAUI #118

AgustinBonilla opened this issue Jul 27, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@AgustinBonilla
Copy link
Collaborator

We will see if we can continue using the iOS.MaterialComponents on MAUI or if we will have to try a different solution.

One possible solution that doesn't need any dependency could be drawing manually the indicator with MAUI shapes and animating it manually with rotations.

I leave a possible solution of draw the indicator with shapes:
`public class CustomActivityIndicatorWithShapes : Grid
{
public static readonly BindableProperty ProgressProperty =
BindableProperty.Create(nameof(Progress), typeof(double), typeof(CustomActivityIndicatorWithShapes), defaultValue: 0.0);

    public double Progress
    {
        get { return (double)GetValue(ProgressProperty); }
        set { SetValue(ProgressProperty, value); }
    }

    public static readonly BindableProperty IndicatorColorProperty =
        BindableProperty.Create(nameof(IndicatorColor), typeof(Color), typeof(CustomActivityIndicatorWithShapes), defaultValue: DefaultStyles.PrimaryColor);

    public Color IndicatorColor
    {
        get { return (Color)GetValue(IndicatorColorProperty); }
        set { SetValue(IndicatorColorProperty, value); }
    }

    public static readonly BindableProperty TrackColorProperty =
        BindableProperty.Create(nameof(TrackColor), typeof(Color), typeof(CustomActivityIndicatorWithShapes), defaultValue: Color.DarkGray);

    public Color TrackColor
    {
        get { return (Color)GetValue(TrackColorProperty); }
        set { SetValue(TrackColorProperty, value); }
    }

    protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        switch (propertyName)
        {
            case nameof(Progress):
            case nameof(IndicatorColor):
            case nameof(TrackColor):
                // TODO: REDRAW THE SHAPE

                /*
                    % = 0.75

                    stroke-dasharray = (2 * π * 40) / 2 * percentage
                    stroke-dashoffset = (1 - percentage) * stroke-dasharray

                    Semi circle track line top
                    <path d="M50,50 m-40,0 a40,40 0 0,1 80,0" fill="none" stroke="black" stroke-width="2" />

                    Semi circle indicator line top
                    <path d="M50,50 m-40,0 a40,40 0 0,1 80,0" fill="none" stroke="red" stroke-width="2" stroke-dasharray="94.248" stroke-dashoffset="23.562" />

                    Semi circle track line bottom
                    <path d="M50,50 m-40,0 a40,40 0 1,0 80,0" fill="none" stroke="black" stroke-width="2" />

                    Semi circle indicator line bottom
                    <path d="M50,50 m-40,0 a40,40 0 1,0 80,0" fill="none" stroke="red" stroke-width="2" stroke-dasharray="94.248" stroke-dashoffset="23.562" />
                 */

                var strokeDasharray = (2 * Math.PI * 40) / 2 * Progress;
                var strokeDashoffset = (1 - Progress) * strokeDasharray;

                var strokeDashArrayCollection = new DoubleCollection();
                strokeDashArrayCollection.Add(strokeDasharray);

                Children.Add(new Path
                {
                    HeightRequest = 100,
                    WidthRequest = 100,
                    Aspect = Stretch.Uniform,
                    Stroke = new SolidColorBrush(IndicatorColor),
                    Fill = new SolidColorBrush(TrackColor),
                    StrokeDashArray = strokeDashArrayCollection,
                    StrokeDashOffset = strokeDashoffset,
                    StrokeMiterLimit = 10,
                    StrokeThickness = 4,
                    Data = (PathGeometry)new PathGeometryConverter().ConvertFromInvariantString("M50,50 m-40,0 a40,40 0 0,1 80,0")
                });

                Children.Add(new Path
                {
                    HeightRequest = 100,
                    WidthRequest = 100,
                    Aspect = Stretch.Uniform,
                    Stroke = new SolidColorBrush(IndicatorColor),
                    Fill = new SolidColorBrush(TrackColor),
                    StrokeDashArray = strokeDashArrayCollection,
                    StrokeDashOffset = strokeDashoffset,
                    StrokeMiterLimit = 10,
                    StrokeThickness = 4,
                    Data = (PathGeometry)new PathGeometryConverter().ConvertFromInvariantString("M50,50 m-40,0 a40,40 0 1,0 80,0")
                });
                break;
            default:
                base.OnPropertyChanged(propertyName);
                break;
        }
    }
}`
@AgustinBonilla AgustinBonilla added the enhancement New feature or request label Jul 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant