添加＆QUOT;装载＆QUOT; - 图像上的ListView顶部 [英] Adding "Loading"-image on top of ListView

问题描述

我想添加一个加载 - 图片在顶部我的的ListView ，而所有项目加载，如果有要加载的项目很多，我还是希望有一个良好的用户体验。

I'd like to add a "Loading"-Image on the top of my ListView while all items are loading, if there are a lot of items being loaded, I still want a nice user experience.

所以，所以我希望有一个浮动的图片我的的ListView 的顶部（GIF动画？）

So therefore I want a floating Image ( Animated GIF ? ) on top of my ListView.

将如何解决这个问题，一旦你有浮动图像或控制，怎么做才能让你的GIF动画？

How would one solve this and once you have the floating image or control, how do you make the GIF animated?

推荐答案

下面是一些XAML，我用它来创建一个AJAX式的微调等为WPF。我使用的几何形状和动画，而不是一个GIF动画，并且可以通过调整XAML控制规模和速度：

Here's some XAML that I use to create an AJAX-like wait spinner for WPF. I uses geometry and animation rather than an animated GIF, and you can control the size and rate by tweaking the 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>

您使用这样的（如果你想改变它指定颜色）：

You use it like this (specify the colour if you want to change it):

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

以上的XAML应该是这样的（你必须想象他们纺！）：

The above XAML would look like this (you have to imagine them spinning!):

---

有一层上面显示你的列表框，把它包在这样的网格：

To have a layer appear above your ListBox, wrap it in a Grid like this:

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

使用网格意味着边界会出现在列表框的顶部。在这种情况下，该层会出现灰色的，并且将窃取任何鼠标动作，有效地禁用底层的列表框。

Using a Grid means that the Border will appear on top of the ListBox. In this case, the layer will appear greyed out, and will steal any mouse actions, effectively disabling the underlying ListBox.

请注意，绑定这里 IsLoaded 连接到我的视图模型。我将它设置为假当我开始加载，然后再设置为真当加载完成。请注意，我打开我的项目关闭调度程序线程（在辅助线程），使用户界面的更新，而我做这项工作。

Note that the binding here to IsLoaded connects to my view model. I set it to false when I start loading, then again to true when the loading completes. Note that I load my items off the dispatcher thread (on a worker thread) so that the UI updates while I'm doing this work.

这篇关于添加＆QUOT;装载＆QUOT; - 图像上的ListView顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！