windows phone 8 layout control

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>