Port Android To Windows App

Cross Platform Development with xamarin
(ANDROID, WINDOWS PHONE , WINDOWS STORE APP)
Prepared by
CHEAH ENG SOON
DEVELOPER
CHEAH ENG SOON 17/9/2014

Agenda
•Register and Setup Xamarin
•Setup Android Library
•Setup Android Emulator
•Port Android to Windows Phone App
•Port Android to Windows Store App
•References

REGISTER & SETUP XAMARIN

Register and SETUP XAmarin
1.Register XamarinAccount
https://store.xamarin.com/account/register
2. Download and Setup Xamarin
http://xamarin.com/download

ReGISTERAND SETUP XAMARIN
3. Login With XamarinAccount
TOOLS > XamarinAccount

SETUP ANDROID LIBRARY

SETUP Android Library
1. Click “Start Android SDK Manager”

2. Install All The Library
[ / ] Select all library and install
•Keep Calm and Wait the library install complete.

KEEP CALM & WAIT INSTALL COMPLETELY

SETUP ANDROID EMULATOR

SETUP ANDROID EMULATOR
Click “Open Android Emulator Manager” > “Create…”

Setup the Android Emulator as Below

Port Android to Windows Phone
1.Create NEW PROJECT > Select “Windows Desktop” > Select “Class Library” > Name “Youtube”

DOWNLOAD
XamarinWorkshop Demo
http://1drv.ms/1qVsGar

IMPORT ANDROID PROJECT

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”

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

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” >
Select “Blank App (Windows Phone Silverlight”
> Name “YouTube.WP8”

3. Select “Windows Phone 8.1”
4. Right Click “YouTube.WP8” > Add >
“Existing Item”
5. Select “ YouTubeSearcher.cs” in “Youtube(Portable)”
> Add As Link

6. Select “YouTube.WP8” > Right Click “Add” > Select “New Item” > Select “ Windows Phone Portrait Page” > Name “PlayVideo.xaml”
7. Go “MainPage.xaml” & “PlayVideo.xaml”

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>

<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>

MainPage.CS
private void btnSearch_Click(object sender, RoutedEventArgse)
{
varsearcher = new YouTubeSearcher();
searcher.list= this.VideoList;
searcher.SearchForWP8(this.txtKeyword.Text);
}

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));
}
}

PlayVideo.xaml
<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanelOrientation="Vertical">
<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>

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));
}

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgse)
{
base.OnBackKeyPress(e);
this.webview.NavigateToString("");
}

PORT ANDROID TO WINDOWS STORE APP

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”

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>

<ListViewx:Name="VideoList" Grid.Row="1" Height="640"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="VideoList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<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>

MainPage.cs
List<Entry> SearchResult;
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode= Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

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);
}

PlayVideo.xaml(BLANK PAGE)
<StackPanelOrientation="Vertical">
<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>

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();
}
}

Full SOURCE CODE
XamarinWorkshop Demo
http://1drv.ms/1qVsGar

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

Port Android To Windows App

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to Port Android To Windows App

Similar to Port Android To Windows App (20)

More from Cheah Eng Soon

More from Cheah Eng Soon (20)

Recently uploaded

Recently uploaded (20)

Port Android To Windows App