Cerita Kuliah | Tanggal 08 – 11 – 2013

Diposting oleh Unknown Rabu, 13 November 2013

Cerita Kuliah | Tanggal 08 – 11 – 2013

 

pada perjumpaan 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 beberapa tentang xaml syntax, apabila tertarik untuk mempelajarinya maka cari saja media pembelajaran di beberapa web yang khusus mempelajarinya.

 

 

| edit post
0 komentar

Posting Komentar