在WPF控件上显示“加载”指示符的最佳方法是什么

时间：2008-09-18 16:29:26

标签： c# .net wpf user-controls

在UserControl.Load中的C＃.Net WPF中 - ＆gt;

在UserControl上显示旋转圆圈/“加载”指示器的最佳方法是什么，直到收集完数据并呈现内容为止？

6 个答案:

答案 0 :(得分：13)

我通常会创建一个这样的布局：

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

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

然后我在工作线程上加载数据，当它完成时，我更新“MainContent”网格下的UI并启用网格，然后将LoadingIndicatorPanel的Visibility设置为Collapsed。

我不确定这是你问的问题，还是你想知道如何在加载标签中显示动画。如果这是你想要的动画，请更新你的问题以便更具体。

答案 1 :(得分：9)

这是我最近为了创建加载动画而正在努力的事情。这个xaml会产生一个动画圆环。

我最初的想法是创建一个装饰者并将此动画用作内容，然后在装饰图层中显示加载动画并使下面的内容变灰。

还没有机会完成它，所以我想我会发布动画供你参考。

<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>

答案 2 :(得分：8)

我改进了Ian Oakes Design并构建了他的加载指示器的可扩展版本：

<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>

答案 3 :(得分：1)

如果您在Vista上运行它，您也可以使用默认的等待光标。

this.Cursor = Cursors.Wait;

答案 4 :(得分：1)

使用BusyIndi​​cator。这是一件银色的事情。

答案 5 :(得分：1)

您可以将动画gif显示为加载元素

<强> XAML 

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

代码背后 

pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");
相关问题
最新问题