Labels

RSS

Parsing XAML | 27 Desember


Oke selamat malam teman-teman, sekarang kita akan belajar cara memparasing XAML ya... cara ini digunakan supaya tampilan lebih menarik dan kita hanya membutuhkan beberapa Codingnya saja...
Oke seperti biasa kita membuat project yang baru... dengan cara sperti biasa ya...
lalu buat folder seperti biasa... namain dengan nama ItemViewModel dengan image
jika sudah baru kita buat class..

dan ketikan seperti dibawah ini
using System;
using System.Net;
using System.ComponentModel;
using System.Windows;
using System.Diagnostics;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ParsingXMLFinal.ViewModel
{
    public class member
    {
        public string name { get; set; }
        public string birth { get; set; }
        public string picture { get; set; }
        public string place { get; set; }
        public string height { get; set; }
        public string blood { get; set; }
        public string histories { get; set; }
        }
}

Jika sudah ketikan di mainpage.cs nya seperti ini

  private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            ObservableCollection<member> Items = new ObservableCollection<member>();
            XDocument XDoc = XDocument.Load("data.xml");
            foreach (var member in XDoc.Descendants("member"))
            {
                member item = new member();
                item.name = member.Element("name").Value;
                item.birth = member.Element("birth").Value;
                item.picture = member.Element("picture").Value;
                item.place = member.Element("place").Value;
                item.height = member.Element("height").Value;
                item.blood = member.Element("blood").Value;

                foreach (var historyItem in XDoc.Descendants("history"))
                {
                    item.histories += historyItem.Element("item").Value + ", ";
                }

                Items.Add(item);
            }
            MainListBox.ItemsSource = Items;
        }

        
        private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // if selected index is -1 (no selection) do nothing

            if (MainListBox.SelectedIndex == -1)
                return;

            PhoneApplicationService.Current.State["Item"] = MainListBox.SelectedItem;

            NavigationService.Navigate(new Uri("/DetailPage.xaml", UriKind.Relative));

            //Reset Selected index to -1 (no selection)
            MainListBox.SelectedIndex = -1;

        }

       
    }

lalu ketikan koding ini ke xamlnya...
<phone:PhoneApplicationPage 
    x:Class="ParsingXMLFinal.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">
            <ListBox x:Name="MainListBox" Margin=" 0,0,-12,0"
                     SelectionChanged="MainListBox_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                                    <Image Height="150" Width="150" Source="{Binding picture}"></Image>
                            <StackPanel Margin="0,0,0,17" Width="332" Height="78">
                                <TextBlock Text="{Binding name}"
                                           TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding birth}"
                                           TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                            
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            
            </ListBox>
        </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>


lalu copykan file xmlnya dengan dan imagenya ke aplikasi rootnya....... dan coba running... Makan akan running...




  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Blogger news

Popular Posts