Blog

Martin

24.06.2009 21:12

IsAsync - Meldung über Ladevorgang ausgeben

Vor einigen Tagen musste ich extrem viel Daten in einer ListView anzeigen. Ich habe an eine Propertie im ViewModel gebunden, welche die Daten für die ListView bereitstellten.

Das eigentliche Problem an der Sache war, dass sämtliche Daten im ViewModel über das Lazyloading Prinzip zu Verfügung gestellt wurden. Das heißt, obwohl das ViewModel initialisiert wurde, werden die Daten erst geladen wenn wann man diese benötigt, bzw. wenn man auf diese Bindet.

Die Properties generieren die Daten zur Laufzeit oder lesen große XML Dateien aus, was bis zu ca. 30 Sekunden in Anspruch nehmen kann. Während dem laden der XML Datei oder dem generieren der Daten friert die komplette Applikation ein und der Benutzer glaubt das Programm wäre abgestürtzt.

Zum Glück untersützt das Binding Asynchrones laden von Daten. Wenn man die Eigenschaft IsAsync auf True setzt wird das asynchrone laden der Daten aktiviert.

Jetzt ist allerdings die ListBox 30 Sekunden lang leer. Toll wäre wenn wir den Benutzer darauf hinweisen könnten, dass die Daten gerade geladen werden.

In einem TextBlock geben wir den Text "Loading" aus wenn die ListBox.ItemsSource = NULL ist. D.h. solange die ListBox keine Daten hat wird der Text Loading angezeigt. Hat die ListBox die Daten geladen ist die ItemsSource ungleich NULL. In diesem Fall blenden wir den TextBlock mit dem Text "Loading" aus.

Code mäßig sieht das so aus:

		<TextBlock Width="100" DockPanel.Dock="Top">

		            <TextBlock.Style>

		                <Style TargetType="{x:Type TextBlock}">

		                    <Setter Property="Text" Value="Loading"></Setter>

		                    <Setter Property="Foreground" Value="Red"></Setter>

		                    <Setter Property="Visibility" Value="Collapsed"></Setter>

		                    <Style.Triggers>

		                        <!--TextBlock einblenden wenn die ListBox keine Daten hat-->

		                        <DataTrigger Binding="{Binding ElementName=_ListBox,Path=ItemsSource}" Value="{x:Null}">

		                            <Setter Property="Visibility" Value="Visible"></Setter>

		                        </DataTrigger>

		                    </Style.Triggers>

		                </Style>

		            </TextBlock.Style>

		        </TextBlock>

		        <!--

		        Asynchrones laden aktivieren Ã¼ber IsAsync

		        Items ist die Propertie die die Daten generiert und dafÃ¼r ca. 30 Sekunden lang braucht

		        -->

		        <ListBox Name="_ListBox" ItemsSource="{Binding Path=Items,IsAsync=True}" DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="1">

		            <ListBox.Style>

		                <Style TargetType="{x:Type ListBox}">

		                    <Style.Triggers>

		                        <Trigger Property="ItemsSource" Value="{x:Null}">

		                            <Setter Property="Visibility" Value="Collapsed"></Setter>

		                        </Trigger>

		                    </Style.Triggers>

		                </Style>

		            </ListBox.Style>

		        </ListBox>

Den "Loading" Text kann man mit einer Animation etwas aufpepen.

<Style.Triggers>      
	      <EventTrigger RoutedEvent="TextBlock.Loaded">       
	         <BeginStoryboard>                
	    <Storyboard>                   
	     <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Duration="0:0:3" RepeatBehavior="Forever">     
	                       <DiscreteStringKeyFrame Value="Loading" KeyTime="0:0:0" />                    
	        <DiscreteStringKeyFrame Value="Loading ." KeyTime="0:0:1" />                       
	     <DiscreteStringKeyFrame Value="Loading .." KeyTime="0:0:1.5" />                  
	          <DiscreteStringKeyFrame Value="Loading ..." KeyTime="0:0:2" />            
	            </StringAnimationUsingKeyFrames>                  
	  </Storyboard>               
	 </BeginStoryboard>     
	       </EventTrigger>      
	  </Style.Triggers>

Sieht so aus:

Ich habe ein Beispiel angefügt. Das Beispiel unterscheidet sich nur darin, dass der TextBlock als Style in einem Dictionary gespeichert ist.

Anhang:

Schlüsselwörter: XAML, WPF
zuletzt geändert: 13. Jänner 2011 19:44
Link zu diesem Artikel: (in die Zwischenablage)

| Empfehlenswerte Blog Einträge