如何在WPF XAML中制作加载图形？

Question

我有一个小的WPF XAML，用于获取我的RSS源的标题并将它们放入ListBox中。

但是，加载需要约2秒钟。

我该如何在ListBox中添加一些类似AJAX旋转的图形，直到数据出现？

以下是代码：

<Window x:Class="WpfApplication5.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">
    <StackPanel>
        <StackPanel.Resources>
            <XmlDataProvider x:Key="ExternalColors" Source="http://www.tanguay.info/web/rss" XPath="/"/>
        </StackPanel.Resources>
        <TextBlock Text="RSS Feeds:"/>
        <ListBox Name="lbColor" Height="200" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Source={StaticResource ExternalColors}, XPath=//item/title}"/>

        <TextBlock Text="You selected this feed:"/>
        <TextBox
            Text="{Binding ElementName=lbColor, Path=SelectedValue}"
            Background="{Binding ElementName=lbColor, Path=SelectedValue}">
        </TextBox>
    </StackPanel>
</Window>

- Edward Tanguay

Answer 1

我的解决方案是在我的数据和WPF之间实现一个异步层。这完全将WPF与数据端的任何延迟分离，并为我提供了漂亮的事件和属性来触发和绑定。

我在视图模型或展示者模型架构的基础上构建了它。我已经写了有关基础知识的博客文章和一篇更长的关于我的异步视图模型方法的文章。

这是旋转器的XAML代码。在DataContext中，它需要执行加载的视图模型。根据其State，LoadingIndicator将使自己可见并再次折叠。

<UserControl x:Class="App.WPF.CustomControls.LoadingIndicator"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="20"
             Width="20">
    <UserControl.Style>
        <Style TargetType="{x:Type UserControl}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding State}"
                             Value="Active">
                    <Setter Property="Visibility"
                            Value="Collapsed" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State}"
                             Value="Loading">
                    <Setter Property="Visibility"
                            Value="Visible" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State}"
                             Value="Invalid">
                    <Setter Property="Background"
                            Value="Red" />
                    <Setter Property="Visibility"
                            Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="UserControl.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="Rotator"
                            TargetProperty="Angle">
                    <DoubleAnimation By="360"
                                     Duration="0:0:2"
                                     RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Rectangle Stroke="Aqua"
               StrokeThickness="2"
               Width="10"
               Height="10">
        <Rectangle.RenderTransform>
            <RotateTransform x:Name="Rotator"
                             Angle="0"
                             CenterX="5"
                             CenterY="5" />
        </Rectangle.RenderTransform>
    </Rectangle>
</UserControl>

[源版权 © 2009 dasz.at OG; 本作品已获得MIT许可证授权。]

- David Schmitt

Answer 2

你可以创建一个旋转加载样式，并将其添加到ListBox的AdornerLayer中。

- Micah

Answer 3

以下视频来自mix08，并会带领你逐步完成所需操作。 第1部分 第2部分 （如果可能，请连续观看。它是使用Silverlight制作的，但会指引您正确方向。）

祝玩得开心。

- Blounty

Answer 4

你可以利用 XmlDataProvider 的 IsAsynchronous 属性和 DataChanged 事件（我没有尝试过）来实现：请查看文档。;-)

- Fabrizio C.