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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a Port Android To Windows App

Similar a Port Android To Windows App (20)

Más de Cheah Eng Soon

Más de Cheah Eng Soon (20)

Último

Último (20)

Port Android To Windows App