SlideShare a Scribd company logo
1 of 27
Fundamental Training - 1
ME
Kevin R. Octavian
Mobile Developer
kevin.r.octavian@gmail.com
+62 857 2294 5257
kevin.r.octavian
@kevinroctavian
DAFTAR ISI
Windows 8 Controls (Action Controls & Layout Controls)
Data Binding
AppBars and Navigation
View
SQLite
Windows 8 Controls (Action Controls & Layout
Controls)
Action Controls
http://msdn.microsoft.com/library/windows/apps/hh465351.aspx
<TextBlock Foreground="White" Text="Ini TextBlock" FontFamily="Segoe
UI" FontSize="48" />
<TextBox Text="The quick brown fox..." Width="500"
FontFamily="Segoe UI" FontSize="30" />
<Button Content="Save" FontFamily="Segoe UI" FontSize="48" />
<RadioButton Content="Breakfast" GroupName="MealSelection"
FontFamily="Segoe UI" FontSize="48" />
<RadioButton Content="Lunch" GroupName="MealSelection"
FontFamily="Segoe UI" FontSize="48" />
<RadioButton Content="Dinner" GroupName="MealSelection"
FontFamily="Segoe UI" FontSize="48" />
<CheckBox Content="I agree to the terms I didn't read"
FontFamily="Segoe UI" FontSize="15" />
<ComboBox>
<ComboBoxItem Content="Breakfast" />
<ComboBoxItem Content="Second Breakfast" />
<ComboBoxItem Content="Elevenses" />
<ComboBoxItem Content="Luncheon" />
<ComboBoxItem Content="Afternoon Tea" />
<ComboBoxItem Content="Dinner" />
<ComboBoxItem Content="Supper" />
</ComboBox>
<Image Source="Assets/Logo.png" Width="200" Height="200" />
Layout Controls
http://msdn.microsoft.com/library/windows/apps/hh465351.aspx
<Canvas Width="120" Height="120"> <Rectangle
Fill="Red"/>
<Rectangle Fill="Blue" Canvas.Left="20"
Canvas.Top="20"/>
<Rectangle Fill="Green"
Canvas.Left="40" Canvas.Top="40"/>
<Rectangle Fill="Yellow"
Canvas.Left="60" Canvas.Top="60"/>
</Canvas>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Yellow" Grid.Row="1"
Grid.Column="1"/>
</Grid>
<StackPanel>
<Rectangle Fill="Red"/> <Rectangle
Fill="Blue"/>
<Rectangle Fill="Green"/> <Rectangle
Fill="Yellow"/>
</StackPanel>
Layout Controls
http://msdn.microsoft.com/library/windows/apps/hh465351.aspx
<FlipView x:Name="flipView1"
SelectionChanged="FlipView_SelectionCha
nged">
<Image Source="Assets/Logo.png"
/>
<Image
Source="Assets/SplashScreen.png"
/>
<Image
Source="Assets/SmallLogo.png" />
</FlipView>
<GridView x:Name="gridView1"
SelectionChanged="GridView_SelectionChanged
">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</GridView>
<ListView x:Name="listView1"
SelectionChanged="ListView_SelectionChan
ged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</ListView>
Demo
Windows 8 Controls (Action Controls & Layout
Controls)
Data Binding
public class Person : INotifyPropertyChanged
{
private string name;
private string phone;
private string photo;
public string Name {
get { return this.name; }
set { this.name = value; NotifyPropertyChanged("Name"); }
}
public string Photo
{
get { return this.photo; }
set { this.photo = value; NotifyPropertyChanged("Photo"); }
}
public string Phone
{
get { return this.phone; }
set { this.phone = value; NotifyPropertyChanged("Phone"); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propName) {
if (PropertyChanged != null) {
PropertyChanged(this, new
PropertyChangedEventArgs(propName));
}
}
}
Data Binding
public class Persons : INotifyPropertyChanged
{
private ObservableCollection<Person> personList;
private string groupName;
public Persons() {
this.personList = new ObservableCollection<Person>();
}
public ObservableCollection<Person> PersonList {
get {
return this.personList;
}
}
public string GroupName {
get { return this.groupName; }
set { this.groupName = value; NotifyPropertyChanged("GroupName");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new
PropertyChangedEventArgs(propName));
}
}
}
Data Binding
Persons persons = new Persons();
Person p = new Person();
p.Name = "Kevin R. Octavian";
p.Phone = "085722945257";
p.Photo = "";
Person p2 = new Person();
p2.Name = "Dadang";
p2.Phone = "085722945257";
p2.Photo = "";
persons.GroupName = "Kevin Lovers";
persons.PersonList.Add(p);
persons.PersonList.Add(p2);
this.DataContext = persons;
<ListView ItemsSource = "{Binding PersonList}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal">
<TextBlock Text = "{Binding Name}" Width = "100"/>
<TextBlock Text = "{Binding Phone}" Width = "200"/>
<TextBlock Text = "{Binding Photo}" Width = "300"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Data Binding
Demo
AppBars and Navigation
AppBars
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}"
Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}"
Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}"
Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}"
Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}"
Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
this.BottomAppBar.IsOpen = true;
Navigation
http://msdn.microsoft.com/library/windows/apps/hh771188.aspx
public BasicPage1() {
this.InitializeComponent();
this.NavigationCacheMode =
Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}
this.Frame.Navigate(typeof(BasicPage2), tb1.Text);
this.Frame.Navigate(typeof(BasicPage2));
Demo
AppBars and Navigation
View
View
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.ViewManagement;
namespace ViewsTile
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SizeChanged += DetailPage_SizeChanged;
}
void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) {
if (ApplicationView.Value == ApplicationViewState.Snapped) {
GridLayout.ColumnDefinitions[0].Width = new GridLength(0);
} else {
GridLayout.ColumnDefinitions[0].Width = new GridLength(1,
GridUnitType.Star);
}
}
}
}
View
<TextBlock x:Name="textSnap" Text="Kevin R. Octavian snap" Visibility="Collapsed" />
<TextBlock x:Name="textOthers" Text="Kevin R. Octavian others" />
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="Others">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textSnap" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textOthers" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textSnap" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textOthers" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
string stateName = ApplicationView.Value == ApplicationViewState.Snapped ?
"Snapped" : "Others"; VisualStateManager.GoToState(this, stateName, false);
}
View
Demo
View
SQLite
http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882
Create Table
try
{
var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3");
using (var db = new SQLite.SQLiteConnection(dbpath))
{
// Create the tables if they don't exist
db.CreateTable<person>();
db.Commit();
db.Dispose();
db.Close();
}
var line = new MessageDialog("Table Created");
await line.ShowAsync();
}
catch
{
}
public class person
{
[MaxLength(5), PrimaryKey]
public String name { get; set; }
[MaxLength(255)]
public String address { get; set; }
[MaxLength(11)]
public Double phone { get; set; }
}
http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882
Insert Data
var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3");
using (var db = new SQLite.SQLiteConnection(dbpath))
{
// Create the tables if they don't exist
db.Insert(new person()
{
name = txt1.Text.ToString(),
address = txt2.Text.ToString(),
phone = Convert.ToDouble(txt3.Text.ToString()),
}
);
db.Commit();
db.Dispose();
db.Close();
var line = new MessageDialog("Records Inserted");
await line.ShowAsync();
}
http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882
Select Data
var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3");
using (var db = new SQLite.SQLiteConnection(dbpath))
{
var d = from x in db.Table<person>() select x;
list1.Items.Clear();
foreach (var sd in d)
{
list1.Items.Add(sd.name.ToString());
//list1.Items.Add(sd.address.ToString());
//list1.Items.Add(sd.phone.ToString());
}
db.Dispose();
db.Close();
}
var line = new MessageDialog("All Records Listed");
await line.ShowAsync();
http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882
Delete Data
var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3");
using (var db = new SQLite.SQLiteConnection(dbpath))
{
db.Delete<person>(list1.SelectedItem.ToString());
var d = from x in db.Table<person>() select x;
list1.Items.Clear();
foreach (var sd in d)
{
list1.Items.Add(sd.name.ToString());
//list1.Items.Add(sd.address.ToString());
//list1.Items.Add(sd.phone.ToString());
}
db.Dispose();
db.Close();
}
var line = new MessageDialog("Selected Item Deleted");
await line.ShowAsync();
Demo
SQLite

More Related Content

What's hot

Testdrevet javautvikling på objektorienterte skinner
Testdrevet javautvikling på objektorienterte skinnerTestdrevet javautvikling på objektorienterte skinner
Testdrevet javautvikling på objektorienterte skinner
Truls Jørgensen
 
Hitchhiker's guide to the win8
Hitchhiker's guide to the win8Hitchhiker's guide to the win8
Hitchhiker's guide to the win8
Jua Alice Kim
 

What's hot (20)

Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web development
 
Test and profile your Windows Phone 8 App
Test and profile your Windows Phone 8 AppTest and profile your Windows Phone 8 App
Test and profile your Windows Phone 8 App
 
The Ring programming language version 1.5.1 book - Part 27 of 180
The Ring programming language version 1.5.1 book - Part 27 of 180The Ring programming language version 1.5.1 book - Part 27 of 180
The Ring programming language version 1.5.1 book - Part 27 of 180
 
Testdrevet javautvikling på objektorienterte skinner
Testdrevet javautvikling på objektorienterte skinnerTestdrevet javautvikling på objektorienterte skinner
Testdrevet javautvikling på objektorienterte skinner
 
The Ring programming language version 1.10 book - Part 37 of 212
The Ring programming language version 1.10 book - Part 37 of 212The Ring programming language version 1.10 book - Part 37 of 212
The Ring programming language version 1.10 book - Part 37 of 212
 
Rapid development tools for java ee 8 and micro profile [GIDS]
Rapid development tools for java ee 8 and micro profile [GIDS] Rapid development tools for java ee 8 and micro profile [GIDS]
Rapid development tools for java ee 8 and micro profile [GIDS]
 
The Ring programming language version 1.6 book - Part 31 of 189
The Ring programming language version 1.6 book - Part 31 of 189The Ring programming language version 1.6 book - Part 31 of 189
The Ring programming language version 1.6 book - Part 31 of 189
 
Metaworks3
Metaworks3Metaworks3
Metaworks3
 
Hitchhiker's guide to the win8
Hitchhiker's guide to the win8Hitchhiker's guide to the win8
Hitchhiker's guide to the win8
 
Matreshka.js
Matreshka.jsMatreshka.js
Matreshka.js
 
Matreshka.js
Matreshka.jsMatreshka.js
Matreshka.js
 
The Ring programming language version 1.5.4 book - Part 29 of 185
The Ring programming language version 1.5.4 book - Part 29 of 185The Ring programming language version 1.5.4 book - Part 29 of 185
The Ring programming language version 1.5.4 book - Part 29 of 185
 
Stay with React.js in 2020
Stay with React.js in 2020Stay with React.js in 2020
Stay with React.js in 2020
 
The Principle of Hybrid App.
The Principle of Hybrid App.The Principle of Hybrid App.
The Principle of Hybrid App.
 
Android Testing
Android TestingAndroid Testing
Android Testing
 
Architecture Components
Architecture Components Architecture Components
Architecture Components
 
The Ring programming language version 1.9 book - Part 36 of 210
The Ring programming language version 1.9 book - Part 36 of 210The Ring programming language version 1.9 book - Part 36 of 210
The Ring programming language version 1.9 book - Part 36 of 210
 
The Ring programming language version 1.5.2 book - Part 28 of 181
The Ring programming language version 1.5.2 book - Part 28 of 181The Ring programming language version 1.5.2 book - Part 28 of 181
The Ring programming language version 1.5.2 book - Part 28 of 181
 
Clustering your Application with Hazelcast
Clustering your Application with HazelcastClustering your Application with Hazelcast
Clustering your Application with Hazelcast
 
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
 

Similar to Windows 8 Training Fundamental - 1

EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
Heiko Behrens
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahoda
Droidcon Berlin
 

Similar to Windows 8 Training Fundamental - 1 (20)

EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
 
How te bring common UI patterns to ADF
How te bring common UI patterns to ADFHow te bring common UI patterns to ADF
How te bring common UI patterns to ADF
 
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Getting started with Elasticsearch and .NET
Getting started with Elasticsearch and .NETGetting started with Elasticsearch and .NET
Getting started with Elasticsearch and .NET
 
比XML更好用的Java Annotation
比XML更好用的Java Annotation比XML更好用的Java Annotation
比XML更好用的Java Annotation
 
Improving android experience for both users and developers
Improving android experience for both users and developersImproving android experience for both users and developers
Improving android experience for both users and developers
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahoda
 
Dropwizard
DropwizardDropwizard
Dropwizard
 
SQLite with UWP
SQLite with UWPSQLite with UWP
SQLite with UWP
 
Android crashcourse
Android crashcourseAndroid crashcourse
Android crashcourse
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Architecture components - IT Talk
Architecture components - IT TalkArchitecture components - IT Talk
Architecture components - IT Talk
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
Teste de Integração com DbUnit e jIntegrity
Teste de Integração com DbUnit e jIntegrityTeste de Integração com DbUnit e jIntegrity
Teste de Integração com DbUnit e jIntegrity
 
Struts database access
Struts database accessStruts database access
Struts database access
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data Binding
 
Vertx - Reactive & Distributed
Vertx - Reactive & DistributedVertx - Reactive & Distributed
Vertx - Reactive & Distributed
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин
 

Recently uploaded

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Recently uploaded (20)

Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 

Windows 8 Training Fundamental - 1

  • 2. ME Kevin R. Octavian Mobile Developer kevin.r.octavian@gmail.com +62 857 2294 5257 kevin.r.octavian @kevinroctavian
  • 3. DAFTAR ISI Windows 8 Controls (Action Controls & Layout Controls) Data Binding AppBars and Navigation View SQLite
  • 4. Windows 8 Controls (Action Controls & Layout Controls)
  • 5. Action Controls http://msdn.microsoft.com/library/windows/apps/hh465351.aspx <TextBlock Foreground="White" Text="Ini TextBlock" FontFamily="Segoe UI" FontSize="48" /> <TextBox Text="The quick brown fox..." Width="500" FontFamily="Segoe UI" FontSize="30" /> <Button Content="Save" FontFamily="Segoe UI" FontSize="48" /> <RadioButton Content="Breakfast" GroupName="MealSelection" FontFamily="Segoe UI" FontSize="48" /> <RadioButton Content="Lunch" GroupName="MealSelection" FontFamily="Segoe UI" FontSize="48" /> <RadioButton Content="Dinner" GroupName="MealSelection" FontFamily="Segoe UI" FontSize="48" /> <CheckBox Content="I agree to the terms I didn't read" FontFamily="Segoe UI" FontSize="15" /> <ComboBox> <ComboBoxItem Content="Breakfast" /> <ComboBoxItem Content="Second Breakfast" /> <ComboBoxItem Content="Elevenses" /> <ComboBoxItem Content="Luncheon" /> <ComboBoxItem Content="Afternoon Tea" /> <ComboBoxItem Content="Dinner" /> <ComboBoxItem Content="Supper" /> </ComboBox> <Image Source="Assets/Logo.png" Width="200" Height="200" />
  • 6. Layout Controls http://msdn.microsoft.com/library/windows/apps/hh465351.aspx <Canvas Width="120" Height="120"> <Rectangle Fill="Red"/> <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/> <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/> <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/> </Canvas> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="50"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> </Grid.ColumnDefinitions> <Rectangle Fill="Red"/> <Rectangle Fill="Blue" Grid.Row="1"/> <Rectangle Fill="Green" Grid.Column="1"/> <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/> </Grid> <StackPanel> <Rectangle Fill="Red"/> <Rectangle Fill="Blue"/> <Rectangle Fill="Green"/> <Rectangle Fill="Yellow"/> </StackPanel>
  • 7. Layout Controls http://msdn.microsoft.com/library/windows/apps/hh465351.aspx <FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionCha nged"> <Image Source="Assets/Logo.png" /> <Image Source="Assets/SplashScreen.png" /> <Image Source="Assets/SmallLogo.png" /> </FlipView> <GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged "> <x:String>Item 1</x:String> <x:String>Item 2</x:String> </GridView> <ListView x:Name="listView1" SelectionChanged="ListView_SelectionChan ged"> <x:String>Item 1</x:String> <x:String>Item 2</x:String> </ListView>
  • 8. Demo Windows 8 Controls (Action Controls & Layout Controls)
  • 10. public class Person : INotifyPropertyChanged { private string name; private string phone; private string photo; public string Name { get { return this.name; } set { this.name = value; NotifyPropertyChanged("Name"); } } public string Photo { get { return this.photo; } set { this.photo = value; NotifyPropertyChanged("Photo"); } } public string Phone { get { return this.phone; } set { this.phone = value; NotifyPropertyChanged("Phone"); } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(string propName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propName)); } } } Data Binding public class Persons : INotifyPropertyChanged { private ObservableCollection<Person> personList; private string groupName; public Persons() { this.personList = new ObservableCollection<Person>(); } public ObservableCollection<Person> PersonList { get { return this.personList; } } public string GroupName { get { return this.groupName; } set { this.groupName = value; NotifyPropertyChanged("GroupName"); } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(string propName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propName)); } } }
  • 11. Data Binding Persons persons = new Persons(); Person p = new Person(); p.Name = "Kevin R. Octavian"; p.Phone = "085722945257"; p.Photo = ""; Person p2 = new Person(); p2.Name = "Dadang"; p2.Phone = "085722945257"; p2.Photo = ""; persons.GroupName = "Kevin Lovers"; persons.PersonList.Add(p); persons.PersonList.Add(p2); this.DataContext = persons; <ListView ItemsSource = "{Binding PersonList}"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "{Binding Name}" Width = "100"/> <TextBlock Text = "{Binding Phone}" Width = "200"/> <TextBlock Text = "{Binding Photo}" Width = "300"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView>
  • 14. AppBars <Page.BottomAppBar> <AppBar x:Name="bottomAppBar" Padding="10,0,10,0"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> this.BottomAppBar.IsOpen = true;
  • 15. Navigation http://msdn.microsoft.com/library/windows/apps/hh771188.aspx public BasicPage1() { this.InitializeComponent(); this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled; } this.Frame.Navigate(typeof(BasicPage2), tb1.Text); this.Frame.Navigate(typeof(BasicPage2));
  • 17. View
  • 18. View
  • 19. using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; using Windows.UI.ViewManagement; namespace ViewsTile { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); SizeChanged += DetailPage_SizeChanged; } void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) { if (ApplicationView.Value == ApplicationViewState.Snapped) { GridLayout.ColumnDefinitions[0].Width = new GridLength(0); } else { GridLayout.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star); } } } } View
  • 20. <TextBlock x:Name="textSnap" Text="Kevin R. Octavian snap" Visibility="Collapsed" /> <TextBlock x:Name="textOthers" Text="Kevin R. Octavian others" /> <VisualStateManager.VisualStateGroups> <!-- Visual states reflect the application's view state --> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <VisualState x:Name="Others"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textSnap" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textOthers" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- The back button and title have different styles when snapped --> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textSnap" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textOthers" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) { string stateName = ApplicationView.Value == ApplicationViewState.Snapped ? "Snapped" : "Others"; VisualStateManager.GoToState(this, stateName, false); } View
  • 23. http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882 Create Table try { var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3"); using (var db = new SQLite.SQLiteConnection(dbpath)) { // Create the tables if they don't exist db.CreateTable<person>(); db.Commit(); db.Dispose(); db.Close(); } var line = new MessageDialog("Table Created"); await line.ShowAsync(); } catch { } public class person { [MaxLength(5), PrimaryKey] public String name { get; set; } [MaxLength(255)] public String address { get; set; } [MaxLength(11)] public Double phone { get; set; } }
  • 24. http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882 Insert Data var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3"); using (var db = new SQLite.SQLiteConnection(dbpath)) { // Create the tables if they don't exist db.Insert(new person() { name = txt1.Text.ToString(), address = txt2.Text.ToString(), phone = Convert.ToDouble(txt3.Text.ToString()), } ); db.Commit(); db.Dispose(); db.Close(); var line = new MessageDialog("Records Inserted"); await line.ShowAsync(); }
  • 25. http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882 Select Data var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3"); using (var db = new SQLite.SQLiteConnection(dbpath)) { var d = from x in db.Table<person>() select x; list1.Items.Clear(); foreach (var sd in d) { list1.Items.Add(sd.name.ToString()); //list1.Items.Add(sd.address.ToString()); //list1.Items.Add(sd.phone.ToString()); } db.Dispose(); db.Close(); } var line = new MessageDialog("All Records Listed"); await line.ShowAsync();
  • 26. http://code.msdn.microsoft.com/windowsapps/Sqlite-For-Windows-8-Metro-2ec7a882 Delete Data var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "data.db3"); using (var db = new SQLite.SQLiteConnection(dbpath)) { db.Delete<person>(list1.SelectedItem.ToString()); var d = from x in db.Table<person>() select x; list1.Items.Clear(); foreach (var sd in d) { list1.Items.Add(sd.name.ToString()); //list1.Items.Add(sd.address.ToString()); //list1.Items.Add(sd.phone.ToString()); } db.Dispose(); db.Close(); } var line = new MessageDialog("Selected Item Deleted"); await line.ShowAsync();