Port Android To Windows App
-
Upload
eng-soon-cheah -
Category
Technology
-
view
152 -
download
0
description
Transcript of Port Android To Windows App
![Page 1: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/1.jpg)
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
![Page 2: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/2.jpg)
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
![Page 3: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/3.jpg)
REGISTER & SETUP XAMARIN
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 4: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/4.jpg)
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
![Page 5: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/5.jpg)
ReGISTER AND SETUP XAMARIN3. Login With Xamarin Account
TOOLS > Xamarin Account
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 6: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/6.jpg)
SETUP ANDROID LIBRARY
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 7: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/7.jpg)
SETUP Android Library1. Click “Start Android SDK Manager”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 8: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/8.jpg)
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
![Page 9: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/9.jpg)
KEEP CALM & WAIT INSTALL
COMPLETELY
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 10: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/10.jpg)
SETUP ANDROID EMULATOR
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 11: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/11.jpg)
SETUP ANDROID EMULATORClick “Open Android Emulator Manager” > “Create…”
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 12: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/12.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 13: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/13.jpg)
Setup the Android Emulator as Below 17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 14: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/14.jpg)
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
![Page 15: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/15.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 16: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/16.jpg)
DOWNLOADXamarin Workshop Demo
http://1drv.ms/1qVsGar
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 17: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/17.jpg)
IMPORT ANDROID PROJECT
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 18: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/18.jpg)
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
![Page 19: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/19.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 20: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/20.jpg)
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
![Page 21: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/21.jpg)
• You will seen a “YouTubeSearch.cs” .
It means share the class
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 22: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/22.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 23: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/23.jpg)
PORT ANDROID TO WINDOWS PHONE
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 24: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/24.jpg)
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
![Page 25: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/25.jpg)
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
![Page 26: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/26.jpg)
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
![Page 27: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/27.jpg)
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
![Page 28: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/28.jpg)
<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
![Page 29: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/29.jpg)
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
![Page 30: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/30.jpg)
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
![Page 31: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/31.jpg)
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
![Page 32: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/32.jpg)
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
![Page 33: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/33.jpg)
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
![Page 34: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/34.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 35: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/35.jpg)
PORT ANDROID TO WINDOWS STORE APP
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 36: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/36.jpg)
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
![Page 37: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/37.jpg)
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
![Page 38: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/38.jpg)
<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
![Page 39: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/39.jpg)
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
![Page 40: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/40.jpg)
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
![Page 41: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/41.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 42: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/42.jpg)
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
![Page 43: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/43.jpg)
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
![Page 44: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/44.jpg)
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 45: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/45.jpg)
Full SOURCE CODEXamarin Workshop Demo
http://1drv.ms/1qVsGar
17
/9/2
01
4C
HE
AH
EN
G S
OO
N
![Page 46: Port Android To Windows App](https://reader033.fdocuments.in/reader033/viewer/2022042814/5561e8bbd8b42af10c8b4f8c/html5/thumbnails/46.jpg)
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