XAML fixed banner on top of scrollable area - xaml

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>

Related

UWP ListView with no scrolling

For some reason, scrolling simply doesn't work on this ListView, and I really don't know why. The items display properly, just the list isn't scrollable. Using grids isn't viable (from what I know, anyway) since the items that are set to appear are pulled from a web source (don't know how many there will be, nor am I very willing to use hacky methods to get a scrollable list).
<Page
x:Class="Hello_World.News_Feed"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hello_World"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<ListView x:Name="NewsFeedList" x:FieldModifier="public"
Padding="15,15,15,15"
FontFamily="Segoe UI Variable Display"
SelectionMode="None"
VerticalAlignment="Top"
Margin="10,0,0,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0, 10, 0, 10"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Frame
BorderThickness="1"
Padding="10,10,10,10"
CornerRadius="5"
Height="Auto">
<Frame.BorderBrush>
<SolidColorBrush Color="Gray" Opacity="0.2" />
</Frame.BorderBrush>
<Frame.Background>
<SolidColorBrush Color="Gray" Opacity="0.05" />
</Frame.Background>
<Grid>
<Grid Padding="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="3,3,0,0" CornerRadius="100" Height="50" Width="50" VerticalAlignment="Top">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding AuthorPicture}"/>
</Border.Background>
</Border>
<TextBlock x:Name="Author" Margin="15,5,0,0" Height="Auto" Grid.Column="1" FontSize="17" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Author}" TextWrapping="WrapWholeWords">
<TextBlock.Foreground>
<SolidColorBrush>#353535</SolidColorBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="Time" Margin="15,28,0,0" Height="Auto" Grid.Column="1" FontSize="15" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Time}" TextWrapping="WrapWholeWords">
<TextBlock.Foreground>
<SolidColorBrush>#656565</SolidColorBrush>
</TextBlock.Foreground>
</TextBlock>
</Grid>
<Grid Padding="10,5,10,10">
<TextBlock x:Name="Heading" Margin="0,70,0,0" Height="Auto" Grid.Column="1" FontSize="18" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Title}" TextWrapping="WrapWholeWords"/>
<TextBlock x:Name="Body" Margin="0,100,0,0" Height="Auto" Grid.Column="1" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Body}" TextWrapping="WrapWholeWords"/>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Page>
Even after conducting some research online, I couldn't find a solution to this annoying issue. Any ideas?
After conducting more tests, I finally found that it was the automatic height of the frame which I call NavigateTo on which causes this issue. Manually setting the height fixes the problem, but the problem with is I want the size to be dynamic but also know when content stops fitting on the screen. What could I do about that?
Edit: Fixed this - realised the frame was under a StackPanel (forgot that they break auto height/width).

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>

Listiview Item not highlighting when hovering over - UWP (Windows 10)

I have a UserControl used as an item template in a ListView and when I hover a specific item it doesn't highlight it yet I have other ListViews in my project where the specific item is highlighted over.
I've removed the code from my UserControl and copy/pasted it directly in my DataTemplate to check if it was related to the fact that I was using a UserControl but no difference.
This ListView is contained in a SemanticZoom, so again I removed the SemanticZoom to check if the behaviour would change, but to no avail! Still doesn't get highlighted.
All my ListViews have their SelectionMode set to Single and I've got a style defined at the app level which is applied to all my ListViews
This is the code in my UserControl:
<UserControl
x:Class="MyApp.UserControls.ZoomedIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.UserControls"
xmlns:converters="using:MyApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="470">
<UserControl.Resources>
<converters:WrapOnConverter x:Key="WrapOnConverter"/>
</UserControl.Resources>
<Grid x:Name="Details"
Background="White"
Grid.Column="0"
Grid.Row="0"
Margin="12,5,12,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="Image"
Source="{Binding Image}"
Width="100"
Height="100"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image2"
Source="{Binding Image2}"
Width="30"
Height="30"
Margin="67,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image3"
Source="{Binding Image3}"
Width="30"
Height="30"
Margin="32,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<StackPanel Margin="5,0,5,0"
Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Top">
<TextBlock x:Name="Title"
Text="{Binding Title}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold"
VerticalAlignment="Top"
TextWrapping="{Binding
Converter={StaticResource WrapOnConverter}}" />
<TextBlock x:Name="Time"
Text="{Binding Time}"
Foreground="DarkCyan"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,5,0,5" />
<TextBlock x:Name="Description"
Text="{Binding Description}"
Foreground="Black"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxLines="2"/>
</StackPanel>
</Grid>
</UserControl>
And my ListView is defined as follows:
<ListView ItemsSource="{Binding Source={StaticResource cvsDetails}}"
SelectionMode="Single"
SelectedIndex="{Binding SelectedDetailIndex}"
SelectedItem="{Binding SelectedDetail, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<usercontrols:ZoomedIn DataContext="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="20"
Text="{Binding CategoryName}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction
Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedDetail}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
Does anyone have any ideas why one ListView would be behaving differently to the others?
Thanks.
The item is not highlighted because you have the Background="White" set, and this color will always be above the highlight color. The UserControl background needs to be set to Transparent.
To make it work the way you want, you need to change the ItemContainerStyle of your ListView. If you have different elements in your ListView you can use ItemContainerStyleSelector.
You can read more about ListViewItem here.
You need the change the Background property of list view items, for example:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>

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>

LongListSelector Turnstile effect isn't working

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>