Question

I am trying to show a ProgressBar in my Windows Phone 7 app when the app is fetching data.

Here is my XAML:

        <!--Panorama item one-->
        <controls:PanoramaItem Header="headlines">             
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="220" />
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Button Name="refresh" Margin="320,-630,0,0" Grid.ColumnSpan="2" Height="75" Width="75" BorderThickness="0" Click="refresh_Click">
                    <Button.Foreground>
                        <ImageBrush ImageSource="/DataCollector.Tone;component/Resources/refresh-pressed.png" />
                    </Button.Foreground>
                    <Button.Background>
                        <ImageBrush ImageSource="/DataCollector.Tone;component/Resources/refresh.png" />
                    </Button.Background>
                </Button>
                <TextBlock Text="from heraldsun" Margin="12,-30,0,0" Style="{StaticResource PhoneTextSubtleStyle}" Grid.ColumnSpan="2"></TextBlock>
                <ProgressBar 
                    Margin="0,-40,0,0"
                    x:Name="progressBar"
                    IsIndeterminate="true"
                    Visibility="Visible" Grid.ColumnSpan="2" />
                <ListBox Name="headlines" Margin="0,10,-12,0" ItemsSource="{Binding Tones}" Visibility="Collapsed" Grid.ColumnSpan="2">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,17,0,17">
                                <!--Replace rectangle with image-->
                                <Image Source="{Binding ImageUrl}" Height="75" Width="100" Margin="12,10,9,0" VerticalAlignment="Top" />
                                <!--<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>-->
                                <StackPanel Width="311">
                                    <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>                   
                <!--Double line list with image placeholder and text wrapping-->
            </Grid>
        </controls:PanoramaItem>

Here is the back end code:

        // Load data for the ViewModel Items
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
                progressBar.Visibility = Visibility.Collapsed;
                headlines.Visibility = Visibility.Visible;
            }
        }

Answer 1

I recommend using the PerformanceProgressBar from the toolkit.

It runs on the compositor thread, so it won’t block with UI things.