WP8 Progress Bar Not Rendering

Question

I have placed a Progress Bar control within my MainPage.xaml. The application type is Pivot.

For some reason, the Progress Bar and a TextBlock which I have placed within a PivotItem and below a Grid are not showing. There is a LongListSelector directly beneath these two controls. Are these two controls not showing because of that? I used the UI to drag the LongListSelector beneath then anyway, so I'm not sure why it's not showing.

This is the XAML:

<phone:Pivot Title="Title" Background="White" Foreground="Black">
    <!--Pivot item one-->
    <phone:PivotItem Header="Header" Foreground="Black">
        <Grid>
            <ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" Margin="0,0,0,579"/>
            <TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" Margin="0,24,0,541" />
            <phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0">
                <phone:LongListSelector.ItemTemplate>
                ...
                ...
                ...

As you can see, there is a ProgressBar and a TextBlock above the LongListSelector who are also inside the Grid control.

Any ideas why these two controls are not showing?

Answer 1

I think you have something wrong with Margin or item positioning. I've tested code below and it works:

<phone:Pivot Title="Title" Background="White" Foreground="Black">
  <!--Pivot item one-->
  <phone:PivotItem Header="Header" Foreground="Black">
     <Grid>
         <StackPanel Orientation="Vertical" VerticalAlignment="Center">
           <ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" VerticalAlignment="Center" Margin="0"/>
           <TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" 
                               HorizontalAlignment="Center" Text="Something"/>
         </StackPanel>
         <phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0"/>
     </Grid>
 </phone:PivotItem>
</phone:Pivot>

Answer 2

Remove margin of all child element of StackPanel. This will defiantly helps you. 

<phone:Pivot Title="Title" Background="White" Foreground="Black">
  <!--Pivot item one-->
 <phone:PivotItem Header="Header" Foreground="Black">
  <Grid>
   <StackPanel>
   <ProgressBar Name="progressBar" Value="0" IsIndeterminate="True"/>
   <TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black"  />
   <phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
       <phone:LongListSelector.ItemTemplate>
   </StackPanel>
  </Grid>
  </phone:PivotItem>
</<phone:Pivot>

Answer 3

Hardcoding control's position (especially by dragging controls in designer) is not a good practice. Try to define rows for your Grid, then specify Grid.Row for controls inside the Grid. With that you can arrange Grid content more neatly. Check this link for more sample and explanation about layouting controls inside Grid. Following is an example for your situation :

<phone:PivotItem Header="Header" Foreground="Black">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" />
            <TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
        </StackPanel>
        <phone:LongListSelector Grid.Row="1" Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
            <phone:LongListSelector.ItemTemplate>
        ...
        ...