You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
}
}`
The text was updated successfully, but these errors were encountered:
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);
The text was updated successfully, but these errors were encountered: