I have a carousel from microsoft.toolkit
XAML:
<controls:Carousel
x:Name="k2006Carousel"
VerticalAlignment="Center"
ItemDepth="300"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="-40"
ItemRotationZ="0"
Orientation="Horizontal"
SelectionChanged="bukuCarousel_SelectionChanged">
<controls:Carousel.EasingFunction>
<CubicEase EasingMode="EaseInOut" />
</controls:Carousel.EasingFunction>
<controls:Carousel.ItemTemplate>
<DataTemplate>
-->
<!-- Carousel content -->
<!--
<Grid x:Name="k2006CarouselGrid" Background="{x:Null}">
<Grid PointerPressed="BukuUIElement_OnPointerPressed">
<Image
x:Name="cover"
Width="280"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Source="{Binding Image}"
Stretch="Uniform" />
</Grid>
<Rectangle
Grid.Row="1"
Height="140"
Margin="0,0,0,-130"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#801B1B1B" />
<GradientStop Offset="0.259" Color="#661B1B1B" />
<GradientStop Offset="0.681" Color="Transparent" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
From the xaml above, the output is like the image below:
I want the margin between items to be 0 (no margin), like the image below:
How to apply it?
For your requirement, you could set suitable negative value for ItemMargin.
ItemMargin="-150"
Related
I am trying to build a 4 column list view to display some data in the Windows Universal App. I have the following Listview but the list view is not scrolling vertically in spite of data being there for scroll. I am not sure what I am doing wrong. Any pointers or help is appreciated..
XAML Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChennaiTrains"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ChennaiTrains.ViewModel"
xmlns:Model="using:ChennaiTrains.Model"
x:Class="ChennaiTrains.MainPage"
xmlns:c="using:ChennaiTrains.Controls"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Find" Click="AppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Page.Background>
<ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
</Page.Background>
<Grid>
<Grid x:Name="body">
<StackPanel>
<Grid x:Name="titlebar">
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="menu"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
FontSize="30"
FontFamily="Segoe MDL2 Assets"
Content="" Click="HamburgerButton_Click"
Background="Transparent" Height="42" Visibility="Visible"/>
<TextBlock x:Name="content"
FontSize="25"
Text="Chennai Compass" Height="42" Visibility="Visible"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
</StackPanel>
</Grid>
<SplitView x:Name="MySplitView"
DisplayMode="Inline"
OpenPaneLength="150"
CompactPaneLength="50"
IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
<SplitView.Pane>
<StackPanel Background="Transparent">
<!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Grid>
<AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
PlaceholderText="Enter the starting point"
QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextMemberPath="StationName"
>
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<AutoSuggestBox x:Name="DestinationBox"
QueryIcon="Find"
DisplayMemberPath="{Binding StationList.StationName}"
TextMemberPath="StationName"
TextChanged="DestinationBox_TextChanged"
SuggestionChosen="DestinationBox_SuggestionChosen"
PlaceholderText="Enter the destination" Margin="0,60,0,0">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<Grid x:Name="resultGrid" Margin="0,140,2,0">
<ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="15"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="TimeTemplate">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
<TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
<TextBlock x:Name="startAt" Text="{Binding Time}" />
<TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="">
</TextBlock>
<TextBlock x:Name="duration" Text="{Binding Duration}"/>
<TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
<TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Margin="-75,35,0,0"></TextBlock>
<TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="headerText" Text="Next available Trains"/>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<StaticResource ResourceKey="TimeTemplate"/>
</ListView.ItemTemplate>
<ListView.DataContext>
<Model:ResultListModel/>
</ListView.DataContext>
</ListView>
</Grid>
</Grid>
</SplitView>
</StackPanel>
</Grid>
</Grid>
</Page>
Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.
The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this
<Grid x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0">
</Grid>
<SplitView x:Name="MySplitView" Grid.Row="1">
</SplitView>
</Grid>
I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
I have created a page where there's alot of input from the user. So the User should be able to scroll down to be able to press a Upload button. To scroll down on the page I have used a ScrollViewer outside a grid. I am able to scroll but the page keeps scrolling back after scrolling down.
Here is my code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer >
<Grid x:Name="ContentPanel" Background="black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154" />
<ColumnDefinition Width="326" />
</Grid.ColumnDefinitions>
<Image Height="109" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="167" Margin="23,19,0,0" Source="{Binding Path=ImageSoruce, Mode=TwoWay}" Grid.ColumnSpan="2" />
<TextBox Height="71" HorizontalAlignment="Left" Margin="12,161,0,0" Name="nameInput" Text="{Binding Path=Name, Mode=TwoWay}" VerticalAlignment="Top" Width="430" Grid.ColumnSpan="2" />
<TextBlock Height="56" HorizontalAlignment="Left" Margin="23,134,0,0" Name="nameLabel" Text="Name" VerticalAlignment="Top" Width="130" FontSize="25" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,238,0,0" Name="descriptionLabel" Text="Description" VerticalAlignment="Top" Width="130" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,265,0,0" Name="descriptionInput" Text="{Binding Path=Description, Mode=TwoWay}" VerticalAlignment="Top" Width="430" IsEnabled="True" Grid.ColumnSpan="2" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,343,0,0" Name="locationLabel" Text="Location" VerticalAlignment="Top" Width="130" />
<TextBlock Height="46" HorizontalAlignment="Left" Margin="24,384,0,0" Name="locationInput" Text="{Binding Path=Location, Mode=TwoWay}" VerticalAlignment="Top" Width="401" Loaded="locationInput_Loaded" Grid.ColumnSpan="2" />
<toolkit:ListPicker SelectionMode="Multiple" FullModeHeader="CATEFORIES" x:Name="ListPickerCategories" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="25,492,0,0" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" ItemsSource="{Binding Categories}" Height="78"></toolkit:ListPicker>
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="24,436,0,0" Name="textBlock1" Text="Categories" VerticalAlignment="Top" Width="130" />
<Button Content="Upload" Height="86" HorizontalAlignment="Left" Margin="26,604,0,0" Name="UploadButton" VerticalAlignment="Top" Width="411" Click="UploadButton_Click" Grid.ColumnSpan="2" />
</Grid>
</ScrollViewer>
</Grid>
What can be the cause of this problem and how do I solve it?
Use StackPanels to put elements one below the other. Remove all your margins, height, width and other absolute positioning stuff
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer>
<StackPanel>
<!-- elements here -->
</StackPanel>
</ScrollViewer>
</Grid>
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.
I am trying to create listbox with images wrapped in a wrappanel. I want to show the items fit to screen. like if the items width is less than the available screen width then the items should be stretched and if the items width is greater than the available screen width then the items should jump to next row and empty space should be filled.
Code:
<ListBox x:Name="lst" Grid.Row="3" HorizontalAlignment="Left">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</ListBox>
Try adding the following container style to your ListBox:
<UserControl x:Class="MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Style x:Key="myContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
<ListBox ItemContainerStyle="{StaticResource myContainerStyle}">
</ListBox>
</UserControl>
(Eventually you have to use PhoneApplicationPage instead of UserControl)
UPDATE: Removed HorizontalAlignment as proposed by Jared Bienz
like in title:)
I wrote from tutorial: http://msdn.microsoft.com/en-us/wp7trainingcourse_yourfirstwp7applab_topic3
does everything like there.
my code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="120"/> <!-- Problem resolved -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- this i can not see any ideas what is wrong? -->
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Button x:Name = "SolveButton" Content="Solve" Margin="10"
HorizontalAlignment="Center" Click="SolveButton_Click" />
<StackPanel x:Name="StatusPanel" Orientation="Horizontal"
HorizontalAlignment="Center" Visibility="Collapsed">
<TextBlock HorizontalAlignment="Center" Text="Your Moves: " TextWrapping="Wrap"
Foreground="#FFD0D0D0" FontSize="17.333"/>
<TextBlock x:Name="TotalMovesTextBlock" HorizontalAlignment="Center" Text="N"
TextWrapping="Wrap" Foreground="#FFFFB000" FontSize="17.333"/>
</StackPanel>
</StackPanel>
<!-- Here i can see anything under this comment -->
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
<Border x:Name="CongratsBorder" Height="30" Background="#FFF10DA2"
HorizontalAlignment="Center"
Width="443" RenderTransformOrigin="0.5,0.5"
UseLayoutRounding="False" Opacity="0">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<TextBlock HorizontalAlignment="Center" Text="CONGRATULATIONS!" TextWrapping="Wrap"
Foreground="White" FontSize="17.333" VerticalAlignment="Center"
FontWeight="Bold"/>
</Border>
<Border x:Name="border" BorderThickness="3" Background="#FF262626"
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="1"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="#FFF10DA2" Offset="0" />
<GradientStop Color="#FFEE7923" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Canvas Height="435" Width="435">
<Image x:Name="PreviewImage" Height="435" Width="435" Opacity="0.2" />
<Canvas x:Name="GameContainer" Height="435" Width="435" />
</Canvas>
</Border>
<TextBlock x:Name="TapToContinueTextBlock" HorizontalAlignment="Center"
Text="Tap the picture to start the puzzle"
TextWrapping="Wrap" Foreground="#FFD0D0D0" FontSize="17.333" />
</StackPanel>
<!--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="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" 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>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
You've got a Grid
And you've got multiple things in the first row of that Grid - so they are being drawn on top of each other.
Try putting things into different Grid Rows
Or Try replacing your outermost Grid by a StackPanel instead?
Also <RowDefinition Height="0.2"/> seems quite small for a height - try using Height="Auto"
Your first stackpanel doesn't have a Grid.Row setting. It's probably behind the TitlePanel in Row 0.