We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the height of the SfProgressBar, when the ProgressType is SolidLinear?

Platform: UWP |
Control: SfProgressBar |
Published Date: April 6, 2018 |
Last Revised Date: July 15, 2021 |
.NET Framework: 4

When the value of ProgressType property is SolidLinear, the height of the elements in the SfProgressBar is set to 4 by default. However, it can be customized using the ProgressBarAdv class's new attached property SolidLinearHeight. The following codes demonstrate the same.

MainPage.xaml

<progressbar:SfProgressBar  x:Name="progressBar"
                Grid.Row="1" Width="300"
                local:ProgressBarAdv.SolidLinearHeight="30"        
                ProgressType="SolidLinear"                               
                Value="50" 
                BorderBrush="LightGray"               
                />

 

MainPage.xaml.cs (Static method to update the height of the SfProgressBar)

        public static void UpdateProgressBarHeight(SfProgressBar progressbar)
        {
            Grid Root_Grid = VisualTreeHelper.GetChild(progressbar, 0) as Grid;
            if (MainPage.isload)
            {
                Grid SolidLinear = Root_Grid.Children[0] as Grid;
                Grid Parent_Grid = SolidLinear.Children[0] as Grid;
                Border PART_OuterLine = Parent_Grid.Children[1] as Border;
                Border OuterLine_Border = PART_OuterLine.Child as Border;
                Grid Border_Child = OuterLine_Border.Child as Grid;
 
                double tempheight = ProgressBarAdv.GetSolidLinearHeight(progressbar);               
 
                foreach (Rectangle border in Border_Child.Children)
                {
                    PART_OuterLine.Height = tempheight;
                    OuterLine_Border.Height = tempheight;
                    Border_Child.Height = tempheight;
                    border.Height = tempheight;                   
                }
            }
        }

 

ProgressBarAdv.cs

    public class ProgressBarAdv
    {
        public static double GetSolidLinearHeight(DependencyObject obj)
        {
            return (double)obj.GetValue(SolidLinearHeightProperty);
        }
 
        public static void SetSolidLinearHeight(DependencyObject obj, double value)
        {
            obj.SetValue(SolidLinearHeightProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for SolidLinearHeight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SolidLinearHeightProperty =
            DependencyProperty.RegisterAttached("SolidLinearHeight", typeof(double), typeof(MainPage), new PropertyMetadata(4d, new PropertyChangedCallback(OnSolidLinearHeightChanged)));
 
        private static void OnSolidLinearHeightChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SfProgressBar bar = d as SfProgressBar;
            MainPage.UpdateProgressBarHeight(bar);
        }
    }

 

The following screenshot shows the appearance of SfProgressBar when,

1.The value of ProgressType property is SolidLinear.

uwp progress bar linear customization

 

2. The value of SolidLinearHeight property is 30 and value of ProgressType property is SolidLinear.

      uwp progress bar height customization

Download the sample

 

 

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile