Youtube Search and play Video in Windows Phone

Now, Its Time for Searching the Videos in Youtube and play that Video in our Application so easily..!

Now Here is the Design (.xaml) file of my Youtube Search Application.

<phone:PhoneApplicationPage
x:Class="Nikhil'sYoutubeSearchApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SearchTemplate">
<Grid Margin="0,0,0,30">
<TextBlock Text="{Binding Title}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="355" Margin="120,0,0,0" TextWrapping="Wrap" />
<Image Source="{Binding VideoImg}" HorizontalAlignment="Left" Width="100" Height="100" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBox Height="72" Name="TxtSearch" Text="" Width="460" SelectionBackground="#FF75A9C2" >
<TextBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF6E704D" Offset="0.884"/>
<GradientStop Color="#FFB0BA87"/>
</LinearGradientBrush>
</TextBox.Background>
</TextBox>
<Button Content="Button" HorizontalAlignment="Right" Height="72" Name="BtnSearch" Width="160" RenderTransformOrigin="0.5,0.5" Click="BtnSearch_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF113B60" Offset="1"/>
<GradientStop Color="#FF8DBFDA"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox HorizontalAlignment="Left" Margin="0,0,0,0" Height="600" ItemTemplate="{StaticResource SearchTemplate}" ItemsSource="{Binding SearchResults}" x:Name="LstVideobox" VerticalAlignment="Top" Width="460" SelectionChanged="LstVideobox_SelectionChanged">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF413D31"/>
<GradientStop Color="#FF54564F" Offset="0.457"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</Grid>

</phone:PhoneApplicationPage>

And Now the Code File for that is.. (xaml.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Tasks;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml.Linq;
using Microsoft.Phone.Controls;

namespace Nikhils_YoutubeSearch_App
{
public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    private void BtnSearch_Click(object sender, RoutedEventArgs e)
    {
        var wc = new WebClient();
        wc.DownloadStringCompleted += DownloadStringCompleted;
        var src = string.Format("http://gdata.youtube.com/feeds/api/videos?q={0}&format=6", HttpUtility.UrlEncode(TxtSearch.Text));
        wc.DownloadStringAsync(new Uri(src));
    }

    void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        var atomns = XNamespace.Get("http://www.w3.org/2005/Atom");
        var medians = XNamespace.Get("http://search.yahoo.com/mrss/");
        var xml = XElement.Parse(e.Result);
        var videos = (from entry in xml.Descendants(atomns.GetName("entry"))
        select new VideoClass
            {
              VideoID = entry.Element(atomns.GetName("id")).Value,
              VideoImg = (from thumbnail in entry.Descendants(medians.GetName("thumbnail"))
            where thumbnail.Attribute("height").Value == "360"
            select thumbnail.Attribute("url").Value).FirstOrDefault(),
            Title = entry.Element(atomns.GetName("title")).Value
            }).ToArray();
        LstVideobox.ItemsSource = videos;
    }

    private void LstVideobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var curvid = LstVideobox.SelectedItem as VideoClass;
        if (curvid != null)
        {
            var parsedvid = curvid.VideoID.Split('/');
            var id = parsedvid[parsedvid.Length - 1];
            var url = "vnd.youtube:" + id;

            var myfinalurl = "https://www.youtube.com/embed/" + id;

            var tempurl = "https://www.youtube.com/watch?v=" + id + "?autoplay=1";

            var task = new WebBrowserTask { URL = "https://www.youtube.com/embed/" + id + "?autoplay=1" };
            task.Show();
        }
    }
}
}



Now, Finally you created a Application of Youtube Searching and Playing that video.,,!!
:)

Read More

Show Pop Up menu in Windows Phone

Now, I show you how to display pop up menu in windows phone 7. and how can we handle it.

      for that you have to create a user control that is your pop up screen. and that is displayed in our home screen in windows phone.

    // Place your Design of your User Control here

And this is the code behind of User Control as MyUserControl.xaml.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.Windows.Controls.Primitives;
using Microsoft.Phone.Controls;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Media;

namespace NikhilsProject
{
  public partial class MyPopUpScreen : UserControl
  {
    public MyPopUpScreen(String message)
    {
        InitializeComponent();

        txtMessage.Text = message;
        txtMessageShadow.Text = message;
    }

    public void btnYes_Click(object sender, RoutedEventArgs e)
    {
            // Code that will fire when user clicks Yes button.
    }

    public void btnNotNow_Click(object sender, RoutedEventArgs e)
    {
            // Code that will fire when user clicks Not Now button.
    }

    private void ClosePopup()
    {
        Popup buyPop = this.Parent as Popup;
        buyPop.IsOpen = false;
    }
  }
}

So, Now open HomePage.xaml.cs for display pop up at specific location and you have to handle that pop up. This code helps you.

    Popup MusicPlaying = new Popup();
    MusicPlaying.Child = new MyPopUpScreen("Do you want to Stop Music Player");
    MusicPlaying.IsOpen = true;
    MusicPlaying.VerticalOffset = 100;
    MusicPlaying.HorizontalOffset = 25;
    MusicPlaying.Closed += (s1, e1) =>
    {
            // Add you code here to do something
            // when the Popup is closed
    };

Please see the namespace also that i have used in my project;

And, yup its Done Easily...!!

Read More

Display GIF or Animated Images in Windows Phone

Unfortunately Windows Phone does not support animated images or .Gif Image Files.
Then sometimes in our application we wish to display some animation images so that our application looks good.
Now, if you have some gif or animated images and you wish to display that image in ur windows phone application.
So, first of all you divide your gif images into frames using software like 'GIFFrame' or online. and this gives you a different frames of your gif files in to .png format.
And Now,
in Xaml.cs file, i show you that how can we display that group of images that looks like a animated image.

So, Look, i used DispatcherTimer for executing tasks at some interval of time and with some priority also.
For that you have to add namespace "System.Windows.Threading".

                DispatcherTimer dtimer = new DispatcherTimer();

And Now, you have to add list of all of that image frame files..

List<String> myFiles = new List<string>()
                        {
                        "Monkey_Images/img_tablet1.png",
                        "Monkey_Images/img_tablet2.png",
                        "Monkey_Images/img_tablet3.png",
                        "Monkey_Images/img_tablet4.png",
                        "Monkey_Images/img_tablet5.png",
                        "Monkey_Images/img_tablet6.png",
                        "Monkey_Images/img_tablet7.png"
                        };

And now, you need a temporary list that stores all images that you are having to display. so i used List<BitmapImage>. for that you have to add namespace

"System.Windows.Media.Imaging".

          List bmps = new List() { };

And now, the logic is started..

The Whole Code is:
in your Xaml.cs file..

int flag = 1;
int current = 0;

DispatcherTimer dtimer = new DispatcherTimer();

List myFiles = new List()
                    {
                    "Monkey_Images/img_tablet1.png",
                    "Monkey_Images/img_tablet2.png",
                    "Monkey_Images/img_tablet3.png",
                    "Monkey_Images/img_tablet4.png",
                    "Monkey_Images/img_tablet5.png",
                    "Monkey_Images/img_tablet6.png",
                    "Monkey_Images/img_tablet7.png"
                    };

List bmps = new List() { };
public HomePage()
{
          InitializeComponent();
          MonkeyMovement();
}

public void MonkeyMovement()
{
          foreach (string ff in myFiles)
          {
            BitmapImage bmp = new BitmapImage(new Uri(ff, UriKind.Relative));
            bmps.Add(bmp);   // Temporary assign images into bitmapimage list.
          }
          dtimer.Interval = TimeSpan.FromMilliseconds(20);
          dtimer.Tick += new EventHandler(dtimer_Tick);
          dtimer.Start();
}

void dtimer_Tick(Object sender, EventArgs e)
{

          if (flag == 1)
          {
                    monkeyImage.Source = bmps[current];
                    //where monkey image is your image's Name in Xaml page.
                    current++;
                    if (current == bmps.Count - 1)
                    {
                          flag = 0;
                    }
             }
              if (flag == 0)
              {
                    monkeyImage.Source = bmps[current];
                    current--;
                    if (current == 0)
                    {
                            flag = 1;
                    }
              }

}

Read More

Application Bar in Windows Phone 7

In this article I am going to see how to use Application Bar effectively for a Windows Phone 7 Application development.

Application Bar is a set of Icons that can be configured at the bottom of the application for each page or also we can configure it for multiple pages.

These buttons can be used to navigate to frequently used pages across the application which enables users to navigate quickly and easily. Application bar has some set of options along with the buttons we can configure the menu items especially for some navigation which are not that much frequently used. Application bar automatically adjusts its icons and button as the screen orientation changes as and when.

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/images/appbar.back.rest.png" Text="Back" Click="ApplicationBarIconButton_Click" />
<shell:ApplicationBarIconButton IconUri="/images/appbar.add.rest.png" Text="Add" Click="ApplicationBarIconButton_Click_1"/>
<shell:ApplicationBarIconButton IconUri="/images/appbar.next.rest.png" Text="Next" Click="ApplicationBarIconButton_Click_2" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Submit" />
<shell:ApplicationBarMenuItem Text="Clear" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Read More