ProgressBar on Windows Phone 7 is not showing - windows-phone-7

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.

Answer 2

In following code:
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
progressBar.Visibility = Visibility.Collapsed;
headlines.Visibility = Visibility.Visible;
}
If App.ViewModel.LoadData() is a synchronous method, thant may be keeping your UI from updating.
Try putting entire MainPage_Loaded code into a seperate method and call it asynchronously.

Answer 3

If I'm reading your most recent comment correctly, the problem you have now is that the value of the visible is initialy true, because the data is loading, and then the binding never occurs again when the data is loaded. I would recommend hooking up to an event (and making it on the data model if need be)
App.ViewModel.OnDataLoaded += (s, e) => performanceProgressBar.Visibility = Visibility.Hidden