Mini Browser for Windows 7 Mobile

Objective

This article will give step to step illustration of creating a simple browser for Windows 7 mobile.

Step 1Create a new Windows Phone Application. From Silverlight for Windows Phone tab select Windows Phone Application project type.

Step 2

Right click on project and add reference of Microsoft.Phone.Controls.WebBrowser

Step 3

On the XAML page add namespace

xmlns:wb=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.WebBrowser”

Step 4

Design page.

  1. Divide content grid in two rows
  2. In first row put a textbox and button.
  3. In second row put Web Browser control.

    MainPage.Xaml

<phoneNavigation:PhoneApplicationPage
x:Class=”browserforWin7Phone.MainPage”

xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
 xmlns:phoneNavigation=”clrnamespace:Microsoft.Phone.Controls;

 assembly=Microsoft.Phone.Controls.Navigation”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
xmlns:wb=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.WebBrowser”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”800″
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”>
<Grid x:Name=”LayoutRoot” Background=”{StaticResource PhoneBackgroundBrush}”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<Grid x:Name=”TitleGrid” Grid.Row=”0″>

<TextBlock Text=”Windows 7 Phone” x:Name=”textBlockPageTitle” Style=”{StaticResource PhoneTextPageTitle1Style}”/>
<TextBlock Text=”Browser” x:Name=”textBlockListTitle” Style=”{StaticResource PhoneTextPageTitle2Style}”/>
</Grid>
<Grid x:Name=”ContentGrid” Grid.Row=”1″>
<Grid.RowDefinitions>
<RowDefinition Height=”80″/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<StackPanel Orientation=”Horizontal” Grid.Row=”0″>
<TextBox Height=”31″ Name=”textBox1″ Text=”” Width=”404″ />
<Button x:Name=”btnGo” Content=”GO” Height=”70″ Width=”85″ />
</StackPanel>
<wb:WebBrowser x:Name=”myBrowser” Grid.Row=”1″ Margin=”10″/>
</Grid>
</Grid>
</phoneNavigation:PhoneApplicationPage>

Step 5

Now in code behind just navigate in click event of button

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using Microsoft.Phone.Controls;

   13 namespace browserforWin7Phone

   14 {

   15     public partial class MainPage : PhoneApplicationPage

   16     {       

   17         public MainPage()

   18         {

   19 

   20             InitializeComponent();

   21             SupportedOrientations = SupportedPageOrientation.Portrait;         

   22             btnGo.Click += new RoutedEventHandler(btnGo_Click);

   23         }

   24 

   25         void btnGo_Click(object sender, RoutedEventArgs e)

   26         {          

   27             Uri uri = new Uri(textBox1.Text, UriKind.Absolute);

   28             if (uri != null)

   29                 myBrowser.Navigate(uri);

   30         }

   31     }

   32 }

Press F5 to get the output. In textbox give the site URL and press GO button.

I hope this article was useful. Thanks for reading. Happy coding.

About these ads

A Silverlight Twitter Client for Windows 7 Mobile Part #1

Objective

In this article I will show how to make a basic twitter client for Windows 7 mobile. This is part 1 of the series. In this part, I will show only how to read statues of given user. In further parts, I will show Tweet, Re tweet and Direct Message functionalities.

Follow the below steps

 Step 1 From Start menu select Microsoft Visual Studio 2010 express edition


 
 
 
 
 
 

Step 2

From File menu select New Project. From Silverlight for Windows phone tab select Windows Phone application project type.


Once selecting that a new project will get created with below solution structure

Make sure in Debug option Windows Phone7 Emulator is selected. If it is selected to Windows Phone 7 Device then Visual studio will deploy the application to mobile device directly.

 

Step 3

Design phone page

  1. Change text of title text box to “Twitter for Windows 7 Phone “
  2. Divide content grid in two rows.
  3. In first row put a stack panel with horizontal orientation.
  4. Inside stack panel put a textbox and button. User will input twitter username in textbox. Button click (Touch event in real device) will fetch status of entered user name.
  5. Style for both textbox and button is from the default static resources PhoneTextBoxStyle and PhoneButtonBase.
  6. In second row of content grid put another grid and divide this grid in two rows again.
  7. In first row put a list box with style PhoneListBox
  8. Inside Item template put a data template.
  9. Inside data template put a stack panel.
  10. Put three textboxes and one image control. These controls I will bind with the properties of the tweet entity class.
  11. In second row of grid put a text block and a display message.

MainPage.xaml

<phoneNavigation:PhoneApplicationPage x:Class=”TwiiterClient.MainPage”
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:phoneNavigation=”clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation”

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=”800″

FontFamily=”{StaticResource PhoneFontFamilyNormal}”

FontSize=”{StaticResource PhoneFontSizeNormal}”

Foreground=”{StaticResource PhoneForegroundBrush}”>

<Grid x:Name=”LayoutRoot” Background=”Green”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<Grid x:Name=”TitleGrid” Grid.Row=”0″>
<TextBlock Text=”Twitter for Windows 7 Phone” x:Name=”Twitter” Style=”{StaticResourcePhoneTextPageTitle1Style}”/>

<TextBlock Text=”Twitter” x:Name=”Windows7Twitter” Style=”{StaticResource PhoneTextPageTitle2Style}”/>

</Grid>

<!–ContentGrid is empty. Place new content here–>

<Grid x:Name=”ContentGrid” Grid.Row=”1″>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto” />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<StackPanel Grid.Row=”0″ Orientation=”Horizontal” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”0,0,0,0″>

<TextBox x:Name=”txttweet” Height=”10″ Width=”325″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Opacity=”10″ Style=”{StaticResource PhoneTextBoxStyle}” />

<Buttonx:Name=”btnTwiiter” Content=”Tweets” Height=”60″ Width=”150″ Style=”{StaticResource PhoneButtonBase}”/>

</StackPanel>

<Grid Grid.Row=”1″>

<Grid.RowDefinitions>

<RowDefinition Height=”*”/>

<RowDefinition Height=”Auto” />

</Grid.RowDefinitions>

<ListBox Grid.Row=”0″ Height=”Auto” Margin=”10,0,0,0″ Name=”listBox1″ Width=”476″ Style=”{StaticResource PhoneListBox}”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Horizontal” Height=”132″>

<Image Source=”{Binding ImageSource}” Height=”73″ Width=”73″ VerticalAlignment=”Top” Margin=”0,10,8,0″/>

<StackPanel Width=”370″>

<TextBlock Text=”{Binding UserName}” Foreground=”#FFC8AB14″ FontSize=”28″ />

<TextBlock Text=”{Binding Message}” TextWrapping=”Wrap” FontSize=”24″ />

<TextBlock Text=”{Binding CreatedAt}” FontSize=”20″ Foreground=”#FFC8AB14″ />
</StackPanel>
</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<TextBlock Text=”Developed by Dhananjay Kumar at MIT UST Global” Style=”{StaticResource PhoneTextAccentStyle}” Grid.Row=”1″/>

</Grid>

</Grid>

</Grid>
 </phoneNavigation:PhoneApplicationPage>
 

 Step 4
Creating an twitter entity class

Right click and add a class in project. I have given name here twitter to the class. I am going to work on only 4 data exposed by twitter API. So entity class is as below

Twitter.cs

    1     using System;

    2         using System.Net;

    3         using System.Windows;

    4         using System.Windows.Controls;

    5         using System.Windows.Documents;

    6         using System.Windows.Ink;

    7         using System.Windows.Input;

    8         using System.Windows.Media;

    9         using System.Windows.Media.Animation;

   10         using System.Windows.Shapes;

   11 

   12         namespace TwiiterClient

   13         {

   14             public class Twitter

   15             {

   16                 public string UserName { get; set; }

   17                 public string Message { get; set; }

   18                 public string ImageSource { get; set; }

   19                 public string CreatedAt { get; set; }

   20 

   21             }

   22         }

In this step, I will be using Twitter API. And will apply LINQ to XML to fetch the desired data. Twitter API will be returning an XML.

MainPage.Xaml.CS

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using Microsoft.Phone.Controls;

   13 using System.Xml.Linq;

   14 

   15 namespace TwiiterClient

   16 {

   17     public partial class MainPage : PhoneApplicationPage

   18     {

   19         public MainPage()

   20         {

   21             InitializeComponent();

   22 

   23             SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

   24             btnTwiiter.Click += new RoutedEventHandler(btnTwiiter_Click);

   25 

   26         }

   27 

   28         void btnTwiiter_Click(object sender, RoutedEventArgs e)

   29         {

   30             WebClient client = new WebClient();

   31             client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

   32             client.DownloadStringAsync(new Uri(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=&#8221; + txttweet.Text));

   33         }

   34 

   35         void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

   36         {

   37 

   38             if (e.Error != null)

   39                 return;

   40             XElement xmlTweets = XElement.Parse(e.Result);

   41             listBox1.ItemsSource = from tweet in xmlTweets.Descendants(“status”)

   42                                    select new Twitter

   43                                    {

   44                                        ImageSource = tweet.Element(“user”).Element(“profile_image_url”).Value,

   45                                        Message = tweet.Element(“text”).Value,

   46                                        UserName = tweet.Element(“user”).Element(“screen_name”).Value,

   47                                        CreatedAt = tweet.Element(“created_at”).Value

   48                                    };

   49             Windows7Twitter.Text = txttweet.Text;

   50 

   51 

   52         }

   53     }

   54 }

 

Explanation

  1. Add reference of System.XML.Linq.
  2. Using Web Client class call the Twitter REST service.
  3. Parsing the result using XElement.
  4. Using LINQ creating the twitter entity class and setting it as item source of list box.
  5. If service call is returning error then just returning . 

Just press F5 and in Windows 7 mobile emulator you can see the output. Enter user name in the text to fetch tweets.


 

Conclusion

This article explained how to create a basic twitter client for Window7 mobile. In further articles, I will show how to achieve other functionalities of twitter. Thanks for reading. Hope it was useful.

Touch events in Silverlight for Windows 7 mobile application Part #2

Objective

This article will explain how to work with Touch events in Silverlight for Windows 7 mobile application. This is part 2 of the touch events.

Read my first article on touch events before going through this article.

Background

We saw in last article on touch events that, even if after touching (clicking) somewhere else than text block, the text in text block was not resuming to original fonts and colors. The reason behind that was, I attached the event to the text block. I can conclude reason as follows

  1. I attached ManipulationStarted event to text block.
  2. I did not handle ManipulationCompleted event for the text block.
  3. In ManipulationStarted event for text block I changed the text color and font size.
  4. But I did not write code for resuming the original font size and color on ManipulationCompleted event for text block.

    Normal behavior should be, when user is touching or clicking somewhere else on the screen text block should resume to its originality.

So how to achieve it

Fine; when we see the class hierarchy. I will explain this hierarchy in later articles. But what point to be noted here is that , we can override OnManipulationStarted
method and then can sense the touch on whole screen. We can override this method and check if the source of the touch is text block , we can manipulate color and font . If source is somewhere on the screen we can restore the default font and color.


In this article, I am going to work with only ManipulationStarted event. Follow the below steps
Step 1

From Start menu select Microsoft Visual Studio 2010 express edition

Step 2

From File select New Project. From Silverlight for Windows phone tab select Windows Phone application project type.


Once selecting that a new project will get created with below solution structure

Make sure in Debug option Windows Phone7 Emulator is selected. If it is selected to Windows Phone 7 Device then Visual studio will deploy the application to mobile device directly.

Step 3

Open MainPage.Xaml and just add a text block. Set the text of the text block as Hello World. Here if you want you can change Title text also.

If you closely look into XAML, you will find there are two Grids inside main Grid. One is title Grid and other is body Grid. So put your text block in the Body grid.

<phoneNavigation:PhoneApplicationPage
x:Class=”FirstWindowPhoneApplication.MainPage”

xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:phoneNavigation=”clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation”

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=”800″

FontFamily=”{StaticResource PhoneFontFamilyNormal}

FontSize=”{StaticResource PhoneFontSizeNormal}”

Foreground=”{StaticResource PhoneForegroundBrush}”>

<Grid x:Name=”LayoutRoot” Background=”{StaticResource PhoneBackgroundBrush}”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<!–TitleGrid is the name of the application and page title–>

<Grid x:Name=”TitleGrid” Grid.Row=”0″>

<TextBlock Text=”MY First Mobile Application x:Name=”textBlockPageTitle” Style=”{StaticResource PhoneTextPageTitle1Style}”/>

<TextBlock Text=” Windows 7 x:Name=”textBlockListTitle” Style=”{StaticResource PhoneTextPageTitle2Style}”/>

</Grid>

<!–ContentGrid is empty. Place new content here–>

<Grid x:Name=”ContentGrid” Grid.Row=”1″>

<TextBlock x:Name=”txtHelloWord” Text=”Hello World” HorizontalAlignment=”Center” VerticalAlignment=”Center” Foreground=”Azure” />

</Grid>

</Grid>
</phoneNavigation:PhoneApplicationPage>

The code I changed is in bigger font and yellow background. This time there is no event attached to text block.
Step 4

In code behind, I am going to write code for changing the color of the text and setting the font size. I will be writing code on overridden method.

MainPage.Xaml.Cs

1 namespace FirstWindowPhoneApplication

2 {

3 public partial class MainPage : PhoneApplicationPage

4 {

5

6 Random radNumber = new Random();

7 public MainPage()

8 {

9 InitializeComponent();

10

11 SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

12 }

13

14

15

16 protected override void OnManipulationStarted(ManipulationStartedEventArgs e)

17 {

18

19 Color clr = Colors.White;

20 double font = 30;

21 if (e.OriginalSource == txtHelloWord)

22 {

23 clr = Color.FromArgb(255, (byte)radNumber.Next(255), (byte)radNumber.Next(255), (byte)radNumber.Next(255));

24 font = 75;

25 }

26

27 txtHelloWord.Foreground = new SolidColorBrush(clr);

28 txtHelloWord.FontSize = font;

29 base.OnManipulationStarted(e);

30 }

31 }

32 }

Explanation

  1. I am overriding OnManipulationStarted method here.
  2. I am checking what the source of calling the method is.
  3. If it is text box, I am setting the font size and color to random color.
  4. If it is not text box , I am setting size and color to default.

Step 5
Just press F5 and in Windows 7 mobile emulator you can see the output. In center you can see Hello world. When you click on the text block, font of the text will be changed to 75 and foreground color will change randomly. But when you click outside the text block or any other place on page text font size will be changed to 30 and text color to white.

Now when I click text color of the text will get changed. This will act exactly on the touch in real device.


Again when user will touch any other place on the page , text color and text size will restore to white and 30 respectively.


Conclusion

This article explained how to handle touch event on page in Silverlight application for Windows 7 mobile. Thanks for reading.