¿Cómo hacer un gráfico de carga en WPF XAML?

Question

Así que tengo un pequeño WPF XAML que obtiene los títulos de mi fuente RSS y los coloca en un ListBox.

Sin embargo, la carga tarda unos 2 segundos.

¿Cómo puedo haber puesto algún tipo de gráfico de hilado AJAXy en el ListBox hasta que los datos estén allí?

Aquí está el código:

<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

Mi solución para esto es implementar una capa asíncrona entre mis datos y WPF. Esto desacopla totalmente WPF de cualquier retraso en el lado de los datos y me da buenos eventos y propiedades para activar y contraer.

Construí esto en la parte superior de View Model or Presenter Model architecture. He escrito a blog post about the basics y una pieza más larga sobre my approach to asynchronous View Models.

Aquí está el XAML de la ruleta. En el DataContext, necesita el modelo de vista que realiza la carga. Dependiendo de su State, el LoadingIndicator se hará visible y colapsará nuevamente.

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

[Fuente Derechos de Autor ; Este trabajo tiene licencia bajo MIT License.]

Answer 2

Se podría podría crear el spinny-loady-manivela y añadirlo a la AdornerLayer del ListBox.

Answer 3

Los siguientes videos son de mix08 y lo guiaremos haciendo exactamente lo que desea.

Part 1

Part 2

(reloj en la serie si es posible. Está en Silverlight, pero le apuntan en la dirección correcta.)

divertirse.

Answer 4

Puede explotar la propiedad del XmlDataProvider junto con el evento DataChanged (no lo intenté): eche un vistazo a la documentación. ;-)