Silverlight: Place an element at the top of the screen?

It is idiomatic in Windows Phone 7 to display a loading indicator at the very top of the screen. (I don't think there is any padding between the loading indicator and the top.)

What is the best way to do that in Silverlight? This XAML works, sorta:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- this needs to be 开发者_Go百科at the very top of the screen -->
    <ProgressBar x:Name="LoadingProgressBar" IsIndeterminate="True" Style="{StaticResource PerformanceProgressBar}" Grid.Row="0"/>

    <controls:Pivot Title="SECTIONS" x:Name="pivotControl" SelectionChanged="pivotControl_SelectionChanged" Grid.Row="1" />
</Grid>

It places the ProgressBar near the top of the screen, but there's still space. I could just apply a negative margin, but I suspect there's a more elegant way. What is the preferred way of doing this?

Have a look in the definition of the PhoneApplicationPage. Is shell:SystemTray.IsVisible set to True of False?

My guess is that you've got it set to True (the default).

If this is the case then space at the top of the page will be reserved to display the system tray. (Which includes signal strength, battery level indicator, clock, etc.) If you change this to False then the layout engine will use all available space for your controls.

The downside to this is that the user won't be able to access the tray while your app is running.

While it's common to put an inditerminate wait indicator at the top of the screen, it's also not unusual to see it in the middle of the screen. Subject to what you're actually displaying on the page, you could consider this if you want to preserve the ability to see the system tray.

Alternatively you could use a completely custom wait cursor.

Your code works for me. I pasted your code in, replacing your Pivot control for a button.

What are you seeing?

Inbuilt in the windows phone control templates is metro styling. As you say you can use the likes of negative margins (or paddings in controls I've looked at)... iirc, the progressbar has styling such that if the height is not a minimum of 73 pixels then the progressbar is obscured.

Alternatively you can go to the source of this by retemplating the control in blend and controling the properties in the consituent components that make up the control.

To do this, rclick the control in blend, edit template, edit a copy and you're away.