[Solved] BusyIndicator Inside a TabControl

[Missing User]

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!

[Missing User]

Still Waiting for a reply....

[George]

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

[Missing User]

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.

[George]

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

[Missing User]

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

[George]

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

[Missing User]

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.

[Missing User]

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!