Scrollviewer in UWP app not working - windows-phone-8

I have a page in landscape mode, set in code with the next line:
DisplayInformation.AutoRotationPreferences = DisplayOrientations.LandscapeFlipped | DisplayOrientations.Landscape;
Following is code for full screen mode:
Windows.UI.ViewManagement.ApplicationView view = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
view.TryEnterFullScreenMode();
In my scrollviewer, I want to include some dynamically created charts from syncfusion package. I thought this was the problem but after a while, I tried creating some rows in a grid with just textblocks so I could try the scrollviewer and it doesn't work either.
This is all my page content (except page and page.resources content) :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Background="{StaticResource AccentBrush}" Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" SelectionChanged="Combo_device_SelectionChanged" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Click="Show_data_Button_Click" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="2">
<ScrollViewer Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
Can somebody tell me where the error is?
I tried by modifying the code a lot and the result is always the same. I thought it was because the content was dynamically created in C# part but after trying with textblocks, it doesn't seem to be the case.

Change the <RowDefinition Height="auto"/> for Grid.Row=2 which encloses your scrollViewer to <RowDefinition Height="*"/> or specify a minimum height for your scrollviewer.
EDIT
Remove Stackpanel also and just simply use a Scrollviewer
Working Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<ScrollViewer Grid.Row="2" Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</Grid>

Related

Disable the Grid vertical scroll-behavior of the scrollviewer in windows phone

Grid Structure
Load
When click on textbox and open keypad then title scroll up..I want to fix the title place (not scroll)
how to resove this problem?
when click on textbox keypad opened but title scroll up...
My xaml code
<Grid x:Name="grdEmergencyServices" ScrollViewer.VerticalScrollMode="Disabled" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/1.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="500*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="#8C6446" Grid.Row="0" Grid.ColumnSpan="3"/>
<Grid Grid.Row="0" Background="#8C6446" Opacity="0.8">
<TextBlock Name="pageTitle" Text="Title Name" Style=" {StaticResource CommonStyle}"/>
</Grid>
</Grid>
<ProgressRing Grid.Row="1" x:Name="ProgressRingLoad" Visibility="Collapsed" Background="Transparent" IsActive="True" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ScrollViewer Grid.Row="1" Margin="20">
<TextBox TextWrapping="Wrap" Text="TextBox" Margin="0,500,0,0"/>
</ScrollViewer>
</Grid>

Keep text block in view while scrolling in window phone 8.1 Runtime

my problem is exactly similar to this article
But I need to implement in wp8.1 runtime. I want textblock (name=txt_latest_update) in view while scrolling
here is my XAML code
<Grid Name="Root_content" Background="#FFF7FDF7">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Red">
<Image Source="/Assets/nepaltoday.png" HorizontalAlignment="Left" Margin="10,0,0,0"/>
</Border>
<ScrollViewer Grid.Row="1" Name="frontpage_scrollview" VerticalScrollBarVisibility="Visible"
>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Name="startscren" Stretch="Fill"/>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.3,0" EndPoint="1,0.">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Black" Offset="1.2" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid HorizontalAlignment="Right" Margin="0,10,10,0">
<StackPanel>
<TextBlock Name="txt_nepali_date" Foreground="White" FontSize="26"/>
<TextBlock Name="txt_eng_date" Foreground="White" FontSize="26" />
<TextBlock Name="txt_temp" Foreground="Yellow" FontSize="44" Margin="0,20,0,0"/>
<TextBlock Name="txt_location" FontSize="22"/>
</StackPanel>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="0,1,1,1"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Margin" Value="0,0,0,-20"/>
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Button Name="btnNews" Click="btnNews_Click">
<Image Source="/Assets/FrontPage/horoscope.png" VerticalAlignment="Stretch"/>
</Button>
<Button Name="btnHoroscope" Click="btnHoroscope_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
<Button Name="btnCurrencyExchanges" Click="btnCurrencyExchanges_Click">
<Image Source="/Assets/FrontPage/currency exchange.png"/>
</Button>
<Button Name="btnStockExchanges" Click="btnStockExchange">
<Image Source="/Assets/FrontPage/on this day.png"/>
</Button>
<Button Name="btnOnthisday" Click="btnOnthisday_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
<Button Name="btnMovie" Click="btnMovie_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
</StackPanel>
<StackPanel Grid.Column="1" >
<Button Name="btnWeather" Click="btnWeather_Click">
<Image Source="/Assets/FrontPage/whether.png"/>
</Button>
<Button Name="btnLoadshedding" Click="btnLoadshedding_Click">
<Image Source="/Assets/FrontPage/loadshedding.png"/>
</Button>
<Button Name="btnGoldSilver" Click="btnGoldSilver_Click">
<Image Source="/Assets/FrontPage/gold_silver rates.png"/>
</Button>
<Button Name="btnTheatre" Click="btnTheatre_Click">
<Image Source="/Assets/FrontPage/theater.png"/>
</Button>
<Button Name="btnCalendar" Click="btnCalendars">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
</StackPanel>
</Grid>
</Grid>
</StackPanel >
</ScrollViewer>
<Border Name="TitleBorder" Grid.Row="1"
Background="#FF264778" Opacity="0.7"
Margin="0,260,0,0"
Height="{Binding ElementName=TitleText, Path=Height}"
VerticalAlignment="Top">
<TextBlock Name="txt_lastest_update" HorizontalAlignment="Center"
Text="keep in view"
Foreground="White"
FontSize="22"
Margin="12" />
</Border>
</Grid>
Any suggestion?
hey i think your problem is, you want keep your textblock fixed while list is scroll. so you have to keep your list in different grid and textblock in different grid which need to fix. and make grid which contain list scrolable = true.

disable click event everywhere when Process Ring is Active in Windows phone 8.1

I have a XAML Page in that i have putted various control for login, whenever i click on Login Button , process will start for authenticate the user ,process ring is activated at the start of Login_click event and it will stop at the end of that event.
i Just want that during that process no buddy can click on any control of the page.
i think it is possible from both the methods from c# and also from and XAML
<Grid>
<ProgressRing Name="prcsring1" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Background="Transparent" Canvas.ZIndex="9999"/>
<Grid Margin="0,0,0,0" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<!--1-->
<RowDefinition />
<!--2-->
<RowDefinition />
<!--3-->
<RowDefinition />
<!--4-->
<RowDefinition />
<!--5-->
<RowDefinition />
<!--6-->
<RowDefinition />
<!--7-->
<RowDefinition Height="25" />
<!--8-->
<RowDefinition Height="60"/>
<!--9-->
<RowDefinition Height="20"/>
<!--10-->
<RowDefinition />
<!--11-->
<RowDefinition Height="40"/>
<!--12-->
<RowDefinition />
<!--13-->
<RowDefinition Height="70" />
<!--14-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0" x:Name="stackpanHead1" Background="#424242" />
<Image x:Name="imgstatusGreen" Visibility="Collapsed" Source="../Images/Confirmed Images/index_green1.png" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<Image x:Name="imgstatusRed" Source="../Images/Confirmed Images/index_red1.png" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<Image x:Name="imgstatusOrange" Source="../Images/Confirmed Images/Orange.png" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" Margin="0,10,0,0" Foreground="#5C5C5C" FontSize="50" FontWeight="Bold" TextWrapping="Wrap" Text="Welcome to" />
<Image Grid.Column="0" Grid.Row="2" x:Name="imglogo" Source="../Images/alogo.png" Margin="40,0,40,0" VerticalAlignment="Center" />
<TextBlock Grid.Column="0" Grid.Row="3" FontSize="30" Margin="0,0,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" Text="Your Gateway to" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#5C5C5C" />
<TextBlock Grid.Column="0" Grid.Row="4" FontSize="30" Margin="0,0,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" Text="e-Government and Visas" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#5C5C5C" />
<Border Grid.Column="0" Grid.Row="5" Margin="50,5,50,5" Name="cornradusername" CornerRadius="10" Height="40" BorderThickness="2" Background="White" BorderBrush="Black" >
<TextBox x:Name="txtusername" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Center" TextWrapping="Wrap" Text="" PlaceholderText="User Name" Background="White" />
</Border>
<Border Grid.Column="0" Grid.Row="6" Name="cornradpass" CornerRadius="10" Margin="50,5,50,5" Height="40" BorderThickness="2" Background="White" BorderBrush="Black" >
<PasswordBox x:Name="txtpass" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Center" PlaceholderText="Password" Background="White" />
</Border>
<TextBlock Grid.Column="0" Grid.Row="7" Name="lblwrong" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="" FontWeight="Bold" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="Red" Width="390"/>
<TextBlock Grid.Column="0" Grid.Row="8" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="Enter credentials To Authenticate" HorizontalAlignment="Center" Foreground="#5C5C5C"/>
<WebView Grid.Column="0" Grid.Row="9" Name="WebView2" Margin="0,0,0,0" Width="360" Height="30" HorizontalAlignment="Center" />
<HyperlinkButton Grid.Column="0" Grid.Row="10" Foreground="#086A87" FontFamily="Arial Black" FontWeight="Bold" FontSize="20" Content="Forgot password? click here.." HorizontalAlignment="Center" Click="HyperlinkButton_Click"/>
<Grid Grid.Column="0" Grid.Row="11" Margin="0,0,0,0" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Content="Login" Margin="0,0,5,0" x:Name="btnlogin1" HorizontalAlignment="Right" Click="Button_Click" BorderThickness="0" Foreground="White">
<Button.Background>
<ImageBrush ImageSource="../Images/button_green.png"/>
</Button.Background>
</Button>
<Button Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" Content="New User" x:Name="btnnewuser1" HorizontalAlignment="left" BorderThickness="0" Foreground="White">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="../Images/button_green.png"/>
</Button.Background>
</Button>
</Grid>
<TextBlock Grid.Column="0" Grid.Row="12" VerticalAlignment="Center" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="Version: 1.79" HorizontalAlignment="Center" Foreground="#5C5C5C"/>
<StackPanel Grid.Column="0" Grid.Row="13" x:Name="Add" Background="Aqua" />
</Grid>
</Grid>
private async void Button_Click(object sender, RoutedEventArgs e)
{
Ringprocess_Activate(prcsring1);
----------------------My Code for Process--------------------
Ringprocess_DeActivate(prcsring1);
}
Can be as simple as
private async void Button_Click(object sender, RoutedEventArgs e)
{
this.IsEnabled = false; // disable the page
Ringprocess_Activate(prcsring1);
// .. your code
Ringprocess_DeActivate(prcsring1);
this.IsEnabled = true; // enable the page
}
If you do it this way make sure you comment out any StoryBoard that enables the "Disable" state, other wise, it will kinda grey out the controls which you probably don't want on that RingProcess Control.

Windows Phone Listpicker crash with lumia 1520

One of my user has problem with the listpicker.
The problem is only happen with his lumia 1520 (and I think also with other phone with that resolution but I can't test it).
The listpicker crash when the user tap on it and it goes to full mode display in order to select the item.
Here is the stack trace:
Frame Image Function Offset
0 system_windows_ni MS.Internal.XcpImports.CheckHResult 0x0019fe24
1 system_windows_ni MS.Internal.XcpImports.SetValue 0x00000056
2 system_windows_ni MS.Internal.XcpImports.SetValue 0x000004e4
3 system_windows_ni System.Windows.DependencyObject.SetObjectValueToCore 0x0000006c
4 system_windows_ni System.Windows.DependencyObject.SetEffectiveValue 0x0000002e
5 system_windows_ni System.Windows.DependencyObject.UpdateEffectiveValue 0x00000086
6 system_windows_ni System.Windows.DependencyObject.SetValueInternal 0x00000112
7 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.UpdateMargin 0x000001b8
8 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.InternalUpdateOrientationAndMarginForPage 0x0000006c
9 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.System.Windows.Controls.IFrame.InternalUpdateOrientationAndMarginForPage 0x00000020
10 microsoft_phone_ni System.Windows.Navigation.NavigationService.CompleteNavigation 0x0000016a
11 microsoft_phone_ni System.Windows.Navigation.NavigationService+__c__DisplayClass7._NavigateCore_StartNavigation_b__4 0x00000020
this is the xaml code for the listpicker:
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Categories}" SelectedItem="{Binding Category, Mode=TwoWay}" />
and this is the style:
<Style TargetType="toolkit:ListPicker">
<Setter Property="FullModeItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 15 0 15">
<TextBlock Text="{Binding}"
Margin="0 0 0 0"
FontSize="{StaticResource PhoneFontSizeLarge}"
FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
this is the page where there is the listpicker:
<local:MyPhoneApplicationPage
x:Class="EasyShopping.Views.Details.ProductDetailView"
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:local="clr-namespace:EasyShopping.Framework"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
xmlns:vm="clr-namespace:EasyShopping.ViewModels.Details"
d:DataContext="{d:DesignInstance vm:SampleProductDetailViewModel, IsDesignTimeCreatable=True}"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="{Binding Resources.AppNameTitle}" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="{Binding Resources.Product}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Resources.Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBox Grid.Column="1" Text="{Binding Name, Mode=TwoWay}" InputScope="Text" />
<TextBlock Grid.Row="1" Text="{Binding Resources.Category}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Categories}" SelectedItem="{Binding Category, Mode=TwoWay}" />
<TextBlock Grid.Row="2" TextWrapping="Wrap" Text="{Binding Resources.DefaultMeasureUnit}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" ItemsSource="{Binding QuantityTypes}" SelectedItem="{Binding QtaType, Mode=TwoWay}" />
</Grid>
</Grid>
<local:MyPhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<cal:AppBarButton IconUri="/Images/save.png" Text="save" Message="Save" />
<cal:AppBarButton IconUri="/Images/cancel.png" Text="cancel" Message="Cancel" />
</shell:ApplicationBar>
</local:MyPhoneApplicationPage.ApplicationBar>
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
someone could help me?
thank you
Luca

Windows Phone 8 panorama layouts

I'm new to Windows phone 8 development and I am having difficulty with a panorama view.
When I create a basic 'Windows Phone Portrait Page' I have no difficulty creating grids and aligning Toolbox controls between those grids.
However, with the Panorama page, when I create grids, those grids are applied to every page in the panorama and therefore I cannot use different layouts for each page.
How would I achieve different layouts on my panorama page?
Should I be using a WindowsPhoneControl instead?
Thanks for your time.
<phone:PhoneApplicationPage
x:Class="SmarterPower.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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
<!--Panorama control-->
<phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3">
<phone:Panorama.Background>
<ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="menu"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432">
<!--Replace rectangle with image-->
<Image Source="{Binding Image}" />
<StackPanel Width="311" Margin="8,-5,0,5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
You should define your rows and columns in a Grid control inside a panorama item, instead of defining them in the layout root grid:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama Title="My Panorama" >
<!--Panorama item one-->
<phone:PanoramaItem Header="item 1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item 2">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>