Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Adjusting the layout and launching the Windows Phone application

The article describes about the process that involve the adjusting the layout of Windows Phone applications, adding the controls and finally how to launch the applications.

Adjusting or Altering layout and adding controls

We would now to be learning on how to adjust the layout so as to permit allows our controls to fill the screen.

The mouse should be hovered over to the designer and then do a left click on the point shown in the figure below. This will in turn allow the user to fill this space with a TextBox and Button.

Including a TextBox and Button

Figure 1: Including a TextBox and Button

Once the above said operation is performed, the next step would be to drag and drop a TextBox, Button and ListBox from the ToolBox. This will be drop onto the designer window as shown below:

Design window

Figure 2: Design window

Let’s take a look at the function of these buttons:

  • The TextBox is a nothing but regarded as the user input control making use of which will permit the user to enter a Twitter username.
  • The Button will be pressed as and when the user wants to retrieve the tweets from the user entered into the TextBox.
  • The ListBox will comprise of the image of the user in addition to the tweet from the user.

Let’s do the subsequent alterations to the MainPage.xaml file. One needs to look out for the tag and replace the code with the one shown below:

	<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	 <Grid.RowDefinitions>
	 <RowDefinition Height="74*" />
	 <RowDefinition Height="533*" />
	 </Grid.RowDefinitions>
	 <TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"Name="txtUserName" VerticalAlignment="Top" Width="294" />
	 <Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160"Click="btnLookupUser_Click" />
	 <ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
	 <ListBox.ItemTemplate>
	 <DataTemplate>
	 <StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10">
	 <Image Source="{Binding ImageSource}" Height="73" Width="73"VerticalAlignment="Top" Margin="10,10,8,10"/>
	 <TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap"FontSize="18" Width="350" />
	 </StackPanel>
	 </DataTemplate>
	 </ListBox.ItemTemplate>
	 </ListBox>
	</Grid>

The following differences can be noticed here if one looks and attempts to compare this code snippet to what we already had.

  • TextBox: A name is given to it and Text property is deleted. This permits the user to refer to the TextBox the time when the button is pressed by the user.
  • Button: It is also given a name with a change in the Content property to Lookup. Finally, a Click event handler was added in order to trigger at the time when the button is pressed by the user.
  • ListBox: Most of the changes rather we should say the drastic changes are done by this control, a name was added first and then a
  • ListBox.ItemTemplate. This template signifies the layout of each and every item present in the list.

Post doing this, DataTemplates are associated with those data elements so as to classify the UI elements that are used to submit them.

Talking particularly about this case, StackPanel is made use of that is used to stacks elements in a direction. Image as well as the Textbox is stacked horizontally so as to exhibit the image of the user as well as his/her tweets.

Time to code

The time has come now to write a code behind to our page so as to make the application perform properly when we have already added the XAML to our project.

This will be begin by adding a reference to a file that already exists and is built by Microsoft in order to assist us parse the XML that is given back by the by the Twitter API you will be making use of soon.

One needs to right click on References, post which Add Reference is selected. Move down the page further until you get to the option System.Xml.Linq and select OK as shown below:

Adding Reference

Figure 3: Adding Reference

Now with everything place such as proper library, we would be required to add a new calss that would contain the Twitter items. One needs to Right-click on the project and select Add, then Class. Give it the name as TwitterItem and press the return button. Now we will add 2 properties inside of that class as can be seen from below and this will consists of ImageSource and Message.

	public class TwitterItem
	{
	    public string ImageSource { get; set; }
	    public string Message { get; set; }5.	}
    The ImageSource will point to the location of the image on the web. 
    The Message will comprise of the user's tweet.
    The next step would be to double click on the MainPage.xaml.cs file and the subsequent code needs to be added. This will be added just after the MainPage() constructor:

	private void btnLookupUser_Click(object sender, RoutedEventArgs e)
{
	   WebClient twitter = new WebClient();
	   twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
	    twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + txtUserName.Text));
}
	void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
	    if (e.Error != null)
	        return; 
	    XElement xmlTweets = XElement.Parse(e.Result);
	    lstTwitter.ItemsSource = from tweet in xmlTweets.Descendants("status")
	                                select new TwitterItem
	                                {
	                                    ImageSource = tweet.Element("user").Element("profile_image_url").Value,
	                                    Message = tweet.Element("text").Value
	                                };
	}

Ready for launch

Now when we are set up with our application built, the time has come now to launch it and see how it performs. The very first thing required over here is to verify destination is set to Windows Phone Emulator as shown here:

Lauching app

Figure 4: Lauching app

The following screen will be shown to you once the application is loaded.

App launched

Figure 5: App launched

Now you can select the TextBox and you will be able to see the software keyboard. Alternately, one can press page up so as to make use of the keyboard on your computer for the typing purposes. Any valid Twitter Username can be provided and then select Lookup. Post doing this, the application will return the tweets from the specified user.

Conclusion

This article focuses on the way to adjust the layout of the windows application and more importantly how to launch the Windows 7 Phone application.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login