Cross Platform Development with xamarin
(ANDROID, WINDOWS PHONE , WINDOWS STORE APP)
Prepared by
CHEAH ENG SOON
DEVELO...
Agenda
•Register and Setup Xamarin
•Setup Android Library
•Setup Android Emulator
•Port Android to Windows Phone App
...
REGISTER & SETUP XAMARIN
CHEAH ENG SOON 17/9/2014
Register and SETUP XAmarin
1.Register XamarinAccount
https://store.xamarin.com/account/register
2. Download and Setup X...
ReGISTERAND SETUP XAMARIN
3. Login With XamarinAccount
TOOLS > XamarinAccount
CHEAH ENG SOON 17/9/2014
SETUP ANDROID LIBRARY
CHEAH ENG SOON 17/9/2014
SETUP Android Library
1. Click “Start Android SDK Manager”
CHEAH ENG SOON 17/9/2014
2. Install All The Library
[ / ] Select all library and install
•Keep Calm and Wait the library install complete.
CHEAH...
KEEP CALM & WAIT INSTALL COMPLETELY
CHEAH ENG SOON 17/9/2014
SETUP ANDROID EMULATOR
CHEAH ENG SOON 17/9/2014
SETUP ANDROID EMULATOR
Click “Open Android Emulator Manager” > “Create…”
CHEAH ENG SOON 17/9/2014
CHEAH ENG SOON 17/9/2014
Setup the Android Emulator as Below
CHEAH ENG SOON 17/9/2014
Port Android to Windows Phone
1.Create NEW PROJECT > Select “Windows Desktop” > Select “Class Library” > Name “Youtube”
...
CHEAH ENG SOON 17/9/2014
DOWNLOAD
XamarinWorkshop Demo
http://1drv.ms/1qVsGar
CHEAH ENG SOON 17/9/2014
IMPORT ANDROID PROJECT
CHEAH ENG SOON 17/9/2014
IMPORT ANDROID PROJECT
2. Delete the “Class1.cs” and create the “YoutubeSearcher.cs” or Import the file “YoutubeSearcher....
CHEAH ENG SOON 17/9/2014
4. Right click “YouTube.Android” >Add > Existing Item > Select “ YouTubeSearcher.cs” in “Youtube(Portable)” > Add As Link ...
•You will seen a “YouTubeSearch.cs” .
It means share the class
CHEAH ENG SOON 17/9/2014
CHEAH ENG SOON 17/9/2014
PORT ANDROID TO WINDOWS PHONE CHEAH ENG SOON 17/9/2014
Port AnDroidTo Windows Phone App
1.Right Click “Solution ‘YouTube’” > Add > New Project
2.Select “Windows Phone Apps” > ...
3. Select “Windows Phone 8.1”
4. Right Click “YouTube.WP8” > Add >
“Existing Item”
5. Select “ YouTubeSearcher.cs” in “...
6. Select “YouTube.WP8” > Right Click “Add” > Select “New Item” > Select “ Windows Phone Portrait Page” > Name “PlayVideo....
MainPage.xaml
<StackPanelOrientation="Horizontal" Grid.Row="0">
<TextBlockText="YouTube:" VerticalAlignment="Center" Fon...
<phone:LongListSelector
x:Name="VideoList" Grid.Row="1" Height="640"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Se...
MainPage.CS
private void btnSearch_Click(object sender, RoutedEventArgse)
{
varsearcher = new YouTubeSearcher();
searc...
private void VideoList_SelectionChanged(object sender, SelectionChangedEventArgse)
{
if (VideoList.SelectedItem!= null) ...
PlayVideo.xaml
<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanelOrientation="Vertical">
<StackPanelOrient...
PlayVideo.cs
protected override void OnNavigatedTo(NavigationEventArgse)
{
base.OnNavigatedTo(e);
string title, link; ...
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgse)
{
base.OnBackKeyPress(e);
this.webview.N...
CHEAH ENG SOON 17/9/2014
PORT ANDROID TO WINDOWS STORE APP
CHEAH ENG SOON 17/9/2014
PORT ANDROID TO WINDOWS STORE
1.Right Click “Solution ‘YouTube’” > Add > New Project
2.Select “Windows APPS” >Select “BL...
MainPage.xaml
<Grid.RowDefinitions>
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
</Grid.RowDefinition...
<ListViewx:Name="VideoList" Grid.Row="1" Height="640"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionMode="Non...
MainPage.cs
List<Entry> SearchResult;
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode= Windo...
private void btnSearch_Click(object sender, RoutedEventArgse)
{
YouTubeSearchersearcher = new YouTubeSearcher();
Search...
CHEAH ENG SOON 17/9/2014
PlayVideo.xaml(BLANK PAGE)
<StackPanelOrientation="Vertical">
<StackPanelOrientation="Horizontal">
<Button HorizontalAl...
protected override void OnNavigatedTo(NavigationEventArgse)
{
varp = (Entry)e.Parameter;
this.txtTitle.Text= p.Title;
...
CHEAH ENG SOON 17/9/2014
Full SOURCE CODE
XamarinWorkshop Demo
http://1drv.ms/1qVsGar
CHEAH ENG SOON 17/9/2014
References
Cross Platform Development With Xamarin
http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Cross-Platform- ...
of 46

Port Android To Windows App

Cross Platform Development with Xamarin Port Android to Windows Phone and Windows Store App
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Port Android To Windows App

  • 1. Cross Platform Development with xamarin (ANDROID, WINDOWS PHONE , WINDOWS STORE APP) Prepared by CHEAH ENG SOON DEVELOPER CHEAH ENG SOON 17/9/2014
  • 2. Agenda •Register and Setup Xamarin •Setup Android Library •Setup Android Emulator •Port Android to Windows Phone App •Port Android to Windows Store App •References CHEAH ENG SOON 17/9/2014
  • 3. REGISTER & SETUP XAMARIN CHEAH ENG SOON 17/9/2014
  • 4. Register and SETUP XAmarin 1.Register XamarinAccount https://store.xamarin.com/account/register 2. Download and Setup Xamarin http://xamarin.com/download CHEAH ENG SOON 17/9/2014
  • 5. ReGISTERAND SETUP XAMARIN 3. Login With XamarinAccount TOOLS > XamarinAccount CHEAH ENG SOON 17/9/2014
  • 6. SETUP ANDROID LIBRARY CHEAH ENG SOON 17/9/2014
  • 7. SETUP Android Library 1. Click “Start Android SDK Manager” CHEAH ENG SOON 17/9/2014
  • 8. 2. Install All The Library [ / ] Select all library and install •Keep Calm and Wait the library install complete. CHEAH ENG SOON 17/9/2014
  • 9. KEEP CALM & WAIT INSTALL COMPLETELY CHEAH ENG SOON 17/9/2014
  • 10. SETUP ANDROID EMULATOR CHEAH ENG SOON 17/9/2014
  • 11. SETUP ANDROID EMULATOR Click “Open Android Emulator Manager” > “Create…” CHEAH ENG SOON 17/9/2014
  • 12. CHEAH ENG SOON 17/9/2014
  • 13. Setup the Android Emulator as Below CHEAH ENG SOON 17/9/2014
  • 14. Port Android to Windows Phone 1.Create NEW PROJECT > Select “Windows Desktop” > Select “Class Library” > Name “Youtube” CHEAH ENG SOON 17/9/2014
  • 15. CHEAH ENG SOON 17/9/2014
  • 16. DOWNLOAD XamarinWorkshop Demo http://1drv.ms/1qVsGar CHEAH ENG SOON 17/9/2014
  • 17. IMPORT ANDROID PROJECT CHEAH ENG SOON 17/9/2014
  • 18. IMPORT ANDROID PROJECT 2. 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” CHEAH ENG SOON 17/9/2014
  • 19. CHEAH ENG SOON 17/9/2014
  • 20. 4. Right click “YouTube.Android” >Add > Existing Item > Select “ YouTubeSearcher.cs” in “Youtube(Portable)” > Add As Link CHEAH ENG SOON 17/9/2014
  • 21. •You will seen a “YouTubeSearch.cs” . It means share the class CHEAH ENG SOON 17/9/2014
  • 22. CHEAH ENG SOON 17/9/2014
  • 23. PORT ANDROID TO WINDOWS PHONE CHEAH ENG SOON 17/9/2014
  • 24. Port AnDroidTo 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” CHEAH ENG SOON 17/9/2014
  • 25. 3. Select “Windows Phone 8.1” 4. Right Click “YouTube.WP8” > Add > “Existing Item” 5. Select “ YouTubeSearcher.cs” in “Youtube(Portable)” > Add As Link CHEAH ENG SOON 17/9/2014
  • 26. 6. Select “YouTube.WP8” > Right Click “Add” > Select “New Item” > Select “ Windows Phone Portrait Page” > Name “PlayVideo.xaml” 7. Go “MainPage.xaml” & “PlayVideo.xaml” CHEAH ENG SOON 17/9/2014
  • 27. MainPage.xaml <StackPanelOrientation="Horizontal" Grid.Row="0"> <TextBlockText="YouTube:" VerticalAlignment="Center" FontSize="20" Margin="10,20,0,10"></TextBlock> <TextBoxTextWrapping="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> CHEAH ENG SOON 17/9/2014
  • 28. <phone:LongListSelector x:Name="VideoList" Grid.Row="1" Height="640" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="VideoList_SelectionChanged"> <phone:LongListSelector.ItemTemplate> <DataTemplate> <StackPanelOrientation="Horizontal"> <Image Width="100" Height="100" Source="{Binding Thumbnail}" /> <StackPanelOrientation="Vertical" Margin="5,0"> <TextBlockText="{Binding Title}" TextWrapping="Wrap" /> <TextBlockText="{Binding PubDate}" Foreground="Gray"/> </StackPanel> </StackPanel> </DataTemplate> </phone:LongListSelector.ItemTemplate> </phone:LongListSelector> CHEAH ENG SOON 17/9/2014
  • 29. MainPage.CS private void btnSearch_Click(object sender, RoutedEventArgse) { varsearcher = new YouTubeSearcher(); searcher.list= this.VideoList; searcher.SearchForWP8(this.txtKeyword.Text); } CHEAH ENG SOON 17/9/2014
  • 30. private void VideoList_SelectionChanged(object sender, SelectionChangedEventArgse) { if (VideoList.SelectedItem!= null) { vartitle = (VideoList.SelectedItemas Entry).Title; varlink = (VideoList.SelectedItemas Entry).Link; NavigationService.Navigate(new Uri(string.Format("/PlayVideo.xaml?Title={0}&Link={1}", title, link), UriKind.Relative)); } } CHEAH ENG SOON 17/9/2014
  • 31. PlayVideo.xaml <Grid x:Name="LayoutRoot" Background="Transparent"> <StackPanelOrientation="Vertical"> <StackPanelOrientation="Horizontal"> <TextBlockx:Name="txtTitle" FontSize="20" HorizontalAlignment="Center" Margin="20,40,0,20"></TextBlock> </StackPanel> <phone:WebBrowserx:Name="webview" Grid.Row="1" Width="480" Height="320" Margin="0,0,0,0" HorizontalAlignment="Center"></phone:WebBrowser> </StackPanel> </Grid> CHEAH ENG SOON 17/9/2014
  • 32. PlayVideo.cs protected override void OnNavigatedTo(NavigationEventArgse) { 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)); } CHEAH ENG SOON 17/9/2014
  • 33. protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgse) { base.OnBackKeyPress(e); this.webview.NavigateToString(""); } CHEAH ENG SOON 17/9/2014
  • 34. CHEAH ENG SOON 17/9/2014
  • 35. PORT ANDROID TO WINDOWS STORE APP CHEAH ENG SOON 17/9/2014
  • 36. PORT ANDROID TO WINDOWS STORE 1.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” CHEAH ENG SOON 17/9/2014
  • 37. MainPage.xaml <Grid.RowDefinitions> <RowDefinitionHeight="Auto" /> <RowDefinitionHeight="Auto" /> </Grid.RowDefinitions> <StackPanelOrientation="Horizontal" Grid.Row="0"> <TextBlockText="YouTube Search:" FontSize="20" Margin="10,20,0,0"></TextBlock> <TextBoxTextWrapping="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> CHEAH ENG SOON 17/9/2014
  • 38. <ListViewx:Name="VideoList" Grid.Row="1" Height="640" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="None" IsItemClickEnabled="True" ItemClick="VideoList_ItemClick"> <ListView.ItemTemplate> <DataTemplate> <StackPanelOrientation="Horizontal"> <Image Width="75" Height="75" Source="{Binding Thumbnail}" /> <StackPanelOrientation="Vertical" Margin="5,0"> <TextBlockText="{Binding Title}" TextWrapping="Wrap" /> <TextBlockText="{Binding Link}" TextWrapping="Wrap" /> <TextBlockText="{Binding PubDate}" Foreground="Gray"/> </StackPanel> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> CHEAH ENG SOON 17/9/2014
  • 39. MainPage.cs List<Entry> SearchResult; public MainPage() { this.InitializeComponent(); this.NavigationCacheMode= Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled; } CHEAH ENG SOON 17/9/2014
  • 40. private void btnSearch_Click(object sender, RoutedEventArgse) { YouTubeSearchersearcher = new YouTubeSearcher(); SearchResult= searcher.Search(this.txtKeyword.Text); this.VideoList.ItemsSource= SearchResult; } private void VideoList_ItemClick(object sender, ItemClickEventArgse) { Frame.Navigate(typeof(PlayVideo), e.ClickedItemas Entry); } CHEAH ENG SOON 17/9/2014
  • 41. CHEAH ENG SOON 17/9/2014
  • 42. PlayVideo.xaml(BLANK PAGE) <StackPanelOrientation="Vertical"> <StackPanelOrientation="Horizontal"> <Button HorizontalAlignment="Left" Tapped="OnBackButtonTapped"/> <TextBlockGrid.Row="0" x:Name="txtTitle" FontSize="20" HorizontalAlignment="Center" Margin="20,40,0,20"></TextBlock> </StackPanel> <WebViewx:Name="webview" Grid.Row="1" Width="480" Height="320" Margin="0,0,0,0" HorizontalAlignment="Center" ></WebView> </StackPanel> CHEAH ENG SOON 17/9/2014
  • 43. protected override void OnNavigatedTo(NavigationEventArgse) { varp = (Entry)e.Parameter; this.txtTitle.Text= p.Title; this.webview.Navigate(new Uri(p.Link)); } private void OnBackButtonTapped(object sender, TappedRoutedEventArgse) { if (Frame.CanGoBack) { this.webview.NavigateToString(""); Frame.GoBack(); } } CHEAH ENG SOON 17/9/2014
  • 44. CHEAH ENG SOON 17/9/2014
  • 45. Full SOURCE CODE XamarinWorkshop Demo http://1drv.ms/1qVsGar CHEAH ENG SOON 17/9/2014
  • 46. References Cross 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@live.com.my cheahengsoon.weebly.com CHEAH ENG SOON 17/9/2014

Related Documents