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

BusyIndicator Inside a TabControl

8 Answers 140 Views
BusyIndicator
This is a migrated thread and some comments may be shown as answers.
Missing User
Missing User asked on 26 Apr 2011, 09:35 PM
Hello !

I'm working on a project that uses the TabControl, i have 3 TabItens, one of then when loaded call a service that fill 2 ComboBox's. Depending on the case sometimes the combo takes a litle time to fill with the data, and because of that the screem "frozem" for a while. What i'm triyng to do is, put a Busy Indicator inside of this TabItem, and use this to make more confortable to user. I already put the BusyIndicator, but is happening a occourd situation, when the tabitem  is loaded i change the IsBusy of BusyIndicatoris to true the screem be with "gray" background but the  BusyIndicator circle animation doens't show up.

I attach a Image that example what's happening, i wil be pleased if anyone can help me.

Thanks!

8 Answers, 1 is accepted

Sort by
0
Missing User
answered on 28 Apr 2011, 12:41 PM
Still Waiting for a reply....
0
George
Telerik team
answered on 02 May 2011, 08:37 AM
Hello,

 
This seems very strange. Could you please share some code with us? If you provide us the xaml, it would be very helpful.

I am glad to assist you further.

Kind regards,
George
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Missing User
answered on 02 May 2011, 03:54 PM
Hi George!

Ok, This is the XAML of the TabItem that i'm having trouble with, as i say before when i click on
this tab the two ComboBox's are loaded with the State and City of the Person, but sometimes
are manny data and the screen's froze for a while (5~10 seconds) and the BusyIndicator appear's
but the animation doesn't.    



<
telerik:RadTabItem
        x:Name="GridDetalhes"
Header="Detalhes" >
 
        <telerik:RadBusyIndicator
                          x:Name="BusyIndicator"
                          telerik:StyleManager.Theme="Windows7"                                                         
                          Loaded="BusyIndicator_Loaded"
                          Canvas.ZIndex="99999"
                          Canvas.Top="2" >
              
        <Grid DataContext="{TemplateBinding EditedAppointment}"                                        
            Background="{Binding Category.CategoryBrush}"
            Loaded="GridDetalhes_Loaded">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="35" />
                <RowDefinition Height="35" />
                <RowDefinition Height="35" />
                <RowDefinition Height="85" />
                <RowDefinition Height="80" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"
                    MinWidth="113" />
                <ColumnDefinition Width="Auto"
                     />                                               
                <ColumnDefinition Width="Auto" MinWidth="90" />
                <ColumnDefinition Width="Auto" MinWidth="90" />
                <ColumnDefinition Width="Auto" MinWidth="90" />
            </Grid.ColumnDefinitions>                                          
 
            <!-- CNPJ/CPF-->
            <TextBlock x:Name="CnpjLabel"                                               
                Grid.Row="0"
                TextWrapping="Wrap"
                Text="CPF/CNPJ:"
                HorizontalAlignment="Right"                                            
                                        Margin="0"
                FontWeight="Bold"                                              
                Visibility="Visible"
                Loaded="CnpjLabel_Loaded"
                Grid.Column="0" VerticalAlignment="Bottom" />
             
            <TextBox x:Name="txtCnpj"
                IsEnabled="True"
                Margin="8,0,10,0"
                Text="{Binding AgricultorCnpj, Mode=TwoWay}"
                Grid.Column="1"                                               
                Grid.Row="0"                                                    
                TextWrapping="Wrap"
                Height="22"
                Width="200"                                                    
                HorizontalAlignment="Left"
                Visibility="Visible"
                Loaded="txtCnpj_Loaded"
                VerticalAlignment="Bottom"
                LostFocus="txtCnpj_LostFocus"
                d:LayoutOverrides="Height" />
             
            <telerik:RadButton
                Content="Pesquisar Cliente"
                x:Name="btnBuscaAgricultor"
                Width="110"
                Height="27"
                Grid.Row="0"
                Grid.Column="1"
                HorizontalAlignment="Right"
                Click="btnBuscaAgricultor_Click"
                VerticalAlignment="Bottom"
                />
            <TextBox
                Name="txtIdCliente"
                Grid.Row="2"
                Grid.Column="0"
                Width="130"
                Height="30"
                Text="{Binding TarefaPessoaRelacaoID, Mode=TwoWay}"
                Visibility="Collapsed"                                               
                Loaded="txtIdCliente_Loaded"/>                                         
 
            <TextBlock
                Text="Cliente:"
                Grid.Row="1"                                               
                Grid.Column="0"
                x:Name="lblCliente"
                Loaded="lblCliente_Loaded"
                HorizontalAlignment="Right"
                FontWeight="Bold"
                Visibility="Visible"
                Margin="0" VerticalAlignment="Center"
                 />
            <TextBlock
                Grid.Row="1"
                Grid.Column="1"
                HorizontalAlignment="Left"
                Margin="8,0,0,0"
                Visibility="Visible"
                x:Name="txbNomeCliente"
                Text="{Binding NomeCliente, Mode=TwoWay}"
                Loaded="txbNomeCliente_Loaded" VerticalAlignment="Center"/>
 
            <TextBlock
                Text="UF/CIDADE:"
                x:Name="lblUfCidade"
                Loaded="lblUfCidade_Loaded"
                Grid.Row="2"                                               
                Grid.Column="0"
                FontWeight="Bold"
                Margin="0,-5,0,0"
                Visibility="Visible"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                 />
            <TextBlock
                Grid.Row="2"
                HorizontalAlignment="Left"
                x:Name="txbUfCliente"
                Visibility="Visible"
                Loaded="txbUfCliente_Loaded"
                Grid.Column="1"
                Text="{Binding UfCliente, Mode=TwoWay}"
                Margin="8,-5,0,0"                                                 
                d:LayoutOverrides="GridBox" VerticalAlignment="Center"/>
 
            <TextBlock
                Grid.Row="2"
                Grid.Column="1"
                HorizontalAlignment="Center"
                x:Name="txbCidadeCliente"
                Visibility="Visible"
                Text="{Binding CidadeCliente, Mode=TwoWay}"
                Loaded="txbCidadeCliente_Loaded"
                Margin="0,-5,200,0" VerticalAlignment="Center"/>
 
            <Path Data="M47,122 L408,122"
                  Fill="#DEDEE4"
                  Height="1"
                  Margin="0,0,146,6"
                  Stretch="Fill"
                  Stroke="#DEDEE4"
                  UseLayoutRounding="False"
                  VerticalAlignment="Bottom"
                  Grid.Row="2"
                  Grid.Column="0"
                  Grid.ColumnSpan="4"
                  Width="420"/>
             
            <Path Data="M47,122 L408,122"
                  Fill="#7B7B93"
                  Height="1"
                  Margin="0,0,146,7"
                  Stretch="Fill"
                  Stroke="#7B7B93"
                  UseLayoutRounding="False"
                  VerticalAlignment="Bottom"
                  Grid.Row="2"
                  Grid.Column="0"
                  Grid.ColumnSpan="4"
                  Width="420"/>
 
            <!-- UF/CIdade -->
            <TextBlock x:Name="UfCidadeLabel"
                Grid.Row="3"
                Grid.Column="0"
                Margin="0"
                Text="UF/Cidade:"
                ToolTipService.ToolTip="Estado e Cidade onde foi realizado o atendimento."
                ToolTipService.Placement="Mouse"
                Style="{StaticResource FormElementTextBlockStyle}"       VerticalAlignment="Center" />
 
            <telerik:RadComboBox x:Name="cmbUf"
                Style="{StaticResource FormElementStyle}"
                Grid.Row="3"
                Grid.Column="1"
                HorizontalAlignment="Left"
                telerik:StyleManager.Theme="Office_Silver"
                Margin="8,0,0,0"
                Loaded="cmbUf_Loaded"
                SelectionChanged="cmbUf_SelectionChanged"
                Width="57" Height="22"
                DisplayMemberPath="Descricao"
                SelectedValuePath="Codigo"
                />
             
 
            <telerik:RadComboBox x:Name="cmbCidade"
                Style="{StaticResource FormElementStyle}"
                Grid.Row="3"
                Grid.Column="1"
                telerik:StyleManager.Theme="Office_Silver"
                Margin="69,0,0,0"
                Loaded="cmbCidade_Loaded"
                Height="22"
                HorizontalAlignment="Left"
                SelectionChanged="cmbCidade_SelectionChanged"
                Width="278"
                DisplayMemberPath="Descricao"
                SelectedValuePath="Codigo" >                                               
                <telerik:RadComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </telerik:RadComboBox.ItemsPanel>
            </telerik:RadComboBox>
 
            <!-- Resultados/Oportunidades -->
            <TextBlock x:Name="ResultadosLabel"
                Grid.Row="4"
                Margin="0"
                Style="{StaticResource FormElementTextBlockStyle}"
                ToolTipService.ToolTip="Descreva os resultados deste atendimento"
                ToolTipService.Placement="Mouse"
                VerticalAlignment="Top"
                Width="97"
                TextAlignment="Right" Height="33"><Run Text="Resultados" /><Run Text=" e" /><LineBreak /><Run Text="Oportunidades" /><Run Text=":" /></TextBlock>
 
            <TextBox x:Name="Resultados/Oportunidades:"
                Grid.Row="4"
                Grid.Column="1"
                Width="340"
                HorizontalAlignment="Left"
                AcceptsReturn="True"
                TextWrapping="Wrap"
                Text="{Binding Resultados, Mode=TwoWay}"
                MaxLength="400"
                telerik:StyleManager.Theme="Office_Silver"
                Margin="8,0,0,0"
                VerticalScrollBarVisibility="Auto"
                VerticalContentAlignment="Top"
                ToolTipService.ToolTip="Descreva os resultados deste atendimento"
                ToolTipService.Placement="Mouse"
                VerticalAlignment="Top"
                Height="75"
                d:LayoutOverrides="Height" />
 
            <!-- Dificuldades -->
            <TextBlock x:Name="DificuldadesLabel"
                Grid.Row="5"
                Grid.Column="0"
                Margin="0,3,0,0"
                Text="Dificuldades:"
                Style="{StaticResource FormElementTextBlockStyle}"
                ToolTipService.ToolTip="Descreva as dificuldades encontradas neste atendimento"
                ToolTipService.Placement="Mouse"
                VerticalAlignment="Top"
                d:LayoutOverrides="GridBox" />
 
            <TextBox x:Name="Dificuldades"
                Grid.Row="5"
                Grid.Column="1"
                Width="340"
                HorizontalAlignment="Left"
                AcceptsReturn="True"
                TextWrapping="Wrap"
                MaxLength="400"
                telerik:StyleManager.Theme="Office_Silver"
                Margin="8,0,0,-16"
                VerticalScrollBarVisibility="Auto"
                VerticalContentAlignment="Top"
                ToolTipService.ToolTip="Descreva as dificuldades encontradas neste atendimento"
                ToolTipService.Placement="Mouse"
                Text="{Binding Dificuldades, Mode=TwoWay}"
                VerticalAlignment="Top" Height="75" />
 
        </Grid>                                       
       </telerik:RadBusyIndicator>                                
    </telerik:RadTabItem>

Thank You.
0
George
Telerik team
answered on 05 May 2011, 11:39 AM
Hi Joao,

 
As long as I understand, the RadComboBox.ItemsSource properties are not bound to a ViewModel. I suppose you are populating the controls using their instance. Such operation uses the UIThread and it could freeze the layout for some time. The RadBusyIndicator is a UIElement and it runs in the UIThread as well, and if it is frozen, the control will freeze as well. 

I would suggest performing the operation using a BackgroundWorker in the ViewModel, and to bind the RadComboBox.ItemsSource to this ViewModel.

I hope this helps.

Best wishes,
George
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Missing User
answered on 05 May 2011, 01:48 PM
Hi Again George.

I see.. I realy don't bind the ItemsSource of the combo in the XAML, i do this in the .cs of the View. I create a Property type of RadComboBox like this:

public RadComboBox cmbCidadeAtendimento;

And int the Loaded Event of the control i make the Binding in the .cs
//City Combo
private void cmbCidade_Loaded(object sender, RoutedEventArgs e)
        {
            this.cmbCidadeAtendimento = sender as RadComboBox;
 
            this.cmbCidadeAtendimento.ItemsSource = (this.DataContext as AgendaViewModel).obcComboCidade;
            this.cmbCidadeAtendimento.DisplayMemberPath = "Descricao";
            this.cmbCidadeAtendimento.SelectedValuePath = "Codigo";
 
            Binding binding = new Binding("CidadeAtendimentoID");
            binding.Mode = BindingMode.TwoWay;
            this.cmbCidadeAtendimento.SetBinding(RadComboBox.SelectedValueProperty, binding);
        }


You think because of this i'm getting the frozen problem? So if i made the Binding in the XAML instead of in the .CS using new instance of the RadComboBox the problem will be resolved or i still have to do the BackGroundWorker in the ViewModel?
Can you provide some example using the BackGroundWorker?

Thank you for your assistance
0
Accepted
George
Telerik team
answered on 11 May 2011, 09:40 AM
Hello,

 
As long as I understand, you set binding only for the RadComboBox.SelectedValueProperty. This is ok, and it shouldn't cause the problem. You can find an example using the BackgroundWorker in our online examples - http://demos.telerik.com/silverlight/#BusyIndicator/FirstLook

I hope this helps.

Best wishes,
George
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Missing User
answered on 11 May 2011, 12:58 PM
Hello again.

I see, i already try to implement this example of backgroundworker but i always get the invalid cross-thread access exception, i start to look more into it and i found something, in my viewModel i have a method that call a service, because it's assyncronous i have a Action that is fired when service call is completed, in this action a Fill a ObservableCollection that is bound with my City Combo, what is taking so long is this method, sometimes to fill the list takes 5~10 seconds. When the list is filled with the data the process return to the View and i select the right city of the person in question.
Here are some code to example:

My View Call this Method in ViewModel when i have the State ID:
public void BuscarCidades(int UfID)
        {
            IProjetosService ps = this.unityContainer.Resolve<IProjetosService>();
 
            //Carregar combo Cidades
            Action<List<ChaveValorObject>> acaoRetornoComboCidades =
                    new Action<List<ChaveValorObject>>(PreencherComboCidades);
 
            ps.RecuperarListaCidadesCombo(UfID, null, acaoRetornoComboCidades);
        }

When it's return this method is called by the Action above and fill the ObservableCollection With the Cities
public void PreencherComboCidades(List<ChaveValorObject> lista)
        {          
            obcComboCidade.Clear();
 
            Combo comboPrimeiraOpcao = new Combo();
            comboPrimeiraOpcao.Codigo = "0";
            comboPrimeiraOpcao.Descricao = "[Selecione...] ";
            obcComboCidade.Add(comboPrimeiraOpcao);
             
           //THIS IS TAKING 5~10 SECONDS TO EXECUTE!!!
            obcComboCidade.AddRange(lista.Select(c => new Combo()
                {
                    Codigo = c.Chavek__BackingField.ToString(),
                    Descricao = c.Valork__BackingField.ToString()
                }));
 
            if (this.SelecionarCidade != null)
            {
                this.SelecionarCidade();               
            }
        }

I try to implement the BackgroundWorker in this method on the ViewModel because it is the process that is taking long time and i always get the Invalid Cross Thread Acess Exception.
0
Missing User
answered on 11 May 2011, 04:04 PM
Hi George!

I'm here to say that i manage to solve my problem, i look into with more careful and i found i curious thing, when is the first time that i click on a appointmente and a window open, the frozen problem doesn't happen but if i close it and click in another BAM it happen! I debug a lot and i discovered that the List that i use in ItemsSource of the Combo are still with some "data" , so in the loaded of the Combo i just create a New list before adding it to the ItemSource.

Just Like this:

private void cmbCidade_Loaded(object sender, RoutedEventArgs e)
 {
            (this.DataContext as AgendaViewModel).obcComboCidade = new   System.Collections.ObjectModel.ObservableCollection<Combo>();
            this.cmbCidadeAtendimento = sender as RadComboBox;
            this.cmbCidadeAtendimento.ItemsSource = (this.DataContext as AgendaViewModel).obcComboCidade;
 }

Now even if i click in anothers appointmentes all the time the list are created again, i don't know if it's the right approach but it  work just fine for me. Thank you for your support!
Tags
BusyIndicator
Asked by
Missing User
Answers by
Missing User
George
Telerik team
Share this question
or