Comment créer un graphique de chargement dans WPF XAML?

Question

J'ai donc un petit WPF XAML qui récupère les titres de mon flux RSS et les place dans un ListBox.

Cependant, le chargement prend environ 2 secondes. Comment puis-je avoir mis une sorte de graphique tournant AJAXy dans le ListBox jusqu'à ce que les données sont là?

Voici le code:

<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

Ma solution pour cela est d'implémenter une couche asynchrone entre mes données et WPF. Cela déconnecte totalement WPF de tout retard sur le côté des données et me donne de bons événements et propriétés à déclencher et à contrer. Je l'ai construit sur le View Model or Presenter Model architecture. J'ai écrit a blog post about the basics et un morceau plus long environ my approach to asynchronous View Models.

Voici le XAML du spinner. Dans le DataContext, il a besoin du View Model qui effectue le chargement. En fonction de son State, le LoadingIndicator se rendra visible et se repliera à nouveau.

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

[Source Droit d'auteur ; Ce travail est sous licence MIT License.]

Answer 2

Vous pourriez pu créer le spinny-loady-thingy et l'ajouter à la AdornerLayer du ListBox.

Answer 3

Les vidéos suivantes proviennent de mix08 et vous permettent de faire exactement ce que vous voulez.

Part 1

Part 2

(montre successivement si possible. Il est en silverlight mais vous diriger dans la bonne direction.)

Have Fun.

Answer 4

Vous pouvez exploiter la propriété IsAsynchronous du XmlDataProvider avec l'événement DataChanged (je n'ai pas essayé): consultez la documentation. ;-)