How can one set elements on top of the Applicationbar (or have the layout be aware of it)?

Question

To clarify, I want to have my ApplicationBar resting on top of my LayoutRoot grid. The desired effect would be like this:

<StackPanel>
    <Grid x:Name="LayoutRoot" Background="Transparent">
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</StackPanel>

Of course, the above code doesn't work because the must be in the root tag of the page, but I do wish it did.

Does anyone know a way that I can create this effect? It doesn't have to be a perfect solution, just something that replicates it and will work on any resolution.

By request, I'll elaborate more on the specific problem.

The picture below is what I currently have:

I want the 'Specular Light' control to 'rest' on top of the app bar, like so:

And lastly but certainly not least, here is the relevant XAML:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" />
    <ScrollViewer Name="LightControl" Height="200" VerticalAlignment="Bottom" Visibility="Collapsed">
        <Grid Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" />
        </Grid>
    </ScrollViewer>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Thank you for reading and for your help.

Answer 1

So here are two solutions:

The first one is with the application bar not being transparent:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" />
    <ScrollViewer Name="LightControl" Height="150" VerticalAlignment="Bottom" Visibility="Collapsed">
        <Grid Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" />
        </Grid>
    </ScrollViewer>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

I actually have changed the height of the ScrollViewer: Height="150" so only two sliders will fit and completely removed the opacity from the app bar: Opacity="0".

Now with transparent application bar:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" />
    <ScrollViewer Name="LightControl" Height="150" Margin="0,0,0,70" VerticalAlignment="Bottom" Visibility="Collapsed">
        <Grid Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" />
            <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" />
            <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0"  
                Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" />
        </Grid>
    </ScrollViewer>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0">
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" />
        <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Since you ask for the application bar to be transparent the UI element(s), in your case the ScrollViewer, knows that the end of the page is actually where the application bar ends. So by adding 70 margin from bottom: Margin="0,0,0,70" would fix the "on top" problem.

Answer 2

You can't modify the AppBar Layout position, nor positioning it inside another element. It Always need to be declared at page level, as ApplicationBar is a property of the page itself, not a UIElement, FrameworkElement or Control property.

I don't understand exactly what you mean as "rest on top of my layout grid" If you want your layout grid be (in Z order) below your ApplicationBar, you can add the Opacity property with a value lower than 1 to the ApplicationBar, this way the page content use the full page and the ApplicationBar is positioned on top of the content. is this the effect you want? If not, please help me understand what you want to achieve (maybe a little image drawn with Paint can help to understand the visual effect you want)