C# WPF 如何在向 Stackpanel 添加许多 UI 元素的同时保持应用程序响应

Question

I made an Application where I add many Grids to some Stackpanels in a for loop. My problem is that, while the for loop is loading my Application doesn´t respond and my Loadinganimation is freezed. How can I add the Grids to the Stackpanel without affecting the UI Thread, so my Loading Animation won´t freeze.

Thanks in Advance

Edit:

Grid creation Method:

        public void GridExample()
        {
            for(int i = 0; i < 120; i++)
            {
                Grid Grid1 = new Grid();
                Grid1.FlowDirection = FlowDirection.LeftToRight;
                Grid1.Width = 200;
                Grid1.Background = new SolidColorBrush(Color.FromArgb(255, (byte)33, (byte)33, (byte)33));
                Grid1.Margin = new Thickness(5, 20, 5, 20);

                ColumnDefinition Grid1_col1 = new ColumnDefinition();
                Grid1.ColumnDefinitions.Add(Grid1_col1);

                RowDefinition Grid1_row1 = new RowDefinition();
                RowDefinition Grid1_row2 = new RowDefinition();
                RowDefinition Grid1_row3 = new RowDefinition();
                RowDefinition Grid1_row4 = new RowDefinition();
                Grid1.RowDefinitions.Add(Grid1_row1);
                Grid1.RowDefinitions.Add(Grid1_row2);
                Grid1.RowDefinitions.Add(Grid1_row3);
                Grid1.RowDefinitions.Add(Grid1_row4);

                Grid1_row1.Height = new GridLength(255);
                Grid1_row2.Height = new GridLength(60);
                Grid1_row3.Height = new GridLength(5);
                Grid1_row4.Height = new GridLength(55);


                //Adds Grid to HomePage
                homepage1_mainstackpanel1.Children.Add(Grid1);

                Image Image1 = new Image();
                Image1.Stretch = Stretch.Fill;
                Image1.Source = new BitmapImage(new Uri("Image.png"));
                Grid.SetRow(Image1, 0);
                Grid1.Children.Add(Image1);


                Label Label1 = new Label();
                Label1.Content = "Example Text";
                Label1.FontSize = 15;
                Label1.Foreground = new SolidColorBrush(Colors.White);
                Label1.VerticalAlignment = VerticalAlignment.Center;
                Label1.HorizontalAlignment = HorizontalAlignment.Center;
                Grid.SetRow(Label1, 1);
                Grid1.Children.Add(Label1);


                Line Line1 = new Line();
                Line1.X1 = 1;
                Line1.StrokeThickness = 2;
                Line1.Stroke = new SolidColorBrush(Color.FromArgb(255, (byte)51, (byte)51, (byte)51));
                Line1.Stretch = Stretch.Fill;
                Grid.SetRow(Line1, 2);
                Grid1.Children.Add(Line1);


                Button Button1 = new Button();
                Button1.Content = "Play";
                Button1.FontSize = 15;
                Button1.Foreground = new SolidColorBrush(Colors.White);
                Button1.Background = new SolidColorBrush(Color.FromArgb(255, (byte)33, (byte)33, (byte)33));
                Button1.BorderThickness = new Thickness(0);
                Button1.VerticalAlignment = VerticalAlignment.Center;
                Button1.HorizontalAlignment = HorizontalAlignment.Center;
                Button1.Click += new RoutedEventHandler((sender, e) =>
                {
                    this.NavigationService.Navigate(new WatchPage1());
                });
                Grid1.Children.Add(Button1);

            }
        }

Loading Animation in HomePage:

public static Dispatcher mainthread_dispatcher = Dispatcher.CurrentDispatcher;

        public HomePage1()
        {
            Loaded += Page_loaded;
            InitializeComponent();
        }

        private void Page_loaded(object sender, RoutedEventArgs e)
        {
            using (LoadingAnimation loadanimation = new LoadingAnimation(GridExample))
            {
                loadanimation.ShowDialog();
            }
        }

LoadingAnimation.xaml:

<Window x:Class="Spaceflix_Desktop.LoadingAnimation"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Spaceflix_Desktop"
             mc:Ignorable="d" 
             Height="110" Width="90" Loaded="Animation_Loaded">

    <Window.Resources>
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse1">
                <EasingColorKeyFrame KeyTime="0" Value="#B25B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="#B25B5B5B"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <EasingColorKeyFrame KeyTime="0" Value="#FF5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#7F5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="#FF5B5B5B"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse3">
                <EasingColorKeyFrame KeyTime="0" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#B25B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse4">
                <EasingColorKeyFrame KeyTime="0" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#7F5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse5">
                <EasingColorKeyFrame KeyTime="0" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#B25B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#005B5B5B"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse6">
                <EasingColorKeyFrame KeyTime="0" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#FF5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#7F5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="#005B5B5B"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse7">
                <EasingColorKeyFrame KeyTime="0" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#B25B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="#005B5B5B"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse8">
                <EasingColorKeyFrame KeyTime="0" Value="#7F5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#005B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.7" Value="sc#0, 0.104616486, 0.104616486, 0.104616486"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF5B5B5B"/>
                <EasingColorKeyFrame KeyTime="0:0:1.4" Value="#7F5B5B5B"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

   
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>


        <Border x:Name="Border" BorderBrush="#c62828" BorderThickness="2" Background="Black" Height="80" Width="80">
            <Grid x:Name="maingrid" Background="Transparent">
                <Ellipse x:Name="ellipse1" Fill="#FF5B5B5B" HorizontalAlignment="Center" Margin="0, 5, 0, 0" Height="15" VerticalAlignment="Top" Width="15"/>
                <Ellipse x:Name="ellipse2" Fill="#FF5B5B5B" HorizontalAlignment="Right" Margin="0, 15, 15, 0" Height="15" VerticalAlignment="Top" Width="15"/>
                <Ellipse x:Name="ellipse3" Fill="#FF5B5B5B" HorizontalAlignment="Right" Margin="0, 0, 5, 0" Height="15" VerticalAlignment="Center" Width="15"/>
                <Ellipse x:Name="ellipse4" Fill="#FF5B5B5B" HorizontalAlignment="Right" Margin="0, 0, 15, 15" Height="15" VerticalAlignment="Bottom" Width="15"/>
                <Ellipse x:Name="ellipse5" Fill="#FF5B5B5B" HorizontalAlignment="Center" Margin="0, 0, 0, 5" Height="15" VerticalAlignment="Bottom" Width="15"/>
                <Ellipse x:Name="ellipse6" Fill="#FF5B5B5B" HorizontalAlignment="Left" Margin="15, 0, 0, 15" Height="15" VerticalAlignment="Bottom" Width="15"/>
                <Ellipse x:Name="ellipse7" Fill="#FF5B5B5B" HorizontalAlignment="Left" Margin="5, 0, 0, 0" Height="15" VerticalAlignment="Center" Width="15"/>
                <Ellipse x:Name="ellipse8" Fill="#FF5B5B5B" HorizontalAlignment="Left" Margin="15, 15, 0, 0" Height="15" VerticalAlignment="Top" Width="15"/>
            </Grid>
        </Border>

</Window>

LoadingAnimation.cs:

using System;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Threading;
using System.Windows.Threading;
using System.Windows.Media.Animation;
using System.Windows.Controls.Primitives;
using System.ComponentModel;
using System.Runtime.Remoting.Channels;
using System.Windows.Media.Media3D;
using System.Windows.Interop;

namespace Test_Application
{
    /// <summary>
    /// Interaktionslogik für LoadingAnimation.xaml
    /// </summary>

    public partial class LoadingAnimation : Window, IDisposable
    {
        public Action Worker { get; set; }

        public LoadingAnimation (Action worker)
        {
            InitializeComponent();

            Worker = worker ?? throw new ArgumentNullException();
        }

        public void Animation_Loaded(object sender, RoutedEventArgs e)
        {
            Task.Factory.StartNew(() => { }).ContinueWith(t => HomePage1.mainthread_dispatcher.Invoke(() => Worker()), TaskScheduler.FromCurrentSynchronizationContext()).ContinueWith(t => Dispatcher.Invoke(() => Close()));
        }

        public void Dispose()
        {
        }
    }
}

I hope this Information are enough

Answer 1

after I didn't have time for this project for a long time, I've now dealt with it again and found a solution. I can't add the grids to the stack panels in a new task or thread but at least I can display the loading animation smoothly. Because the grids have to be added to the main thread, I ran the loading animation in a new thread. So I had to display it as a popup. This is the best solution I found.

Here is the Code from the HomePage:

        var PositionWindow = (Window)Parent;
        int CenterX = 8;
        int CenterY = 1;
        Point CenterPoints = new Point(PositionWindow.Left + CenterX + (PositionWindow.Width / 2), PositionWindow.Top + CenterY + (PositionWindow.Height / 2));

        Thread LoadThread = new Thread(new ThreadStart(() => {
            using (PopUpLoadingAnimation loadanimation = new PopUpLoadingAnimation(GridExample, CenterPoints, PositionWindow))
            {
                loadanimation.StartTask();
                Dispatcher.Run();
            }
        }));
        LoadThread.SetApartmentState(ApartmentState.STA);
        LoadThread.Start();

I had to calculate the middle of the Window by myself to make the PopUp centered.

And here is the Code of the PopUpLoadingAnimation.cs:

public partial class PopUpLoadingAnimation : Popup
{
    public Action Worker { get; set; }
    private Point _PlacementPoints { get; set; }
    private Window MainWindow { get; set; }


    public PopUpLoadingAnimation (Action worker, Point PlacementPoints, Window mainthreadwindow)
    {
        InitializeComponent();

        Worker = worker ?? throw new ArgumentNullException();
        MainWindow = mainthreadwindow;
        _PlacementPoints = PlacementPoints;
    }

    public void StartTask()
    {
        Task.Factory.StartNew(() => Dispatcher.Invoke(() => 
        {
            Storyboard animationboard = Resources["Storyboard1"] as Storyboard;
            animationboard.Begin(maingrid);

            LoadingPopup.Placement = PlacementMode.Center;
            LoadingPopup.HorizontalOffset = _PlacementPoints.X;
            LoadingPopup.VerticalOffset = _PlacementPoints.Y;
            LoadingPopup.IsOpen = true;

            HomePage1.mainthread_dispatcher.Invoke(() => MainWindow.IsEnabled = false);

        })).ContinueWith(t => HomePage1.mainthread_dispatcher.Invoke(() => Worker()), HomePage1.mainthread_scheduler).ContinueWith(t => Dispatcher.Invoke(async () => 
        {
            LoadingPopup.IsOpen = false;
            HomePage1.mainthread_dispatcher.Invoke(() => MainWindow.IsEnabled = true);
            Dispatcher.InvokeShutdown(); 
        }));
    }

by the way thanks for the answers, unfortunately they did not help