Was ist der beste Weg, um einen ‚Laden‘ -Anzeige auf einem WPF-Steuerelement angezeigt

Question

In C # .NET WPF Während UserControl.Load ->

Was ist der beste Weg, um einen wirbelnden Kreis / ‚Laden‘ Indikatoren auf dem Usercontrol zu zeigen, bis er Daten beendet hat, zu sammeln und zu machen, es ist Inhalt?

Answer 1

Ich würde in der Regel ein Layout wie folgt erstellen:

<Grid>
    <Grid x:Name="MainContent" IsEnabled="False">
    ...
    </Grid>

    <Grid x:Name="LoadingIndicatorPanel">
    ...
    </Grid>
</Grid>

Dann lade ich die Daten auf einem Worker-Thread, und wenn es fertig ist ich die Benutzeroberfläche unter dem „maincontent“ Raster aktualisieren und das Raster aktivieren, setzen Sie dann die LoadingIndicatorPanel der Sichtbarkeit Komprimierte.

Ich bin mir nicht sicher, ob dies ist, was Sie fragen, oder wenn Sie wissen wollen, wie eine Animation in der Lade Etikett zu zeigen. Wenn es um die Animation ist, nachdem Sie sind, bitte aktualisieren Sie Ihre Frage genauer zu sein.

Answer 2

Das ist etwas, dass ich erst vor kurzem arbeiten, um auf eine Ladeanimation zu erstellen. Dieser XAML wird eine animierte Ring von Kreisen produzieren.

Meine erste Idee war, eine adorner zu erstellen und diese Animation zu verwenden, da es Inhalt ist, dann in der Adornern Schicht die Lade Animation anzuzeigen, und unterhalb den Inhalt ausgegraut.

Haben nicht die Chance hatte es noch zu beenden, so dass ich dachte, ich würde nur die Animation für Ihre Referenz veröffentlichen.

<Window 
    x:Class="WpfApplication2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1"
    Height="300"
    Width="300"
    >
    <Window.Resources>
        <Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/>
        <Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/>

        <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
                <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Animation0}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation1}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation2}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation3}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation4}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation5}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation6}"/>
            <BeginStoryboard Storyboard="{StaticResource Animation7}"/>
        </EventTrigger>
    </Window.Triggers>

    <Canvas>
        <Canvas Canvas.Left="21.75" Canvas.Top="14" Height="81.302" Width="80.197">
            <Canvas.Resources>
                <Style TargetType="Ellipse">
                    <Setter Property="Width" Value="15"/>
                    <Setter Property="Height" Value="15" />
                    <Setter Property="Fill" Value="#FFFFFFFF" />
                </Style>
            </Canvas.Resources>

            <Ellipse x:Name="_00" Canvas.Left="24.75" Canvas.Top="50"/>
            <Ellipse x:Name="_01" Canvas.Top="36" Canvas.Left="29.5"/>
            <Ellipse x:Name="_02" Canvas.Left="43.5" Canvas.Top="29.75"/>
            <Ellipse x:Name="_03" Canvas.Left="57.75" Canvas.Top="35.75"/>
            <Ellipse x:Name="_04" Canvas.Left="63.5" Canvas.Top="49.75" />
            <Ellipse x:Name="_05" Canvas.Left="57.75" Canvas.Top="63.5"/>
            <Ellipse x:Name="_06" Canvas.Left="43.75" Canvas.Top="68.75"/>
            <Ellipse x:Name="_07" Canvas.Top="63.25" Canvas.Left="30" />
            <Ellipse Stroke="{x:Null}" Width="39.5" Height="39.5" Canvas.Left="31.75" Canvas.Top="37" Fill="{x:Null}"/>
        </Canvas>
    </Canvas>
</Window>

Answer 3

I verbessern auf Ian Oakes Entwerfen und Erstellen eine skalierbare Version seiner Ladeanzeige:

<UserControl x:Class="Mesap.Framework.UI.Controls.BusyIndicator"
             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" 
             mc:Ignorable="d" Name="Root" Foreground="#9b9b9b"
             d:DesignHeight="100" d:DesignWidth="100">
    <Grid>
        <Grid.Resources>
            <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E00" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E01" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E02" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E03" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E04" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E05" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E06" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E07" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Style TargetType="Ellipse">
                <Setter Property="Fill" Value="{Binding ElementName=Root, Path=Foreground}"/>

            </Style>
        </Grid.Resources>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource Animation0}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation1}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation2}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation3}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation4}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation5}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation6}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation7}"/>
            </EventTrigger>
        </Grid.Triggers>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Ellipse x:Name="E00" Grid.Row="4" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0"/>
        <Ellipse x:Name="E01" Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E02" Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E03" Grid.Row="1" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E04" Grid.Row="4" Grid.Column="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E05" Grid.Row="7" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E06" Grid.Row="8" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E07" Grid.Row="7" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
    </Grid>
</UserControl>

Answer 4

Wenn Sie es auf Vista laufen, können Sie auch nur die Cursor Standardwarte verwenden.

this.Cursor = Cursors.Wait;

Answer 5

Mit BusyIndicator. Es ist eine Sache, Silverlight.

Answer 6

Sie können animierte GIF als Belastungselement zeigen

XAML

<WindowsFormsHost>
    <winForms:PictureBox x:Name="pictureBoxLoading" />
</WindowsFormsHost>

Code hinter

pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");