1. Hefinator's Avatar
    This is my first tutorial here at WPCentral hope you guys like it.

    Scenario : Need to implement an YouTube functionality in the app where the app should display a list of YouTube videos in a List and when a taps on it it should play the video.

    Solution : Considering that you already have a Visual Studio Windows Phone 8 project open follow these steps
    1. From the nuget manager search for the package "MyToolkit.Extended" (This requires the WPToolkit Package too)
    2. Once your done with this the next step is to create a Template in App.xaml which will be your layout to display the videos so in App.xaml copy this code.
      Do not forget to declare this
      Code:
          xmlns:extended="clr-namespace:MyToolkit.Controls;assembly=MyToolkit.Extended"
      Then in the Application.Resources copy the code which is below
      Code:
      <DataTemplate x:Key="VideoResultTemplate">
                  <Grid Margin="12">
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="200"></ColumnDefinition>
                          <ColumnDefinition Width="*"></ColumnDefinition>
                      </Grid.ColumnDefinitions>
                      <extended:YouTubeButton Width="200" YouTubeID="{Binding VideoID}" Height="150" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="0"></extended:YouTubeButton>
                      <TextBlock Text="{Binding VideoTitle}" Foreground="Black" VerticalAlignment="Top" Margin="5,0,0,0" TextWrapping="Wrap" Width="150" Grid.Column="1" />
                  </Grid>
      </DataTemplate>
      Explanation about this code : All you are doing is creating a DataTemplate which has a grid and has two controls one is a YouTubeButton which is a part of the MyToolkit.Extended package , which displays a small thumbnail of the video and a play icon over it the other control is just TextBox to display the title of the video.

    3. Now lets move to the MainPage.XAML
      Simply make a ListBox and set the ItemTemplate to VideoResultTemplate
      Code:
      <ListBox x:Name="ResultsList" ItemTemplate="{StaticResource VideoResultTemplate}" ItemsSource="{Binding SearchResults}" Tap="ResultsList_Tap" />
      In the MainPage.XAML.VB
      Import These
      Code:
      Imports MyToolkit
      Imports MyToolkit.Controls
      Imports MyToolkit.Multimedia
      Now paste this code
      Code:
          Friend WithEvents wc As New WebClient
      
          Public Sub FetchVideoList(searchname As String)
              Dim searchUri = String.Format("http://gdata.youtube.com/feeds/api/videos?q={0}&format=6", HttpUtility.UrlEncode(searchname))
              wc.DownloadStringAsync(New Uri(searchUri))
          End Sub
      
          Private Sub wc_DownloadStringCompleted(sender As Object, e As DownloadStringCompletedEventArgs) Handles wc.DownloadStringCompleted
              Try
                  Dim atoms = XNamespace.Get("http://www.w3.org/2005/Atom")
                  Dim medians = XNamespace.Get("http://search.yahoo.com/mrss/")
                  Dim xml = XElement.Parse(e.Result)
                  Dim videoCollection = From entry In xml.Descendants(atoms.GetName("entry")) Select New YouTubeListItem(entry.Element(atoms.GetName("title")).Value, entry.Element(atoms.GetName("id")).Value)
                  ResultsList.ItemsSource = videoCollection
              Catch ex As Exception
              End Try
          End Sub
      YouTubeListItem
      Code:
      Public Class YouTubeListItem
          Public Property VideoTitle As String
          Public Property VideoID As String
      
          Public Sub New(Title As String, id As String)
              Dim parsed = id.Split("/")
              VideoID = parsed(parsed.Length - 1)
              VideoTitle = Title
          End Sub
      End Class
      Explanation of the above code : You are reading the YouTube feed and formatting it correctly for the ItemSource of the Listbox adding each entry of the result to the YouTubeListItem object.

      The Results Tap Code
      Code:
      Private Sub ResultsList_Tap(sender As Object, e As System.Windows.Input.GestureEventArgs)
              If ResultsList.SelectedIndex <> -1 Then
                  YouTube.Play(CType(ResultsList.SelectedItem, YouTubeListItem).VideoID, YouTubeQuality.Quality480P, Nothing)
              End If
      End Sub
      To Load the YouTubeMovies
      Use this code in any of the Events
      Code:
              FetchVideoList("wpcentral")

    Hope this has helped.
    11-10-2013 12:38 AM
  2. DBDev's Avatar
    Nice tutorial! I'm sure someone will find it helpful
    11-10-2013 12:50 PM

Similar Threads

  1. Can I use a Bluetooth keyboard with the 1520?
    By jkercado in forum Nokia Lumia 1520
    Replies: 6
    Last Post: 08-22-2014, 09:59 AM
  2. What color will your Lumia 929 be?
    By zekerrific in forum Nokia Lumia Icon
    Replies: 20
    Last Post: 11-14-2013, 06:17 PM
  3. HELP! I upgraded to RT 8.1 and now I can't access my app list
    By lee.eubanks in forum Microsoft Surface for Windows RT
    Replies: 5
    Last Post: 11-10-2013, 11:54 PM
  4. Replies: 5
    Last Post: 11-09-2013, 07:01 PM
  5. How to have lot of friends on your XBOX on windows phone
    By gabyap1390 in forum The Xbox Lounge
    Replies: 1
    Last Post: 11-09-2013, 06:41 PM
LINK TO POST COPIED TO CLIPBOARD