windows phone 8 layout control - xaml

Question

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>

Answer 1

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>