Kamis, 14 November 2013

Ceritaku Minggu ini Belajar Cara Membuat Xam Syntax


Selamat berjumpa kembali dalam pembelajaran applikasi windows phone.
pada kesempatan kali ini kita akan mempelajari tentang xaml syntax, kita beri nama project XamlSyntax apabila kita membuat sebuah aplikasi maka akan tampil secara default template-template. sebelum itu saya akan memperkenalkan di xaml designer yaitu zoom untuk memperbesar an memperkecil tampilan terus grid yaitu memudahkan kita menempatkan posisi tempat karena sudah terdapat garis-garis pembantu di dalam pengerjaan, selanjutnya ada penghilang grid dan hide annotations, kemudian ada horizontal untuk tampilan horizontal maupun vertical, selanjutnya ada menghilangkan tampilan bawahnya dan mengatur berapa persen tampilannya, kemudian ada yang namanya document outline untuk melihat struktur font dan terdapat application bar, title panel, content panel di dalam application bar belum terdapat apa-apa apabila tampilan masih default, di dalam title panel terdapat application title dan page title, content panel adalah sebuah properti name untuk document outline, selanjutnya apabila kita ingin seperti apa tampilannya itu tergantung nyamannya pengguna dalam tampilan. seperti yang diketahui saat kita mendrag sebuah element dari toolbox akan secara otomatis membuat tampilan dan kodenya langsung ada. xaml hampir sama dengan xml, html, maka dengan pasti ada tampilan pembuka dan penutup, apabila kita ingin menggunakan beberapa element kita bisa membuat dengan sederhana tanpa harus banyak koding karena setiap element pasti ada penutupnya pembuka : <Grid, penutup : </Grid>




 diatas adalah tampilan zoom dan show snap grid



ini adalah tampilan sebelum kita memilih/mengubah dari snap to gridlines



 ini adalah tampilan saat kita memilih tampilan grid




 ini tampilan untuk mereset pengaturan yang telah dipilih



 ini tampilan show annotations



diatas adalah tampilan collapse panel yaitu untuk menutup panel tersebut agar kita hanya bisa melihat satu element saja



ini untuk menampilkan window secara vertical



 ini untuk menampilkan window secara horizontal


ini adalah tampilan secara horizontal



  ini adalah tampilan secara vertical



ini adalah menu document outline



didalam menu document outline terdapat app bar, layout root, title panel, content panel


 disamping adalah tampilan menu dan koding dari title panel secara default



diatas adalah tampilan menu dan koding dari title panel secara default



diatas adalah tampilan menu dan koding dari content panel secara default


 ini adalah menu swap panel untuk menukar posisi dari pengkodingan ataupun design



selanjutnya ada nama class keturunan nama class mainpage yang akan merepresentasikan hal tersebut, apabila kita ubah maka koding tidak akan bekerja sesuai perintah yang diinginkan.

<phone:PhoneApplicationPage
    x:Class="AcceptingInput.MainPage"
    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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    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 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="Click Me" Height="72" HorizontalAlignment="Left" Margin="290,75,0,0" Name="ClickMeBT" VerticalAlignment="Top" Width="160" Click="ClickMeBT_Click" />
            <TextBlock Height="53" HorizontalAlignment="Left" Margin="12,75,0,0" Name="MyTextBlock" Text="" VerticalAlignment="Top" Width="259" FontSize="40" />
            <TextBox Height="75" HorizontalAlignment="Left" Margin="-3,6,0,0" Name="MyTextBox" Text="" VerticalAlignment="Top" Width="456" />
        </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>-->

</phone:PhoneApplicationPage>
 





pada tampilan tersebut maka akan muncul beberapa koding dengan persamaan tujuan atau perintah yang membedakannya adala panjang koding tersebut



using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace AcceptingInput
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void ClickMeBT_Click(object sender, RoutedEventArgs e)
        {
            //string newValue;
            //newValue = MyTextBox.Text;
            //MyTextBlock.Text = "You Typed :" + newValue;
            MyTextBlock.Text = "You Typed :" + MyTextBox.Text;
            //string newValue;
            //newValue = MyTextBox.Text;
            //MyTextBlock.Text = "You Typed :" + newValue;
            MyTextBlock.Text = "You Typed :" + MyTextBox.Text;

}
    }
}

                               

itulah hasil tentang xaml syntax jika anda peminat windows phone anda bisa mencoba membuat seperti apa yang ada di atas. sekian dan terimakasih lebih dan kurangnya mohon di maafkan kita bertemui lagi di lain waktu.

Tidak ada komentar:

Posting Komentar