Windows Phone Tutorial - Membuat Sliding Menu (3) - Membuat Menu Bergeser

Ketika kita sudah memiliki animasi slide in dan slide out (jika Anda belum tahu caranya bagaimana, lihat di sini). Nah sekarang kita akan membuat code-behind-nya. Silahkan masukkan kodingan ini di file .cs halaman aplikasi Windows Phone kalian.

public partial class MainPage : PhoneApplicationPage
    {

        bool isMenuIn = false;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            MenuIn.Completed += MenuIn_Completed;
            MenuOut.Completed += MenuOut_Completed;
        }

        void MenuOut_Completed(object sender, EventArgs e)
        {
            isMenuIn = false;
        }

        void MenuIn_Completed(object sender, EventArgs e)
        {
            isMenuIn = true;
        }

        private void Click_Menu(object sender, RoutedEventArgs e)
        {
            //Memastikan tidak menjalankan animasi 
            //ketika sudah ada animasi yang sedang berjalan
            if (isMenuIn)
            {
                isMenuIn = false;
                MenuOut.Begin();
            }
            else
            {
                isMenuIn = true;
                MenuIn.Begin();
            }
        }

    }

Jangan lupa untuk memasukkan property Click="Click_Menu" pada Button di tampilan utama kita. Kodingan XAML kalian nantinya akan menjadi seperti ini.

<Grid x:Name="LayoutRoot" Background="Transparent" ManipulationDelta="SlideMenu" ManipulationStarted="StartSlideMenu" ManipulationCompleted="SlideMenuComplete">
        <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_Menu"   /></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>
 

Oke, sudah jadi deh, silahkan cek Slide Menu yang sudah kalian buat :)
Next post...