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

[Solved] Don't know how to use RadBusyIndicator

6 Answers 323 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 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:

<phone:PhoneApplicationPage 

x:Class="WadokuJT.MainPage"<BR> xmlns="<A href="http://schemas.microsoft.com/winfx/2006/xaml/presentation<;>"http://schemas.microsoft.com/winfx/2006/xaml/presentation<;/A>" 

xmlns:x="<A href="http://schemas.microsoft.com/winfx/2006/xaml<;>"http://schemas.microsoft.com/winfx/2006/xaml<;>"http://schemas.microsoft.com/winfx/2006/xaml<;/A>" 

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 

xmlns:d="<A href="http://schemas.microsoft.com/expression/blend/2008<;>"http://schemas.microsoft.com/expression/blend/2008<;>"http://schemas.microsoft.com/expression/blend/2008<;/A>" 

xmlns:mc="<A href="http://schemas.openxmlformats.org/markup-compatibility/2006<;>"http://schemas.openxmlformats.org/markup-compatibility/2006<;>"http://schemas.openxmlformats.org/markup-compatibility/2006<;/A>" 

xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" 

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives" 

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

SupportedOrientations="Portrait" Orientation="Portrait" 

shell:SystemTray.IsVisible="True">

<BR

>

<!--LayoutRoot is the root grid where

all page content is placed--><BR> <Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.Resources> 

<DataTemplate x:Key="DataBoundListBoxItemTemplate"> 

<Grid Margin="0,0,0,12"> 

<StackPanel Margin="12,-14,0,0" Grid.Column="1"> 

<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Text="{Binding Japanisch}" TextWrapping="Wrap"/> 

<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding Lesung}" TextWrapping="Wrap"/> 

<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding Deutsch}" TextWrapping="Wrap"/> 

</StackPanel> 

</Grid> 

</DataTemplate> 

</Grid.Resources>

<Grid.RowDefinitions> 

<RowDefinition Height="108"/> 

<RowDefinition Height="588*"/> 

</Grid.RowDefinitions>

<P

>

<!--TitlePanel contains the

name of the application and page title--><BR> <StackPanel x:Name="TitlePanel" Margin="12,17,0,6"> 

<TextBlock x:Name="ApplicationTitle" Text="WadokuJT" Style="{StaticResource PhoneTextNormalStyle}"/> 

<TextBlock x:Name="PageTitle" Text="Deutsch -> Japanisch" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="43"/> 

</StackPanel>

<P> <Grid Grid.Row="1" Margin="24,15,0,0"> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto"/> 

<RowDefinition/> 

</Grid.RowDefinitions> 

<telerikPrimitives:RadDataBoundListBox x:Name="radWordList" Margin="0,95,0,0" Grid.Row="1" ItemTemplate="{StaticResource DataBoundListBoxItemTemplate}"/>

</Grid> 

<telerikPrimitives:RadTextBox Margin="18,0,0,511" x:Name="radAutoComplete" Grid.Row="1" /> 

<telerikPrimitives:RadBusyIndicator  

ContentPosition="Top" 

FontFamily="Verdana" 

FontSize="14" 

AnimationStyle="AnimationStyle9" 

x:Name="ProgressIndicator" 

Foreground="DeepSkyBlue"

Margin="42,68,31,0" 

VerticalAlignment="Top" 

Content="searching ..." Grid.Row="1" Height="58">

 

</telerikPrimitives:RadBusyIndicator>

</Grid>

<BR> <phone:PhoneApplicationPage.ApplicationBar><BR> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 

<shell:ApplicationBarIconButton IconUri="/Images/SearchButton.png" Click="ApplicationBarIconButton_Click" Text="Search" /><BR> <shell:ApplicationBar.MenuItems><BR> <shell:ApplicationBarMenuItem Text="settings"/> 

<shell:ApplicationBarMenuItem Text="how to"/> 

<shell:ApplicationBarMenuItem Text="about"/><BR> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

And here is the C# code:

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



using

Telerik.Windows.Controls; using WadokuJT.Model; using System.Collections.ObjectModel;

namespace WadokuJT {  public partial class MainPage : PhoneApplicationPage 

{  // Constructor  public MainPage() 

{ 

InitializeComponent(); 

this.DataContext = this;  //Shows the rate reminder message, according to the settings of the

RateReminder. 

(App.Current as

App).rateReminder.Notify();<BR>

        }</P>

 private void ApplicationBarIconButton_Click(object sender, EventArgs

e)<BR>

        {</P>

ProgressIndicator.IsRunning = true;  //all query ----------------------- 

var SearchItems = from t in App.Context.WadokuJT1 

where t.Deutsch.Contains(radAutoComplete.Text) 

select t;

allSearchItems = new ObservableCollection<WadokuJT1>(SearchItems); 

this.radWordList.ItemsSource = allSearchItems; 

ProgressIndicator.IsRunning = false

;<BR>

        }</P>

 // all sum ------------------------  private ObservableCollection<WadokuJT1> AllSearch_Items;  public ObservableCollection<WadokuJT1> allSearchItems 

{  get { return AllSearch_Items; } 

set 

{ 

if (value != AllSearch_Items) 

{ 

AllSearch_Items = value; 

} 

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

using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.IO.IsolatedStorage;

 namespace WadokuJT {  public static class

DataHelper<BR>

       {<BR>

public static void MoveReferenceDatabase(string databaseFileName) 

{ var iso = IsolatedStorageFile.GetUserStoreForApplication();

 // we need to check to see if the file exists 

 if (!iso.FileExists(databaseFileName)) 

{

 // file doesn't exist...time to copy it.

 

using (var input = Application.GetResourceStream(new Uri(databaseFileName, UriKind.Relative)).Stream) 

{ 

using (IsolatedStorageFileStream output = iso.CreateFile(databaseFileName)) 

{ 

byte[] readBuffer = new byte[4096]; 

int bytesRead = -1;

while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0) 

{ 

output.Write(readBuffer, 0, bytesRead); 

} 

}

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

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.

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.

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

Accepted

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