Articles in this section
Category / Section

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

2 mins read

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

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied