This is a migrated thread and some comments may be shown as answers.

Don't know how to use RadBusyIndicator

6 Answers 96 Views
BusyIndicator
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Wolfshund
Top achievements
Rank 2
Wolfshund asked on 27 Dec 2012, 08:45 AM
Hi Telerik team,

I'm developing a dictionary application (German/Japanese) and use a large database, around 40MB. The app basically works so far, but I want to show a RadBusyIndicator during searching the dictionary, because the search takes a few seconds, just to inform the user, something is happening.
If I set the RadBusyIndicator's IsRunning state to true in XAML code, I'm able to see the Indicator. But not if I set the IsRunning state within code behind. Nothing is showing up. Maybe I'm missing something here, UI thread thing or something else perhaps.
Here is the XAML code:

 

<P><phone:PhoneApplicationPage<BR>    
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"<BR>    
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"<BR>    
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"<BR>    
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"<BR>    
xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core" <BR>
mc:Ignorable="d" d:DesignWidth="480" 
d:DesignHeight="696"<BR>
FontFamily="{StaticResource 
PhoneFontFamilyNormal}"<BR>
FontSize="{StaticResource 
PhoneFontSizeNormal}"<BR>
Foreground="{StaticResource 
PhoneForegroundBrush}"<BR>    
SupportedOrientations="Portrait" Orientation="Portrait"<BR>    
shell:SystemTray.IsVisible="True"></P>
<P><BR>
<!--LayoutRoot is the root grid where 
all page content is placed--><BR>
<
Grid x:Name="LayoutRoot"
Background="Transparent"></P>
<P>        
<Grid.Resources><BR>            
<DataTemplate x:Key="DataBoundListBoxItemTemplate"><BR>                
<Grid Margin="0,0,0,12"><BR>                                    
<StackPanel Margin="12,-14,0,0" Grid.Column="1"><BR>                        
<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Text="{Binding Japanisch}" TextWrapping="Wrap"/><BR>                        
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding Lesung}" TextWrapping="Wrap"/><BR>                        
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding Deutsch}" TextWrapping="Wrap"/><BR>                    
</StackPanel><BR>                
</Grid><BR>            
</DataTemplate><BR>        
</Grid.Resources></P>
<P>        
<Grid.RowDefinitions><BR>            
<RowDefinition Height="108"/><BR>            
<RowDefinition Height="588*"/><BR>        
</Grid.RowDefinitions></P>
<P>
<!--TitlePanel contains the 
name of the application and page title--><BR>
<
StackPanel
x:Name="TitlePanel" Margin="12,17,0,6"><BR>            
<TextBlock x:Name="ApplicationTitle" Text="WadokuJT" Style="{StaticResource PhoneTextNormalStyle}"/><BR>            
<TextBlock x:Name="PageTitle" Text="Deutsch -> Japanisch" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="43"/><BR>        
</StackPanel></P>
<P>
<
Grid Grid.Row="1" 
Margin="24,15,0,0"><BR>            
<Grid.RowDefinitions><BR>                
<RowDefinition Height="Auto"/><BR>                
<RowDefinition/><BR>            
</Grid.RowDefinitions><BR>            
<telerikPrimitives:RadDataBoundListBox x:Name="radWordList" Margin="0,95,0,0" Grid.Row="1" ItemTemplate="{StaticResource DataBoundListBoxItemTemplate}"/></P>
<P>        
</Grid><BR>        
<telerikPrimitives:RadTextBox Margin="18,0,0,511" x:Name="radAutoComplete" Grid.Row="1" /><BR>        
<telerikPrimitives:RadBusyIndicator <BR>                    
ContentPosition="Top"<BR>                    
FontFamily="Verdana"<BR>                    
FontSize="14"<BR>                    
AnimationStyle="AnimationStyle9"<BR>                    
x:Name="ProgressIndicator"<BR>                    
Foreground="DeepSkyBlue" 
Margin="42,68,31,0"<BR>                    
VerticalAlignment="Top"<BR>                    
Content="searching ..." Grid.Row="1" Height="58">  
<BR>        
</telerikPrimitives:RadBusyIndicator></P>
<P></Grid></P>
<P><!--Sample code showing usage of ApplicationBar--><BR>
<
phone:PhoneApplicationPage.ApplicationBar><BR
>
<
shell:ApplicationBar 
IsVisible="True" IsMenuEnabled="True"><BR>            
<shell:ApplicationBarIconButton IconUri="/Images/SearchButton.png" Click="ApplicationBarIconButton_Click" Text="Search" /><BR>
<
shell:ApplicationBar.MenuItems><BR
>
<
shell:ApplicationBarMenuItem 
Text="settings"/><BR>                
<shell:ApplicationBarMenuItem Text="how to"/><BR>                
<shell:ApplicationBarMenuItem Text="about"/><BR>
</
shell:ApplicationBar.MenuItems><BR>  </shell:ApplicationBar><BR> </phone:PhoneApplicationPage.ApplicationBar></P>
<P></phone:PhoneApplicationPage></P>

And here is the C# code:

 

<P>using System;<BR>
using
System.Collections.Generic;<BR>
using 
System.Linq;<BR>
using
System.Net;<BR>
using
System.Windows;<BR>
using 
System.Windows.Controls;<BR>
using
System.Windows.Documents;<BR>
using 
System.Windows.Media;<BR>
using
System.Windows.Media.Animation;<BR>
using 
System.Windows.Shapes;<BR>
using Microsoft.Phone.Controls;<BR>

using
 
Telerik.Windows.Controls;<BR>
using
WadokuJT.Model;<BR>
using 
System.Collections.ObjectModel;</P>
<P>namespace WadokuJT<BR>{<BR>
   
public partial class MainPage : 
PhoneApplicationPage<BR>    
    {<BR>
       
// 
Constructor<BR>
            
public
MainPage()<BR>        
            {<BR>            
            InitializeComponent();<BR>            
            this.DataContext = this;<BR>   //Shows the rate reminder message, according to the settings of the 
RateReminder.<BR>            
            (App.Current as App).rateReminder.Notify();<BR>
        }</P>
<P>        private void ApplicationBarIconButton_Click(object sender, EventArgs e)<BR>
        {</P>
<P>            
            ProgressIndicator.IsRunning = true;<BR>
           
//
all query -----------------------<BR>            
                var SearchItems = from t in App.Context.WadokuJT1<BR>                              
                                  where t.Deutsch.Contains(radAutoComplete.Text)<BR>                                       
                                  select t;</P>
<P>            
                allSearchItems = new ObservableCollection<WadokuJT1>(SearchItems);<BR>            
                this.radWordList.ItemsSource = allSearchItems;<BR>            
                ProgressIndicator.IsRunning = false;<BR>
        }</P>
<P>     // all sum ------------------------<BR>
       
private 
ObservableCollection<WadokuJT1>
AllSearch_Items;<BR>
       
public 
ObservableCollection<WadokuJT1> allSearchItems<BR>        
        {<BR>
           
get
return AllSearch_Items; }<BR>            
            set<BR>            
            {<BR>                
                if (value != AllSearch_Items)<BR>                
                {<BR>                    
                    AllSearch_Items = value;<BR>                
                }<BR>            
            }<BR>
        }<BR> <BR> </P>

    }<BR>
}</P>

Another problem I'm facing is that, at the very first time the application is started, it copies the database to the isolated storage if it doesn't exits. This is properly working, but I want to show a RadBusyIndicator ("Copying database...") during copying, but I don't know how to do that, because this happens before the MainPage is loaded. I have a DataHelper class for the copying, but I'm not able to integrate the indicator. Any help will be greatly appreciated.
Here is the DataHelper class code:

 

<P>using System.Windows.Input;<BR>
using
System.Windows.Media;<BR>
using 
System.Windows.Media.Animation;<BR>
using
System.Windows.Shapes;<BR>
using 
System.IO.IsolatedStorage;</P>
<P><BR>namespace WadokuJT<BR>
{<BR>
      
public static class 
DataHelper<BR>
       {<BR>   
            public static void MoveReferenceDatabase(string databaseFileName)<BR>        
            {<BR>
            var iso 
= IsolatedStorageFile.GetUserStoreForApplication();</P>
<P>         // we need to check to see if the file exists  </P>
<P>            if (!iso.FileExists(databaseFileName))<BR>            
                {</P>
<P>             // file doesn't exist...time to copy it. 
<BR>                
                using (var input = Application.GetResourceStream(new Uri(databaseFileName, UriKind.Relative)).Stream)<BR>                
                {<BR>                    
                   using (IsolatedStorageFileStream output = iso.CreateFile(databaseFileName))<BR>                    
                    {<BR>                        
                        byte[] readBuffer = new byte[4096];<BR>                        
                        int bytesRead = -1;</P>
<P>                        
                        while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0)<BR>                        
                        {<BR>                            
                            output.Write(readBuffer, 0, bytesRead);<BR>                        
                        }<BR>                    
                    }<BR>                
                }</P>
<P>            
            }<BR> 
    }<BR>
   }<BR>
}<BR></P>

Thank you very much.
Kind regards,
Joerg
PS.: Happy New Year to the Telerik team.

6 Answers, 1 is accepted

Sort by
0
Victor
Telerik team
answered on 02 Jan 2013, 02:55 PM
Hi Joerg,

Thanks for writing.
I am afraid that it is not possible to render anything on screen before the main page is loaded. You should start loading your data base after your app has started and the loading should be done in a worker thread if it takes too much time.

I suggest that you start your data base search using Dispatcher.BeginInvoke() after you set IsRunning to true. If this does not help please post a support ticket and attach your app so that I may debug it and provide further assistance.

I am looking forward to your reply.

Kind regards,
Victor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Wolfshund
Top achievements
Rank 2
answered on 10 Jan 2013, 01:46 AM
Hi Victor

thank you very much for your reply.
I understand what you are saying, so I'm will change the database loader to the point once the mainpage has been loaded.
However I don't understand the use of Dispatcher.BeginInvoke() very right now, so I will post a support ticket with the app included,
I first have to reduce the database a bit, cause the zipped file is around 28MB. Don't know if a upload of this size are supported.

Kind regards,
Joerg
0
Victor
Telerik team
answered on 10 Jan 2013, 08:56 AM
Hello Joerg,

Dispatcher.BeginInvoke() schedules the argument callback (in your case the database loading code) to be executed some time later. This will make sure that when the IsRunning property of the busy indicator is set to True, the animation will have time to start. Once the animation is started, it runs on the rendering thread and loading your database will not stop it from animating. That's the theory at least :)

You don't need to attach the whole database as well. You can simply change your app a little bit to simulate a long loading time. An empty loop for example, or Thread.Sleep().

I am looking forward to your reply.

All the best,
Victor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Wolfshund
Top achievements
Rank 2
answered on 25 Jan 2013, 12:54 PM
Hello Victor,

thank you for your advise. I submitted a support ticket (652609) with attached project. I changed the database loader to the point where the mainpage.xaml is loaded (db is still included in zip-file). In the project I replaced this with a Thread.Sleep loop around 10secs. In this loader function I'm not able to get the RadBusyIndicator to show up.
According your advice, using Dispatcher.BeginInvoke, I was able to get the RadBusyIndicator to show up properly when searching through the database after clicking the search button. The database is a dictionary German-Japanese and not really optimized, so performance is not that great yet. On WP7 it barely acceptable, on WP8 it is somwhat usable due better CPUs. I will enhance that at a later point, when the UI and navigation is working.
Thank you very much for your assistance.

Kind regards,
Joerg


0
Accepted
Victor
Telerik team
answered on 28 Jan 2013, 11:36 AM
Hi Joerg,

I have answered your support ticket about the same question.

Greetings,
Victor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Wolfshund
Top achievements
Rank 2
answered on 29 Jan 2013, 01:11 AM
Hello Victor,

thank you very much for your help.
Yes, your are right, I should handle the database loading in a different way.
Unfortunately, there is not much information around, how to work with Local database on WP.
Especially not with large databases. And much on Threads on WP too.
The first I will do next, is do clean up the database first (useless info,etc.), which might
cut the database into half of its actually size. And, maybe indexing on the search fields, because the DB is read-only.
The UI also might need an refresh/update too. I'll keep you informed.

Kind regards,
Joerg
Tags
BusyIndicator
Asked by
Wolfshund
Top achievements
Rank 2
Answers by
Victor
Telerik team
Wolfshund
Top achievements
Rank 2
Share this question
or