Windows Phone Tutorial - Membuat Sliding Menu (1) - Layout Aplikasi

Oke, ini bagian pertama dari tutorial bagaimana cara membuat Sliding Menu di Windows Phone. Karena ini bagian pertama, jadi dimulai saja dengan yang gampang-gampang saja. Di sini kita akan membuat Layout Sliding Menu yang akan bekerja jika user memencet suatu tombol. Atau bisa juga dengan gesture swipe.

Nah, pertama-tama buka Visual Studio kalian dan buatlah suatu projek Windows Phone 8, terserah namanya apa.

Setelah itu, ketikkan kode xaml ini di MainPage.xaml

<!--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 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">
         <Button Content="Button" HorizontalAlignment="Left" Height="106" Margin="50,180,0,0" VerticalAlignment="Top" Width="396" Click="Click_MenuIn"/></Grid>
        <Grid x:Name="slideMenu" HorizontalAlignment="Left" Height="768" Margin="-362,0,0,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="369" Background="#FF830101" RenderTransformOrigin="0.5,0.5">
         <Grid.RenderTransform>
          <CompositeTransform/>
         </Grid.RenderTransform>
         <StackPanel HorizontalAlignment="Left" Height="748" Margin="10,10,0,0" VerticalAlignment="Top" Width="349">
          <TextBlock HorizontalAlignment="Left" Height="58" TextWrapping="Wrap" Text="Teks1 " VerticalAlignment="Top" Width="306"/>
          <TextBlock HorizontalAlignment="Left" Height="74" TextWrapping="Wrap" Text="Teks 2" Width="306"/>
          <Button Content="Button 1" HorizontalAlignment="Left" Height="96" Margin="10,0,0,0" Width="296"/>
         </StackPanel>
        </Grid>
    </Grid>
 

Nanti kalian hasilnya akan seperti ini.

Kemudian jika Anda memiliki Expression Blend 2012, langkah berikutnya adalah membuat animasi SlideIn dan SlideOut (terserah kalian namanya apa, kalau saya sih ini). Kalau tidak ada, tidak apa-apa juga, tapi masalahnya kalian harus menulis kodingan XAML untuk animasi tersebut secara manual. Ini akan saya bahas di postingan saya yang berikutnya ;)