BusyIndicator Inside a TabControl

9 posts, 1 answers
  1. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 26 Apr 2011 Link to this post

    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!
  2. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 28 Apr 2011 Link to this post

    Still Waiting for a reply....
  3. DevCraft banner
  4. George
    Admin
    George avatar
    1332 posts

    Posted 02 May 2011 Link to this post

    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
  5. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 02 May 2011 Link to this post

    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.
  6. George
    Admin
    George avatar
    1332 posts

    Posted 05 May 2011 Link to this post

    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
  7. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 05 May 2011 Link to this post

    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
  8. Answer
    George
    Admin
    George avatar
    1332 posts

    Posted 11 May 2011 Link to this post

    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
  9. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 11 May 2011 Link to this post

    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.
  10. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 11 May 2011 Link to this post

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