port android to windows app
DESCRIPTION
Cross Platform Development with Xamarin Port Android to Windows Phone and Windows Store AppTRANSCRIPT
Cross Platform Development with xamarin(ANDROID, WINDOWS PHONE , WINDOWS STORE APP)
Prepared by
CHEAH ENG SOON
DEVELOPER
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Agenda• Register and Setup Xamarin
• Setup Android Library
• Setup Android Emulator
• Port Android to Windows Phone App
• Port Android to Windows Store App
• References
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
REGISTER & SETUP XAMARIN
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Register and SETUP XAmarin1. Register Xamarin Account
https://store.xamarin.com/account/register
2. Download and Setup Xamarin
http://xamarin.com/download
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
ReGISTER AND SETUP XAMARIN3. Login With Xamarin Account
TOOLS > Xamarin Account
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
SETUP ANDROID LIBRARY
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
SETUP Android Library1. Click “Start Android SDK Manager”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
2. Install All The Library
[ / ] Select all library and install
• Keep Calm and Wait the library install complete.
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
KEEP CALM & WAIT INSTALL
COMPLETELY
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
SETUP ANDROID EMULATOR
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
SETUP ANDROID EMULATORClick “Open Android Emulator Manager” > “Create…”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Setup the Android Emulator as Below 17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Port Android to Windows Phone
1. Create NEW PROJECT > Select “Windows Desktop” > Select “Class Library” > Name “Youtube” 1
7/9
/20
14
CH
EA
H E
NG
SO
ON
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
DOWNLOADXamarin Workshop Demo
http://1drv.ms/1qVsGar
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
IMPORT ANDROID PROJECT
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
IMPORT ANDROID PROJECT2. Delete the “Class1.cs” and create the “YoutubeSearcher.cs” or Import the file “YoutubeSearcher.cs”
Right click “Youtube (Portable)” > Add > Existing Items
3. Import the “YouTube.Android” Project
Right click “Solution ‘Youtube’ “ > “Add Existing Project”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
4. Right click “YouTube.Android” >Add > Existing Item > Select “ YouTubeSearcher.cs” in “Youtube(Portable)” > Add As Link
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
• You will seen a “YouTubeSearch.cs” .
It means share the class
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PORT ANDROID TO WINDOWS PHONE
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Port AnDroid To Windows Phone App
1. Right Click “Solution ‘YouTube’” > Add > New Project
2. Select “Windows Phone Apps” >
Select “Blank App (Windows Phone Silverlight”
> Name “YouTube.WP8”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
3. Select “Windows Phone 8.1”
4. Right Click “YouTube.WP8” > Add >
“Existing Item”
5. Select “ YouTubeSearcher.cs” in “Youtube(Portable)”
> Add As Link
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
6. Select “YouTube.WP8” > Right Click “Add” > Select “New Item” > Select “ Windows Phone Portrait Page” > Name “PlayVideo.xaml”
7. Go “MainPage.xaml” & “PlayVideo.xaml”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
MainPage.xaml
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="YouTube:" VerticalAlignment="Center" FontSize="20" Margin="10,20,0,10"></TextBlock>
<TextBox TextWrapping="Wrap" x:Name="txtKeyword" Text="" VerticalAlignment="Center" FontSize="20" Width="240" Margin="0,10,0,0"/>
<Button Content="Search" VerticalAlignment="Center" x:Name="btnSearch" HorizontalAlignment="Stretch" FontSize="20" Margin="0,20,0,10" Height="72" Width="134" Click="btnSearch_Click"/>
</StackPanel>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
<phone:LongListSelector
x:Name="VideoList" Grid.Row="1" Height="640"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionChanged="VideoList_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="100" Height="100" Source="{Binding Thumbnail}" />
<StackPanel Orientation="Vertical" Margin="5,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" />
<TextBlock Text="{Binding PubDate}" Foreground="Gray"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
MainPage.CSprivate void btnSearch_Click(object sender, RoutedEventArgs e)
{
var searcher = new YouTubeSearcher();
searcher.list = this.VideoList;
searcher.SearchForWP8(this.txtKeyword.Text);
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
private void VideoList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (VideoList.SelectedItem != null)
{
var title = (VideoList.SelectedItem as Entry).Title;
var link = (VideoList.SelectedItem as Entry).Link;
NavigationService.Navigate(new Uri(string.Format("/PlayVideo.xaml?Title={0}&Link={1}", title, link), UriKind.Relative));
}
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PlayVideo.xaml<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtTitle" FontSize="20" HorizontalAlignment="Center" Margin="20,40,0,20"></TextBlock>
</StackPanel>
<phone:WebBrowser x:Name="webview" Grid.Row="1" Width="480" Height="320" Margin="0,0,0,0" HorizontalAlignment="Center"></phone:WebBrowser>
</StackPanel>
</Grid>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PlayVideo.csprotected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string title, link;
NavigationContext.QueryString.TryGetValue("Title", out title);
NavigationContext.QueryString.TryGetValue("Link", out link);
this.txtTitle.Text = title;
this.webview.IsScriptEnabled = true;
this.webview.Navigate(new Uri(link));
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
base.OnBackKeyPress(e);
this.webview.NavigateToString("");
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PORT ANDROID TO WINDOWS STORE APP
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PORT ANDROID TO WINDOWS STORE1. Right Click “Solution ‘YouTube’” > Add > New Project
2. Select “Windows APPS” >Select “BLANK App (WINDOWS)”> Name “YouTube.RT”
3. RIGHT Click “YouTube.RT” > Add >“Existing Item”
4. Select “ YouTubeSearcher.cs” in “Youtube(Portable)” > Add As Link
5. Add “Playvideo.xaml”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
MainPage.xaml<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="YouTube Search:" FontSize="20" Margin="10,20,0,0"></TextBlock>
<TextBox TextWrapping="Wrap" VerticalAlignment="Center" FontSize="20" x:Name="txtKeyword" Text="" Height="40" Width="364" Margin="10,10,0,10"/>
<Button Content="Search" x:Name="btnSearch" HorizontalAlignment="Stretch" FontSize="20" Margin="10,0,0,10" VerticalAlignment="Bottom" Height="42" Width="109" Click="btnSearch_Click"/>
</StackPanel>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
<ListView x:Name="VideoList" Grid.Row="1" Height="640"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="VideoList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="75" Height="75" Source="{Binding Thumbnail}" />
<StackPanel Orientation="Vertical" Margin="5,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Link}" TextWrapping="Wrap" />
<TextBlock Text="{Binding PubDate}" Foreground="Gray"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
MainPage.csList<Entry> SearchResult;
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
private void btnSearch_Click(object sender, RoutedEventArgs e)
{
YouTubeSearcher searcher = new YouTubeSearcher();
SearchResult = searcher.Search(this.txtKeyword.Text);
this.VideoList.ItemsSource = SearchResult;
}
private void VideoList_ItemClick(object sender, ItemClickEventArgs e)
{
Frame.Navigate(typeof(PlayVideo), e.ClickedItem as Entry);
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
PlayVideo.xaml (BLANK PAGE)<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Button HorizontalAlignment="Left" Tapped="OnBackButtonTapped"/>
<TextBlock Grid.Row="0" x:Name="txtTitle" FontSize="20" HorizontalAlignment="Center" Margin="20,40,0,20"></TextBlock>
</StackPanel>
<WebView x:Name="webview" Grid.Row="1" Width="480" Height="320" Margin="0,0,0,0" HorizontalAlignment="Center" ></WebView>
</StackPanel>
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var p = (Entry)e.Parameter;
this.txtTitle.Text = p.Title;
this.webview.Navigate(new Uri(p.Link));
}
private void OnBackButtonTapped(object sender, TappedRoutedEventArgs e)
{
if (Frame.CanGoBack)
{
this.webview.NavigateToString("");
Frame.GoBack();
}
}
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
Full SOURCE CODEXamarin Workshop Demo
http://1drv.ms/1qVsGar
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
ReferencesCross Platform Development With Xamarin
http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Cross-Platform-Development-With-Xamarin
Documentation
http://developer.xamarin.com/guides
Contact
cheahengsoon.weebly.com
17
/9/2
01
4C
HE
AH
EN
G S
OO
N