Busy Indicator Not Centered

[Paul]

I am using your BusyIndicator in my code, and I noticed that the animation is not centered in the Viewbox (it's really bad with Fluent)

How can I fix this? 

I have added the relevant code to the bottom

public BusyIndicatorPopUp()

{

_busyIndicator = new SfBusyIndicator

{

Foreground = BusyIndicatorColor,

IsBusy = true,

AnimationType = AnimationTypes.Cupertino,

AnimationSpeed = 25,

HorizontalAlignment = HorizontalAlignment.Center,

VerticalAlignment = VerticalAlignment.Center,

Background = Brushes.Bisque,

Margin = new Thickness(20),

HorizontalContentAlignment= HorizontalAlignment.Center,

ViewboxWidth = 100,

ViewboxHeight = 100,

};

var headerTemplate = new DataTemplate();

_labelFactory = new FrameworkElementFactory(typeof(Label));

_labelFactory.SetValue(Label.ContentProperty, Header);

_labelFactory.SetValue(Label.ForegroundProperty, HeaderColor);

_labelFactory.SetValue(Label.FontSizeProperty, HeaderFontSize);

_labelFactory.SetValue(Label.FontWeightProperty, HeaderFontWeight);

_labelFactory.SetValue(Label.VisibilityProperty, Visibility.Collapsed);

_labelFactory.SetValue(Label.HorizontalAlignmentProperty, HorizontalAlignment.Center);

var gridFactory = new FrameworkElementFactory(typeof(Grid));

gridFactory.SetValue(Grid.WidthProperty, 100.0);

gridFactory.SetValue(BackgroundProperty , Brushes.Tan);

gridFactory.AppendChild(_labelFactory);

headerTemplate.VisualTree = gridFactory;

_busyIndicator.HeaderTemplate = headerTemplate;

InnerContent = _busyIndicator;

}

[Hemalatha Kondappakumareshan]

Hi Paul,

Thank you for reaching out to us. We have reviewed the reported issue and were able to reproduce it using the code snippet you provided. The problem you're experiencing where the animation is not centered in the Viewbox.

To resolve this, we recommend wrapping the SfBusyIndicator in a Grid with fixed Width and Height, and also setting a Background on the Grid. This provides a defined area for the BusyIndicator to center itself both vertically and horizontally, ensuring the animation appears correctly aligned.

Code snippet

 public MainWindow()

 {

     InitializeComponent();

 

     _busyIndicator = new SfBusyIndicator

     {

         Foreground = Brushes.Blue,

         IsBusy = true,

         AnimationType = AnimationTypes.Cupertino,

         AnimationSpeed = 25,

         HorizontalAlignment = HorizontalAlignment.Center,

         VerticalAlignment = VerticalAlignment.Center,

         Background = Brushes.Bisque,

         HorizontalContentAlignment = HorizontalAlignment.Center,

         ViewboxWidth = 100,

         ViewboxHeight = 100,

     };

 

     var headerTemplate = new DataTemplate();

     var _labelFactory = new FrameworkElementFactory(typeof(Label));

     _labelFactory.SetValue(Label.ContentProperty, "Loading.....");

     _labelFactory.SetValue(Label.ForegroundProperty, Brushes.Red);

     _labelFactory.SetValue(Label.FontSizeProperty, 18.0);

     _labelFactory.SetValue(Label.FontWeightProperty, FontWeights.Bold);

     _labelFactory.SetValue(Label.HorizontalAlignmentProperty, HorizontalAlignment.Center);

 

 

     var gridFactory = new FrameworkElementFactory(typeof(Grid));

     gridFactory.SetValue(Grid.WidthProperty, 120.0);

     gridFactory.SetValue(Grid.BackgroundProperty, Brushes.Tan);

     gridFactory.AppendChild(_labelFactory);

     headerTemplate.VisualTree = gridFactory;

     _busyIndicator.HeaderTemplate = headerTemplate;

 

     // Create a grid to center the BusyIndicator

     var grid = new Grid()

     {

         Width = 120,

         Height = 130,

         Background = Brushes.Bisque,

 

     };

 

    

     // Add BusyIndicator to the Grid

     grid.Children.Add(_busyIndicator);

 

     Content = grid; // Set Content of the MainWindow to the main grid

 }

 

We’ve also attached a sample project for your reference. Please let us know if you have any further questions or need additional support.

Regards,

Hemalatha

Attachment: BusyIndicatorSample_a7750fe.zip

[Paul]

If you can see here, the right side of the animation is closer to the right edge of the grid than the left side. 

Fluent is even worse.  As you can see from the image, the animation goes out of the viewbox (colored bisque)

[Hemalatha Kondappakumareshan]

Hi Paul,

Thank you for your updates. We have investigated the reported query. Issue is reproduceable by using the provided code snippet. We are fixing the issue. The fix will be included in the upcoming weekly release We will update the further details. We appreciate your support and patience until then.

Regards,

Hemalatha

[Sri Radhesh Nag Subash Sankar]

Hi Paul,

We are working on the issue in WPF SfBusyIndicator. The fix will be included in our weekly NuGet release, scheduled for May 20, 2025. We’ll notify you as soon as it becomes available. We appreciate your patience in the meantime.

Regards,

Sri Radhesh Nag S 

[Kamalesh Periyasamy]

Hi Paul,

  

We have included a fix for the reported issue "Busy Indicator Not Centered" in our latest weekly NuGet release, v29.2.5, which is now available for download (NuGet). 
 

Please get in touch with us if you require any further assistance; as always, we would be happy to help you. 

  

Regards, 

Kamalesh P