在列表視圖頂部添加「正在載入」圖像

Question

我想在我的ListView的頂部添加「正在載入」 - Image，而所有項目都正在載入，如果有很多項目正在載入，我仍然想要一個不錯的用戶體驗。

因此，我想在我的ListView之上浮動Image（動畫GIF？）。

如何解決這個問題，一旦你擁有浮動圖像或控件，你如何讓GIF動畫？

Answer 1

下面是我用來爲WPF創建類似AJAX的等待微調器的一些XAML。我使用的幾何形狀和動畫，而不是一個GIF動畫，並且可以通過調整XAML控制規模和速度：

<!-- Style for AJAX-like wait spinners --> 
<Style x:Key="WaitSpinnerStyle" TargetType="Control"> 
    <Setter Property="Foreground" Value="#888" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Control"> 
       <Viewbox Visibility="{TemplateBinding Visibility}"> 
        <Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120" > 
         <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="1.0"/> 
         <Ellipse Width="20.835" Height="20.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.9"/> 
         <Ellipse Width="19.835" Height="19.862" Canvas.Left="0.00001" Canvas.Top="57.9341" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.8"/> 
         <Ellipse Width="17.835" Height="17.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.7"/> 
         <Ellipse Width="16.835" Height="16.862" Canvas.Left="36.5459" Canvas.Top="98.1380" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.6"/> 
         <Ellipse Width="14.835" Height="14.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.5"/> 
         <Ellipse Width="13.835" Height="13.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.4"/> 
         <Ellipse Width="12.835" Height="12.862" Canvas.Left="98.165" Canvas.Top="54.4140" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.3"/> 
         <Ellipse Width="11.835" Height="11.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.2"/> 
         <Canvas.RenderTransform> 
          <RotateTransform x:Name="SpinnerRotate" Angle="0" /> 
         </Canvas.RenderTransform> 
         <Canvas.Triggers> 
          <EventTrigger RoutedEvent="ContentControl.Loaded"> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation 
              Storyboard.TargetName="SpinnerRotate" 
              Storyboard.TargetProperty="Angle" 
              From="0" To="360" Duration="0:0:01.3" 
              RepeatBehavior="Forever" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </EventTrigger> 
         </Canvas.Triggers> 
        </Canvas> 
       </Viewbox> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

你使用這樣的（如果你想改變它指定顏色）：

<Control Style="{StaticResource WaitSpinnerStyle}" Width="35" /> 
<Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="Green" /> 

以上XAML看起來像這樣（你必須把它們想象紡！）：

http://img23.imageshack.us/img23/1691/wpfwaitspinner.png

---

爲了有一個層出現在列表框上面，在這樣的網格包裹它：

<Grid> 
    <!-- LOADING overlay (for async-load) --> 
    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="True" 
      Background="#40000000" CornerRadius="4" 
      Visibility="{Binding Path=IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"> 
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="White" /> 
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOADING..." FontWeight="Bold" Margin="0,5" Foreground="White" FontSize="12" /> 
     </StackPanel> 
    </Border> 
    <ListBox /> 
</Grid> 

使用網格意味着邊界將出現在列表框的頂部。在這種情況下，該圖層將顯示爲灰色，並將竊取任何鼠標操作，從而有效地禁用底層ListBox。

請注意，這裏綁定到IsLoaded連接到我的視圖模型。我開始加載時將其設置爲false，然後在加載完成時再次將其設置爲true。請注意，我從調度程序線程（在工作線程上）加載我的項目，以便在執行此項工作時更新UI。