Sample Code: Step 1: Create a class StepProgressBar.cs Step 2: Paste the below code. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace Xamarin.Custom.Controls { public class StepProgressBar : StackLayout { Color blueColor = Color.FromHex("#009DD9"); Color redColor = Color.FromHex("#e21836"); Color grayColor = Color.FromHex("#dbdcdd"); Color whiteColor = Color.White; Color blackColor = Color.Black; public static readonly BindableProperty StepBarProperty = BindableProperty.Create(nameof(StepBar), typeof(StepProgressDTO), typeof(StepProgressBar), null, defaultBindingMode: BindingMode.TwoWay); public StepProgressDTO StepBar { get { return (StepProgressDTO)GetValue(StepBarProperty); } set { SetValue(StepBarProperty, value); } } public StepProgressBar() { Orientation
Sample Code:
Step 1: Create a class StepProgressBar.cs
Step 2: Paste the below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace Xamarin.Custom.Controls
{
public class StepProgressBar : StackLayout
{
Color blueColor = Color.FromHex("#009DD9");
Color redColor = Color.FromHex("#e21836");
Color grayColor = Color.FromHex("#dbdcdd");
Color whiteColor = Color.White;
Color blackColor = Color.Black;
public static readonly BindableProperty StepBarProperty = BindableProperty.Create(nameof(StepBar), typeof(StepProgressDTO), typeof(StepProgressBar), null, defaultBindingMode: BindingMode.TwoWay);
public StepProgressDTO StepBar
{
get { return (StepProgressDTO)GetValue(StepBarProperty); }
set { SetValue(StepBarProperty, value); }
}
public StepProgressBar()
{
Orientation = StackOrientation.Horizontal;
HorizontalOptions = LayoutOptions.FillAndExpand;
Padding = new Thickness(10, 0);
Spacing = 0;
AddStyles();
}
protected override void OnPropertyChanged(string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == StepBarProperty.PropertyName && StepBar != null)
{
AddStyles();
if (StepBar.StepsCount > 0)
{
this.Children.Clear();
var separatorLinePrefix = CreateSeparator();
this.Children.Add(separatorLinePrefix);
for (int i = 0; i < StepBar.StepsCount; i++)
{
var button = CreateStep(i + 1);
this.Children.Add(button);
if (i < StepBar.StepsCount - 1)
{
var separatorLine = CreateSeparator();
this.Children.Add(separatorLine);
}
}
var separatorLineSuffix = CreateSeparator();
this.Children.Add(separatorLineSuffix);
}
if (StepBar.AttentionRequiredSteps != null && StepBar.AttentionRequiredSteps.Count > 0)
{
foreach (var item in StepBar.AttentionRequiredSteps)
{
var children = this.Children.First(p => (!string.IsNullOrEmpty(p.ClassId) && Convert.ToInt32(p.ClassId) == item));
if (children != null)
{
AttentionRequiredElement(children as Frame);
}
}
}
if (StepBar.SelectedStep > 0)
{
var children = this.Children.First(p => (!string.IsNullOrEmpty(p.ClassId) && Convert.ToInt32(p.ClassId) == StepBar.SelectedStep));
if (children != null)
{
if (StepBar.AttentionRequiredSteps.Any(x => x == StepBar.SelectedStep))
{
SelectedAttentionRequiredElement(children as Frame);
}
else
{
SelectedElement(children as Frame);
}
}
}
}
}
Frame CreateStep(int stepID)
{
Frame step = new Frame()
{
ClassId = $"{stepID}",
Style = Resources["unSelectedFrameStyle"] as Style,
};
var button = new Button()
{
Text = $"{stepID}",
ClassId = $"{stepID}",
Style = Resources["unSelectedButtonStyle"] as Style,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
};
step.Content = button;
//button.Clicked += Handle_Clicked;
return step;
}
BoxView CreateSeparator()
{
var separatorLine = new BoxView()
{
BackgroundColor = grayColor,
HeightRequest = 5,
WidthRequest = 3,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
Margin = 0,
};
return separatorLine;
}
void Handle_Clicked(object sender, System.EventArgs e)
{
//SelectedElement(sender as Button);
}
void SelectedElement(Frame elementSelected)
{
elementSelected.Style = null;
elementSelected.Style = Resources["selectedFrameStyle"] as Style;
elementSelected.Content.Style = Resources["selectedButtonStyle"] as Style;
var button = (Button)elementSelected.Content;
button.FontAttributes = FontAttributes.Bold;
}
void AttentionRequiredElement(Frame elementSelected)
{
elementSelected.Style = null;
elementSelected.Style = Resources["unSelectedAttentionRequiredFrameStyle"] as Style;
elementSelected.Content.Style = Resources["unSelectedAttentionRequiredButtonStyle"] as Style;
}
void SelectedAttentionRequiredElement(Frame elementSelected)
{
elementSelected.Style = null;
elementSelected.Style = Resources["selectedAttentionRequiredFrameStyle"] as Style;
elementSelected.Content.Style = Resources["selectedAttentionRequiredButtonStyle"] as Style;
var button = (Button)elementSelected.Content;
button.FontAttributes = FontAttributes.Bold;
}
void AddStyles()
{
#region Frame Styles
var unSelectedFrameStyle = GetFrameStyle();
unSelectedFrameStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = grayColor });
var selectedFrameStyle = GetFrameStyle();
selectedFrameStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = blueColor });
var unSelectedAttentionRequiredFrameStyle = GetFrameStyle();
unSelectedAttentionRequiredFrameStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = grayColor });
var selectedAttentionRequiredFrameStyle = GetFrameStyle();
selectedAttentionRequiredFrameStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = blueColor });
#endregion
#region Button Styles
var unSelectedButtonStyle = GetButtonStyle();
unSelectedButtonStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = grayColor });
unSelectedButtonStyle.Setters.Add(new Setter { Property = Button.TextColorProperty, Value = blackColor });
var selectedButtonStyle = GetButtonStyle();
selectedButtonStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = blueColor });
selectedButtonStyle.Setters.Add(new Setter { Property = Button.TextColorProperty, Value = whiteColor });
selectedButtonStyle.Setters.Add(new Setter { Property = Button.FontSizeProperty, Value = FontAttributes.Bold });
var unSelectedAttentionRequiredButtonStyle = GetButtonStyle();
unSelectedAttentionRequiredButtonStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = redColor });
unSelectedAttentionRequiredButtonStyle.Setters.Add(new Setter { Property = Button.TextColorProperty, Value = whiteColor });
var selectedAttentionRequiredButtonStyle = GetButtonStyle();
selectedAttentionRequiredButtonStyle.Setters.Add(new Setter { Property = BackgroundColorProperty, Value = redColor });
selectedAttentionRequiredButtonStyle.Setters.Add(new Setter { Property = Button.TextColorProperty, Value = whiteColor });
selectedAttentionRequiredButtonStyle.Setters.Add(new Setter { Property = Button.FontSizeProperty, Value = FontAttributes.Bold });
#endregion
Resources = new ResourceDictionary
{
{ nameof(unSelectedButtonStyle), unSelectedButtonStyle },
{ nameof(selectedButtonStyle), selectedButtonStyle },
{ nameof(unSelectedAttentionRequiredButtonStyle), unSelectedAttentionRequiredButtonStyle },
{ nameof(selectedAttentionRequiredButtonStyle), selectedAttentionRequiredButtonStyle },
{ nameof(unSelectedFrameStyle), unSelectedFrameStyle },
{ nameof(selectedFrameStyle), selectedFrameStyle },
{ nameof(unSelectedAttentionRequiredFrameStyle), unSelectedAttentionRequiredFrameStyle },
{ nameof(selectedAttentionRequiredFrameStyle), selectedAttentionRequiredFrameStyle }
};
}
Style GetButtonStyle()
{
Style buttonStyle = new Style(typeof(Button))
{
Setters = {
new Setter { Property = Button.BorderWidthProperty, Value = 3 },
new Setter { Property = Button.BorderColorProperty, Value = whiteColor },
new Setter { Property = Button.CornerRadiusProperty, Value = 14 },
new Setter { Property = HeightRequestProperty, Value = 28 },
new Setter { Property = WidthRequestProperty, Value = 28 },
new Setter { Property = Button.MarginProperty, Value = 0 },
new Setter { Property = Button.PaddingProperty, Value = 0 } ,
new Setter { Property = Button.TextProperty, Value = TextAlignment.Center }
}
};
return buttonStyle;
}
Style GetFrameStyle()
{
Style frameStyle = new Style(typeof(Frame))
{
Setters = {
new Setter { Property = Frame.CornerRadiusProperty, Value = 16 },
//new Setter { Property = Frame.HeightRequestProperty, Value = 32 },
//new Setter { Property = Frame.WidthRequestProperty, Value = 32 },
new Setter { Property = MarginProperty, Value = 0 },
new Setter { Property = PaddingProperty, Value = 2 },
new Setter { Property = Frame.HasShadowProperty, Value = false }
}
};
return frameStyle;
}
}
}
Step 3: Usage
<StackLayout> <local:StepProgressBar Margin="5,15,5,0" StepBar="{Binding StepProgress}" x:Name="stepBar"/></StackLayout>
Step 4: Reference In xaml File
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
NavigationPage.HasBackButton="False"
xmlns:local="clr-namespace:Xamarin.Custom.Controls">
Comments
Post a Comment