Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Port Android To Windows App

407 views

Published on

Cross Platform Development with Xamarin
Port Android to Windows Phone and Windows Store App

Published in: Technology
  • Be the first to comment

Port Android To Windows App

  1. 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. 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. 3. REGISTER & SETUP XAMARIN CHEAH ENG SOON 17/9/2014
  4. 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. 5. ReGISTERAND SETUP XAMARIN 3. Login With XamarinAccount TOOLS > XamarinAccount CHEAH ENG SOON 17/9/2014
  6. 6. SETUP ANDROID LIBRARY CHEAH ENG SOON 17/9/2014
  7. 7. SETUP Android Library 1. Click “Start Android SDK Manager” CHEAH ENG SOON 17/9/2014
  8. 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. 9. KEEP CALM & WAIT INSTALL COMPLETELY CHEAH ENG SOON 17/9/2014
  10. 10. SETUP ANDROID EMULATOR CHEAH ENG SOON 17/9/2014
  11. 11. SETUP ANDROID EMULATOR Click “Open Android Emulator Manager” > “Create…” CHEAH ENG SOON 17/9/2014
  12. 12. CHEAH ENG SOON 17/9/2014
  13. 13. Setup the Android Emulator as Below CHEAH ENG SOON 17/9/2014
  14. 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. 15. CHEAH ENG SOON 17/9/2014
  16. 16. DOWNLOAD XamarinWorkshop Demo http://1drv.ms/1qVsGar CHEAH ENG SOON 17/9/2014
  17. 17. IMPORT ANDROID PROJECT CHEAH ENG SOON 17/9/2014
  18. 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. 19. CHEAH ENG SOON 17/9/2014
  20. 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. 21. •You will seen a “YouTubeSearch.cs” . It means share the class CHEAH ENG SOON 17/9/2014
  22. 22. CHEAH ENG SOON 17/9/2014
  23. 23. PORT ANDROID TO WINDOWS PHONE CHEAH ENG SOON 17/9/2014
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgse) { base.OnBackKeyPress(e); this.webview.NavigateToString(""); } CHEAH ENG SOON 17/9/2014
  34. 34. CHEAH ENG SOON 17/9/2014
  35. 35. PORT ANDROID TO WINDOWS STORE APP CHEAH ENG SOON 17/9/2014
  36. 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. 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. 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. 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. 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. 41. CHEAH ENG SOON 17/9/2014
  42. 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. 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. 44. CHEAH ENG SOON 17/9/2014
  45. 45. Full SOURCE CODE XamarinWorkshop Demo http://1drv.ms/1qVsGar CHEAH ENG SOON 17/9/2014
  46. 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

×