Как сделать загрузочную графику в WPF XAML?

Question

Итак, у меня есть небольшой WPF XAML, который получает заголовки моего RSS-канала и помещает их в список.

Однако загрузка занимает около 2 секунд.

Как я могу поместить некоторую вращающуюся графику AJAXy в ListBox, пока данные не будут там?

Вот код:

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

Answer 1

Мое решение для этого - реализовать асинхронный слой между моими данными и WPF. Это полностью отделяет WPF от любых задержек на стороне данных и дает мне хорошие события и свойства для запуска и привязки.

Я построил это поверх архитектуры View Model или Presenter Model . Я написал сообщение в блоге об основах и более длинную статью о моем подходе к асинхронным моделям представления .

Вот 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>

[Источник Copyright & copy; 2009 dasz.at OG ; Это произведение распространяется по лицензии MIT .]

Answer 2

Следующие видео взяты из mix08 и помогут вам сделать именно то, что вы хотите.

Часть 1

Часть 2

(следите, если возможно, подряд. Он в серебряном свете, но направит вас в правильном направлении.)

Веселись.

Answer 3

Вы можете создать spinny-loady-thingy и добавить его в AdornerLayer ListBox.

Answer 4

Вы можете использовать свойство IsAsynchronous XmlDataProvider вместе с событием DataChanged (я не пробовал): посмотрите документацию ; -)