Don't know how to use RadBusyIndicator

7 posts, 1 answers
  1. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 27 Dec 2012 Link to this post

    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.

  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 02 Jan 2013 Link to this post

    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.
  3. DevCraft banner
  4. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 09 Jan 2013 Link to this post

    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
  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 10 Jan 2013 Link to this post

    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.
  6. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 25 Jan 2013 Link to this post

    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


  7. Answer
    Victor
    Admin
    Victor avatar
    1351 posts

    Posted 28 Jan 2013 Link to this post

    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.
  8. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 28 Jan 2013 Link to this post

    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
Back to Top
DevCraft banner