Only the first control is visible on my PanoramaItem

Question

I have writted a little application in WP7 in the panorama mode. I would like to attach severals controls on my Panorama item.

My problem is that i can see only my first control.

Do you have an idea why ?

Here is my XAML code

<phone:PhoneApplicationPage 
x:Class="DataArbitror.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="False" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps" Loaded="PhoneApplicationPage_Loaded" BackKeyPress="PhoneApplicationPage_BackKeyPress">


<!--LayoutRoot est la grille racine où tout le contenu de la page est placé-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <!--Contrôle Panorama-->
    <controls:Panorama Title="Data arbitror" Background="{x:Null}" Margin="0,15,0,-15" Grid.ColumnSpan="2">
        <!--Élément un de panorama-->
        <controls:Panorama.TitleTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="85" Margin="0,50,0,0" />
            </DataTemplate>
        </controls:Panorama.TitleTemplate>

        <controls:PanoramaItem Header="Paramètres" HeaderTemplate="{StaticResource MyPanoramaHeaderTemplate}">
            <StackPanel>

                <TextBlock Height="43" HorizontalAlignment="Left" Margin="22,276,0,0" Name="textBlock1" Text="Désactiver les connexions de données entre" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2"  />
                <toolkit:TimePicker HorizontalAlignment="Left" Margin="46,325,0,0" Name="TimeBegin" VerticalAlignment="Top" />
                <toolkit:TimePicker HorizontalAlignment="Left" Margin="46,429,0,0" Name="TimeEnd" VerticalAlignment="Top" />
                <TextBlock Height="30" HorizontalAlignment="Left" Margin="90,396,0,0" Name="textBlock2" Text="et" VerticalAlignment="Top" />
                <TextBlock Height="43" HorizontalAlignment="Left" Margin="22,547,0,0" Name="textBlock3" Text="Désactiver les connexions de données après" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2"  />
                <TextBox Height="72" HorizontalAlignment="Left" Margin="46,0,0,130" Name="textBoxMinutes" Text="1" VerticalAlignment="Bottom" Width="101" />
                <TextBlock Height="43" HorizontalAlignment="Left" Margin="155,615,0,0" Name="textBlock4" Text="minutes d'innactivitée" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" />
                <toolkit:ToggleSwitch Margin="232,371,21,0" Header="Etat" Name="toggleSwitch1" VerticalAlignment="Top" Height="124" Width="227" SwitchForeground="#78BC27" />
                <toolkit:ToggleSwitch Height="124" Header="Etat" Margin="232,0,21,12" Name="toggleSwitch2" VerticalAlignment="Bottom" Width="227" SwitchForeground="#78BC27" />

            </StackPanel>
            <!--Liste double trait avec habillage du texte-->
        </controls:PanoramaItem>

        <!--Élément deux de panorama-->
        <!--Utilisez 'Orientation="Horizontal"' pour activer un panneau qui s'affiche horizontalement-->
        <controls:PanoramaItem Header="A propos" HeaderTemplate="{StaticResource MyPanoramaHeaderTemplate}">
            <!--Liste double trait avec espace réservé pour une image et habillage du texte-->
        </controls:PanoramaItem>
    </controls:Panorama>

</Grid>

Thanks a lot :)

Answer 1

I believe you need to remove (or alter) the margins on your controls. Looking at them, 325 from top, 429 from top, 396 from top, and so forth... They're going to be below the bottom edge of the screen. The top margin is not going to be counted from the top of the screen, but from the top of where that control would be placed if there were no margin.

Let's say the top of the StackPanel is at 400 from the top of screen. If the first item has no margin, it will be at 400. If that control is 100 tall, then the next control will be at 500. But if you have a top margin of 325, then that control will be at 825, or 25 pixels below the bottom of the screen. Adding a margin to the third control will exacerbate the problem, and so forth.