Cách tốt nhất để hiển thị chỉ báo 'tải' trên điều khiển WPF

Question

Trong C# .Net WPF Trong UserControl.Load ->

Cách tốt nhất để hiển thị vòng tròn xoay vòng/Chỉ báo 'Đang tải' trên UserControl cho đến khi nó hoàn thành việc thu thập dữ liệu và hiển thị nội dung của nó?

Answer 1

Tôi thường sẽ tạo ra một bố cục như thế này:

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

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

Sau đó, tôi tải các dữ liệu trên một sợi công nhân, và khi nó kết thúc, tôi cập nhật giao diện người dùng dưới lưới "MainContent" và cho phép lưới điện, sau đó đặt Khả năng hiển thị của LoadingIndicatorPanel thành Đã thu gọn.

Tôi không chắc chắn nếu đây là những gì bạn đang hỏi hoặc nếu bạn muốn biết làm thế nào để hiển thị một hình ảnh động trong nhãn tải. Nếu đó là hoạt ảnh bạn đang theo dõi, vui lòng cập nhật câu hỏi của bạn cụ thể hơn.

Answer 2

Đây là điều tôi đã làm việc gần đây để tạo hoạt ảnh tải. Xaml này sẽ tạo ra một vòng tròn hoạt hình.

Ý tưởng ban đầu của tôi là tạo quảng cáo và sử dụng hoạt ảnh này làm nội dung, sau đó hiển thị hoạt ảnh tải trong lớp trang trí và tô xám nội dung bên dưới.

Chưa có cơ hội hoàn thành, vì vậy tôi nghĩ tôi sẽ đăng hình động để bạn tham khảo.

<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

Nếu bạn đang chạy trên Vista, bạn cũng có thể chỉ sử dụng con trỏ chờ mặc định.

this.Cursor = Cursors.Wait;

Answer 4

Sử dụng BusyIndicator. Đó là một điều bạc.

Answer 5

Bạn có thể hiển thị gif động như yếu tố tải

XAML

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

mã sau

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

Answer 6

tôi cải thiện về Ian Oakes Thiết kế và xây dựng một phiên bản mở rộng của mình chỉ báo tải:

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