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.
2. The value of SolidLinearHeight property is 30 and value of ProgressType property is SolidLinear.