在 ListView 顶部添加“正在加载”图像答案

【问题标题】：Adding "Loading"-image on top of ListView在 ListView 顶部添加“正在加载”图像
【发布时间】：2010-12-02 07:14:57
【问题描述】：

我想在我的ListView顶部添加一个“正在加载”-Image，同时所有项目都在加载，如果有很多项目正在加载，我仍然想要一个好的用户体验。

因此，我想要一个浮动的Image（动画 GIF？）在我的 ListView 之上。

如何解决这个问题，一旦有了浮动图像或控件，如何制作 GIF 动画？

【问题讨论】：

【解决方案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 看起来像这样（你必须想象它们在旋转！）：

要在 ListBox 上方显示一个图层，请将其包装在一个 Grid 中，如下所示：

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

【讨论】：

是连接到ListView的“Binding Path=IsLoading”，不是怎么设置的？
@Filip，我已对我的回答进行了澄清。
谢谢！不过，我仍然对您如何将其“绑定”到您的视图模型感到有些困惑，您能否提供一些相关信息？
@Filip，许多关于 MVVM 的文章已经写了，它们会给你一个比我在这里的评论更好的概述。在 Google 上搜索“MVVM”。 Josh Smith 有一些很棒的文章，这里有一篇来自 MSDN：msdn.microsoft.com/en-us/magazine/dd419663.aspx
如果不想使用MVVM，只需在用户控件上创建一个属性即可。请注意，您必须使绑定表达式具有相对源并搜索您的用户控件作为祖先。