1. 首頁
  2. 問答
  3. 什麼是上的WPF控制顯示「加載」指示器的最佳方式

什麼是上的WPF控制顯示「加載」指示器的最佳方式

2008-09-18 74 views

回答

12

我通常會創建這樣一個佈局：

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

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

然後我加載數據上的工作線程，當它完成我的「搜索Maincontent」網下更新UI並啓用網格，然後將LoadingIndicatorPanel的可見性設置爲摺疊。

我不確定這是你問的還是你想知道如何在加載標籤中顯示動畫。如果這是您之後的動畫，請更新您的問題以更具體。

來源

2008-09-18 18:12:33 dcstraw

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>

來源

2008-09-25 12:22:03

+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

1

如果你在Vista上運行它，你也可以使用默認的等待遊標。

this.Cursor = Cursors.Wait;

來源

2008-10-01 15:09:45

1

使用BusyIndi​​cator。這是一件銀光之物。

來源

2010-01-26 03:48:42

1

可以顯示動畫GIF作爲加載部件

XAML

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

後面的代碼

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

來源

2010-10-07 13:30:14 VadimB

7

我伊恩奧克斯設計改進，並建立一個可擴展的版本他裝載指示器：

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

來源

2013-02-04 18:21:26

相關問題

 相關問題