ProgressBar Control for CSHTML5

fangeles
Posts: 52
Joined: Wed Jan 16, 2019 12:48 am

ProgressBar Control for CSHTML5

Postby fangeles » Wed Feb 05, 2020 10:36 pm

Hi,

I'm in need of a ProgressBar control last time and I created one.
You may create a new class named ProgessBar which extends the UserControl class and copy paste the code below:

Code: Select all

public class ProgressBar : UserControl
    {
        public double Maximum
        {
            get; set;

        }
        public double Value
        {
            get; set;
        }


        public new Brush Foreground
        {
            get; set;
        } = (Brush)Colors.DodgerBlue;


        public new Brush Background
        {
            get; set;
        } = (Brush)Colors.LightGray;


        public bool RoundedCorners
        {
            get; set;
        } = false;




        double d_progress;
        double d_computed_maximum;

        int d_new_progress_width;

        Border InnerControl;
        Border OuterControl;


        public ProgressBar()
        {
            this.Height = 8;
             OuterControl = new Border { Background = Background, ClipToBounds = true };

     

            InnerControl = new Border { Background = Foreground, Width = 100, HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left };

            OuterControl.Child = InnerControl;
            this.Content = OuterControl;

            this.Loaded += ProgressBar2_Loaded;


            Window.Current.SizeChanged += Current_SizeChanged;
        }






        private void ProgressBar2_Loaded(object sender, RoutedEventArgs e)
        {
            compute_percentage();
        }

        private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            compute_percentage();
        }

        private void compute_percentage()
        {
            if (RoundedCorners == true)
            {
                OuterControl.CornerRadius = new CornerRadius(this.Height);
                InnerControl.CornerRadius = new CornerRadius(this.Height);
            }
            else
            {
                OuterControl.CornerRadius = new CornerRadius(0);
                InnerControl.CornerRadius = new CornerRadius(0);
            }

            OuterControl.Background = Background;
            InnerControl.Background = Foreground;

            try
            {
                d_computed_maximum = this.ActualWidth;

                if (Maximum == 0)
                {
                    d_progress = 0;
                }
                else
                {
                    d_progress = Value / Maximum;
                }



                d_new_progress_width = Convert.ToInt32(d_computed_maximum * d_progress);

                InnerControl.Width = d_new_progress_width;
            }
            catch (Exception)
            {
                InnerControl.Width = 0;
            }



        }


        public void SetValue(double NewValue)
        {
            Value = NewValue;
            compute_percentage();
        }
    }


Below are the useful properties

Maximum - The maximum value that the ProgressBar can hold
Value - the current progress value
Background - The current background color of the progressbar, you can modify the value directly in source code or XAML. The default color is LightGray.
Foreground - The current foreground color of the progressbar, your can modify the value directly in source code or XAML. The defaulf color is DodgerBlue.
RoundedCorners - True or false. Sets if the ProgressBar has rounded corners.


Sample usage:

Code: Select all

<ProgressBar Maximum="100" Value="80"/>



Yo update the progress value, please use the SetValue() method, as I cannot get to work the PropertyRaisedEvent in CSHTML5.
Attachments
ProgressBar.png
ProgressBar.png (6.63 KiB) Viewed 11314 times

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: ProgressBar Control for CSHTML5

Postby JS-Support @Userware » Fri Feb 07, 2020 11:21 am

Very nice! Thanks a lot


Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 20 guests

 

 

cron