LongListSelector Turnstile effect isn't working - xaml

I have added WP-toolkit to my project, the pages' animation and the LLS tilt effect is working, but not the Turnstile effect. Instead of animating each list items separately, it animates the whole page at the same time. This is my xaml:
<phone:PhoneApplicationPage
x:Class="SzegediMenetrend.V2.V2megallo"
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"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d"
d:DataContext="{d:DesignData V2.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
toolkit:TiltEffect.IsTiltEnabled="True">
<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>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="2-ES VILLAMOS" Style="{StaticResource PhoneTextNormalStyle}" toolkit:TurnstileFeatherEffect.FeatheringIndex="0" />
<TextBlock Text="megállók" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" toolkit:TurnstileFeatherEffect.FeatheringIndex="1" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector toolkit:TiltEffect.IsTiltEnabled="True" x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged" toolkit:TurnstileFeatherEffect.FeatheringIndex="2" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I've tried it both on simple and pivot pages, and it still don't work. What is the problem?

You are using "regular" turnstile transition instead of feathered one. Change it to this.
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Related

Scroll Over Ad Control - Windows Phone UWP

I am using ad control in my xaml as below
<Page
x:Class="namespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:namespace"
xmlns:ViewModels="using:namespace.ViewModels"
xmlns:common="using:namespace.Classes"
xmlns:stringBind="using:namespace.Classes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:q42controls="using:Q42.WinRT.Controls"
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
Background="Gray"
mc:Ignorable="d">
<Page.Resources>
<ViewModels:ArticleViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTest">
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<StackPanel Margin="-15 0 -15 0">
<Grid>
<Image x:Name="PlaceHolderImage" Source="Assets/PlaceHolder.jpg"></Image>
<Image q42controls:ImageExtensions.CacheUri="{Binding ImageURL}" Tag="{Binding ImageURL}" Tapped="ImageView"></Image>
</Grid>
<StackPanel Background="White">
<TextBlock Text="{Binding UpdatedDate}" FontSize="15" HorizontalAlignment="Center"
VerticalAlignment="Center" Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 10 0 10"
FontFamily="{StaticResource ContentControlThemeFontFamily}"
Foreground="#777"></TextBlock>
<Border VerticalAlignment="Bottom" Height="1" Background="Black" Opacity="0.1">
</Border>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}"
Margin="10 5 10 -5" TextWrapping="Wrap"
FontSize="{Binding HeadlineFontSize}" Foreground="Black"
FontFamily="{StaticResource HeadlineCommonFamiy}"
Pivot.SlideInAnimationGroup="GroupTwo"/>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="{Binding AbstractFontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 10 10"
Foreground="#999"
FontFamily="{StaticResource AbstractCommonFamily}"/>
</StackPanel>
<StackPanel x:Name="descriptionSP" Background="White">
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-240,5,5"
Width="300"
ErrorOccurred="AdControl_ErrorOccurred"/>
<RichTextBlock IsTextSelectionEnabled="False" x:Name="richTextBlock"
local:Properties.Html="{Binding ArticleDetail}" TextWrapping="Wrap"
FontSize="{Binding FontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10,10,10,-20"
FontFamily="{StaticResource ContentControlThemeFontFamily}">
</RichTextBlock>
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-220,5,5"
Width="300" Loaded="AdControl_Loaded"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Foreground="Black" Background="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share" Click="Share_Click" Label="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png" Height="30" Margin="0,-5,0,0"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite" Name="favIcon" Click="Favorite_Click" Label="Favorite" Margin="0,-2,0,0"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="#f2f2f2" x:Name="grid">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="#d03438" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Collapsed">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
<Grid Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Name="popUp">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="/Assets/Close_White.png" HorizontalAlignment="Right" Grid.Row="1" Tapped="CloseImage"></Image>
<ScrollViewer x:Name="scroll" ZoomMode="Enabled" Grid.Row="2">
<Image x:Name="popUpImage" VerticalAlignment="Center" Margin="0,-50,0,0"></Image>
</ScrollViewer>
</Grid>
</Grid>
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control. Please someone guide to solve the issue. Any help on this would be very much helpful to solve the issue
Expected output
Thanks in advance
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control.
You need to set the height of your ScrollViewer explicitly:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible" Height="300">//here I set the height of ScrollViewer to 300
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
I set the ScrollViewer's height to 300 and when the Content's height is bigger than 300. ScrollViewer will show correctly.
Update: Here is the complete demo: AdControlSample
To show the Pivot Header you need to set the margin of Pivot Control to Margin="0,0,0,0" and also you need to fill your defined header template headerTest:
<Page.Resources>
<DataTemplate x:Key="headerTest">
<StackPanel>
<TextBlock Text="{Binding HeadLine}"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
...
Fix the margin:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible">
<Pivot x:Name="pivot" Margin="0,0,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
And here is the result:
You need to put the ScrollViewer inside the PivotItem's DataTemplate.
Currently the ScrollViewer wraps the whole Pivot, but the pivot itself handles the scroll event which means the ScrollViewer does not receive it. You can confirm this when you hover the scroll bar with your mouse and scroll - in this case it will work, because the mouse is no longer inside the Pivot itself.
The solution would look like this:
<DataTemplate x:Key="pivotTemplate">
<ScrollViewer>
<StackPanel Margin="-15 0 -15 0">
...
</StackPanel>
</ScrollViewer>
</DataTemplate>

Get height of all child ListViews

So I have a ScrollView with a StackPanel. Inside the StackPanel I have three ListViews with different List<object>-sources.
What I want to achieve is to disable scrolling on the ListViews and only scroll all of them in the same ScrollView.
I get something that scrolls a little bit okey when i hardcode the height of the scrollview, but if I don't do that it only snaps back to start after I release the finger. How can I achieve to get the height?
Current XAML:
<Style x:Key="ListViewHeaderDisableScroll" TargetType="ListView">
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
</Style>
<Page
x:Class="TestApp.SecondaryView.PatientDetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModels="using:TestApp.ViewModel"
mc:Ignorable="d">
<Page.DataContext>
<ViewModels:PatientDetailViewModel />
</Page.DataContext>
<Grid Background="White">
<StackPanel Orientation="Vertical">
/* Menu-Grid*/
<ScrollViewer VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" IsVerticalRailEnabled="True" Height="800">
<StackPanel Name="StackPanel_Lists">
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyProblems}" Background="White">
<ListView.Header>
<StackPanel Style="{StaticResource ListViewHeaderStackPanel}">
<TextBlock Text="HEADER 1" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyMeasures}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 2" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyGoals}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 3" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
So I found this:
The StackPanel outside og everything did ruin everything. I changed it to Grid and made the ScrollView *. Now everything works

XAML fixed banner on top of scrollable area

I'm trying to add a banner that remains fixed in the window to my page and I'm having a tough time.
This is what I am trying to achieve: I want a banner that floats at the top of the window (for an ad), then I want the rest of the content in a scrollable area. First item should be a textBlock, then a textBox, then a button.
This is the code I've got now and it looks right except for the scrolling. Help would be appreciated.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Universal="using:Microsoft.AdMediator.Universal"
x:Class="App2.MainPage"
mc:Ignorable="d" RequestedTheme="Dark">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Grid.RowSpan="3">
<Universal:AdMediatorControl x:Name="AdMediatorName" Height="90" Id="AdMediator-Id" Margin="10,0"/>
<ScrollViewer x:Name="myScrollViewer" VerticalScrollMode="Enabled">
<StackPanel Grid.RowSpan="2">
<TextBlock x:Name ="outputConsole" FontSize="15" RenderTransformOrigin="0.5,0" TextWrapping="WrapWholeWords" Margin="0,0,10,0" FontFamily="Consolas" IsTextSelectionEnabled="True">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
<TextBlock.Projection>
<PlaneProjection/>
</TextBlock.Projection>
<Run/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBox x:Name="inputConsole" FontSize="20" KeyUp="inputKeyUp" Margin="0,0,10,0" FontFamily="Consolas" IsTapEnabled="True" IsTextPredictionEnabled="True"/>
<Button x:Name="submitButton" Content="Submit" Click="submitButtonClick"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Page>
I figured it out. I just needed to put it directly in the grid. Sorry, still learning XAML.
You just answered your question. You have to do something like this,
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal"><TextBlock x:Name ="outputConsole" FontSize="15" RenderTransformOrigin="0.5,0" TextWrapping="WrapWholeWords" Margin="0,0,10,0" FontFamily="Consolas" IsTextSelectionEnabled="True">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
<TextBlock.Projection>
<PlaneProjection/>
</TextBlock.Projection>
<Run/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBox x:Name="inputConsole" FontSize="20" KeyUp="inputKeyUp" Margin="0,0,10,0" FontFamily="Consolas" IsTapEnabled="True" IsTextPredictionEnabled="True"/>
<Button x:Name="submitButton" Content="Submit" Click="submitButtonClick"/>
</StackPanel>
<ScrollViewer Grid.Row="1">
</ScrollViewer>

windows phone page XAML Preview not showing in Blend and Visual studio

I have written code in mainpage.xaml in universal app project and windows phone 8.1 section. The preview in visual studio and blend is showing as empty. Pictures are attached.
NO TEXT of text block set from back c# code. all code is set here.
Windows phone ouput is also attached.
Following is the code
<Page
x:Class="PakistanNewspapers.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PakistanNewspapers"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Hub>
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="lblHeader" Text="Pakistani Newspapers"></TextBlock>
</DataTemplate>
</Hub.HeaderTemplate>
<HubSection Header="Urdu Newspapers" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal">
<Image x:Name="txtNewspaperImage" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtNewspaperHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
<TextBlock x:Name="txtNewsHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" MaxHeight="20" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="English Newspapers"/>
<HubSection Header="About"/>
</Hub>
While the preview in visual studio and blend is showing as :

windows phone 8 layout control

I have 2 image-buttons in my "xaml" page but i can see only one when i run app, here is my code.
<phone:PhoneApplicationPage
x:Class="tespih5.Bookshelf"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--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 Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="book shelf" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
Here is my grid that contains 2 buttons one button is "tespih" other is "cevsen".When i run the app i cant see "cevsen" image-button .
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button x:Name="tespih" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click_1" Margin="22,29,223,395" BorderThickness="0" Height="183" Width="211" >
<Image Source="\myimage.JPG" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Height="183" Width="211" />
</Button>
<TextBlock HorizontalAlignment="Left" Margin="253,39,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="185" Width="195">
<Run Text="tespih"/>
<LineBreak/>
<Run/>
<LineBreak/>
<Run Text="applikatsija za zikr kasnije namaz"/>
</TextBlock>
<Button x:Name="cevsen" HorizontalAlignment="Center" VerticalAlignment="Center" Click="cevsen_click" Margin="22,350,223,395" BorderThickness="0" Height="183" Width="211">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Source="/cevsen.jpg"/>
</Button>
<TextBlock HorizontalAlignment="Left" Margin="253,261,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="185" Width="195"></TextBlock>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
You should definitely consider using Grid.ColumnDefinitions and Grid.RowDefinitions.
Something like this could help. Add more columns and rows as needed. Notice, I added Grid.Row properties and removed the margin on both buttons.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="tespih" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click_1" BorderThickness="0" Height="183" Width="211" >
<Image Source="\myimage.JPG" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Height="183" Width="211" />
</Button>
<Button x:Name="cevsen" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Click="cevsen_click" BorderThickness="0" Height="183" Width="211">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Source="/cevsen.jpg"/>
</Button>
</Grid>