您的位置: 首页  >  技术问答  >  什么是上的WPF控制显示“加载”指示器的最佳方式

什么是上的WPF控制显示“加载”指示器的最佳方式

分类: 技术问答 • 2022-07-22 17:33:56
问题描述：

在C＃.net WPF期间UserControl.Load - >什么是上的WPF控制显示“加载”指示器的最佳方式

什么是表示旋流圈/“加载”指示器上的最佳方式UserControl直到完成收集数据并呈现其内容为止？

答

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

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

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

然后我加载数据上的工作线程，当它完成我的“搜索Maincontent”网下更新UI并启用网格，然后将LoadingIndicatorPanel的可见性设置为折叠。

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

答

这是我刚刚在创建一个加载动画的东西。这个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>
+0

这是一个很好的演示！ – ariso 2009-10-29 15:12:42

+0

也许这是一个愚蠢的问题，但为什么编写自己的动画时，你可以使用极其类似的活动控制？ – 2010-03-05 00:45:42

+0

@Peter Wone：什么活动控制？ MSDN对“活动”一词有大量的点击，但快速浏览显示没有WPF/SL控件。 – moswald 2010-10-07 13:40:33

答

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

this.Cursor = Cursors.Wait;

答

使用BusyIndi​​cator。这是一件银光之物。

答

可以显示动画GIF作为加载部件

XAML

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

后面的代码

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

答

我伊恩奥克斯设计改进，并建立一个可扩展的版本他装载指示器：

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

相关推荐