lmoroney

The Allure of Azure

Laurence Moroney — Tue, 16 Apr 2013 14:35:57 GMT

Awesome infographic showing the allure of Windows Azure, the world’s most powerful cloud platform. Come check out how easy it is to cloud-enable your applications and services, and take advantage of high speed at global scale…

Using the Bing Image of the Day in a Windows Store Application

Laurence Moroney — Mon, 15 Apr 2013 22:32:15 GMT

I'm a huge fan of the Bing Image of the Day, and make sure I open my browser to Bing at least once a day to see what the current image is! If you haven’t tried it – go ahead and do so. Just go to http://www.bing.com, and see what image is in store for you today. In this article, you’ll see how you can find this image, download it, and use it in your Windows Store application.

Here’s today’s image:

If you’ve ever wondered how to access this image, I’ll show you in this article. While my code is for a Windows Store application in C#, it should be easy to modify for something else. Please not that this is for tutorial purposes only, it does not grant a license to use these images in applications of your own.

Step 1. Change the App Background to an IMAGE

If you don’t have the tools to build a Windows Store App already, take a look here for a handy-dandy tutorial on how to download, install and get started with them.

Using Visual Studio, create a new Windows Store App using the Blank App (XAML) template. This will give you a page called ‘MainPage.xaml’ which defines your application UI. In it you’ll find a ‘Grid.xaml’ which looks like this:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
    </Grid>

Change it to use an Image as the background instead of the theme brush like this:

    <Grid>
        <Grid.Background>
            <ImageBrush x:Name="imgBrush" ImageSource=""></ImageBrush>
        </Grid.Background>
    </Grid>

This gives you a brush that will paint an image on the background. It’s presently blank, but the name ‘imgBrush’ will allow you to access it in code, and from there to set it’s contents.

STEP 2. Add your Class References

The code you’ll write in later steps uses some objects that aren’t in the default namespaces provided by the application template. You’ll see all of these at the top of the code file MainPage.xaml.cs, where each line begins with the ‘using’ keyword.

Add the following to make sure that the classes you need are available:

using System.Xml.Linq;
using Windows.Storage;
using Windows.Networking.BackgroundTransfer;
using Windows.UI.Xaml.Media.Imaging;

STEP 3. Create your LOADER and Call it

The template provides you with the page called ‘MainPage.xaml’, which is defined by the MainPage class. This, when you want to run something at start up, you can do it in the class constructor, which is called MainPage()

In here, add a line of code so that it looks like this:

public MainPage()
{  
  this.InitializeComponent();
  doLoadBG();
}

The function doLoadBG() is what will download the Bing Image and set it to the background of your app.

Here’s what it should look like. Note that it uses the async modifier as it requires some asynchronous functionality which you’ll see in the next step.

async void doLoadBG()
{
}

Step 4. Download the BING XML and get the image URL

The XML defining the Bing Image and other functionality on the start page is here: http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US

The following code will download that XML, and then get the contents of it’s ‘url’ field. This contains the relative url of the image, so prefixing it with ‘http://www.bing.com’ will get the fill url:

System.Xml.Linq.XDocument xmlDoc = XDocument.Load("http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US");
IEnumerable<string> strTest = from node in xmlDoc.Descendants("url") select node.Value;
string strURL = "http://www.bing.com" + strTest.First();

Step 5. DOWNLOAD THE IMAGE

Now that you know the absolute URL of the image, you can download it and put it into Windows Storage. This code will create a destination file in Windows Storage, if it doesn’t already exist, and will create a BackgroundDownloader object to download the image and save it to.

Uri source = new Uri(strURL);
StorageFile destinationFile;
try
{
  destinationFile = await ApplicationData.Current.LocalFolder.CreateFileAsyn("downloadimage.jpg",
      CreationCollisionOption.GenerateUniqueName);
}
catch (FileNotFoundException ex)
{
  return;
}
BackgroundDownloader downloader = new BackgroundDownloader();
DownloadOperation download = downloader.CreateDownload(source, destinationFile);
await download.StartAsync();
ResponseInformation response = download.GetResponseInformation();

Step 6. Use the Image as the background

Now that you have the image in storage, it’s simply a manner of creating a URI to it’s location on your hard drive, and using this to create a new BitmapImage object. Once you have that, you can set the ImageSource of the ‘imgBrush’ background brush you created in step 1, and the background of your app will use the Bing Image of the day on the day that it loads!

Uri imageUri;
BitmapImage image = null;

if (Uri.TryCreate(destinationFile.Path, UriKind.RelativeOrAbsolute, out imageUri))
{
  image = new BitmapImage(imageUri);
}

imgBrush.ImageSource = image;

For your convenience, here’s the complete function:

        async void doLoadBG()
        {
            System.Xml.Linq.XDocument xmlDoc = XDocument.Load("http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US");
            IEnumerable<string> strTest = from node in xmlDoc.Descendants("url") select node.Value;
            string strURL = "http://www.bing.com" + strTest.First();
            Uri source = new Uri(strURL);
            StorageFile destinationFile;
            try
            {
                destinationFile = await ApplicationData.Current.LocalFolder.CreateFileAsync(
                    "downloadimage.jpg", CreationCollisionOption.GenerateUniqueName);
            }
            catch (FileNotFoundException ex)
            {

                return;
            }
            BackgroundDownloader downloader = new BackgroundDownloader();
            DownloadOperation download = downloader.CreateDownload(source, destinationFile);
            await download.StartAsync();
            ResponseInformation response = download.GetResponseInformation();
            Uri imageUri;
            BitmapImage image = null;

            if (Uri.TryCreate(destinationFile.Path, UriKind.RelativeOrAbsolute, out imageUri))
            {
                image = new BitmapImage(imageUri);
            }
            imgBrush.ImageSource = image;
        }

And that’s all it takes! If you have any questions or comments, please use the fields below.

Great, Free, Windows Phone 8 Developer Resources

Laurence Moroney — Wed, 10 Apr 2013 14:56:37 GMT

If you’ve ever wanted to learn how to develop Windows Phone 8 apps, but didn’t know where to start, well – here you go. Here’s a great set of tutorials that will jump start you into WP8 development, as well as the complete set of sessions from Build 2012 around Windows Phone 8. Enjoy!

Windows Phone 8 Jump Start

Recently we have the Jump Start and the full content is available at Channel9. Here is the list

Mod 01a: Introducing Windows Phone 8 Development Part 1
Mod 01b: Introducing Windows Phone 8 Development Part 2
Mod 02: Designing Windows Phone 8 Apps
Mod 03: Building Windows Phone 8 Apps
Mod 04: Files and Storage on Windows Phone 8
Mod 05: Windows Phone 8 Application Lifecycle
Mod 06: Background Agents
Mod 07: Tiles and Lock Screen Notifications
Mod 08: Push Notifications
Mod 09: Using Phone Resources in Windows Phone 8
Mod 10: App to App Communication in Windows Phone 8
Mod 11: Network Communication in Windows Phone 8
Mod 12: Proximity Sensors and Bluetooth in Windows Phone 8
Mod 13: Speech Input in Windows Phone 8
Mod 14: Maps and Location in Windows Phone 8
Mod 15: Wallet Support
Mod 16: In-App Purchasing
Mod 17: The Windows Phone Store
Mod 18: Enterprise App Architecture
Mod 19: Windows Phone 8 and Windows 8 Cross Platform Development
Mod 20: Mobile Web

In fact if you go in any of the links it would have reference to all other materials.

The Windows Phone 8 Training Kit for Developers

http://www.microsoft.com/en-us/download/details.aspx?id=35777

Windows Phone 8 in Build Conference 2012

Another great resource was delivered in Build 2012 conference. The complete list is available in Phone blog and here are they

Day 1

Windows Phone in the day 1 keynote (at 1h11m21s), or see the full keynote here.
Windows Phone 8: Application Model(Andrew Clinick)
Windows Phone 8: Native C/C++ Game Development(Sam George)
Windows Phone 8: XAML Application Development(Shawn Oster)
How to Leverage your Code across WP8 and Windows 8(Andrew Byrne, Doug Rothaus)
Windows Phone 8- In App Purchase & Developer Center (Zac Woodall, Arvind Ladha, Saral Shodhan)

Day 2

Windows Phone 8: Critical Developer Practices for Delivering Outstanding Apps(Stefan Wick)
Windows Phone 8: Networking, Bluetooth, and NFC Proximity for Developers(Tim Laverty)
Windows Phone 8: Making Money with Your Application on Windows Phone(Todd Brix)
Windows Phone 8: HTML5/IE10 for Developers (Jorge Peraza, Rick Xu)

Day 3

Windows Phone 8: Maps, Location, and Background Execution for Developers(Adina Trufinescu)
Windows Phone 8: Performance & Optimization for Developers(Oren Nachman)
Windows Phone 8: Photo and Lens Apps(Eric Bennett)
Windows Phone 8: Tiles, Lock Screen, and Notifications(Thomas Fennel)
Windows Phone 8: Using C++ in your Applications (Peter Torr)

Day 4

Windows Phone 8: Using the Speech API(Avery Bishop)
Windows Phone 8: Wallet and Deals for Developers(Matthias Baer)
Windows Phone 8: App to App Communication(Sean McKenna)
Windows Phone 8: Enterprise Development(Cliff Strom, Shawn Henry)
Nokia Music Windows Phone 8 App-to-App APIs (Matthew Cooper, Steve Robbins)

Windows Store Dev Tip: Be Data Agnostic without XPath

Laurence Moroney — Fri, 05 Apr 2013 18:52:49 GMT

I’m a big fan of using XML to select nodes from a set of XML. However, the XPath classes aren’t available to Windows Store Developers as yet, so an alternative method of getting nodes easily, without needing to understand their address at development time is very valuable to me.

Linq tutorials tend to need an understanding of the makeup of the document prior to coding, but if I have a document where a node is buried in the schema, for example something like //root/TimeSeries/Days/Data/Close/Adjusted, and I just want those values, XPath is very useful because I can use the same code to get those nodes, or nodes such as //root/TimeSeries/Days/Date or something in a different part of the XML tree.

The System.Xml.Linq.XDocument has a useful ‘Descendants’ method that allows me to get all the nodes that match a particular name. It’s not as powerful as XPath, but it’s still pretty good.

So, for example, I can do something like this:

string strData = await client.getPriceHistoryAsStringAsync("MSFT", "1/1/2013", "2/1/2013");
StringReader sRead = new StringReader(strData);
XDocument xmlDoc = XDocument.Load(sRead);
var closing = from node in xmlDoc.Descendants("Close") select node.Value;

This will give me a List<> containing the values of all the nodes that match “Close” in my XML Data, a snippet of which looks like this:

<NewDataSet>
  <TimeSeries>
    <Date>2013-02-01</Date>
    <Open>27.67</Open>
    <High>28.05</High>
    <Low>27.55</Low>
    <Close>27.93</Close>
    <Volume>55565900</Volume>
    <AdjClose>27.70</AdjClose>
  </TimeSeries>
  <TimeSeries>
    <Date>2013-01-31</Date>
    <Open>27.79</Open>
    <High>27.97</High>
    <Low>27.40</Low>
    <Close>27.45</Close>
    <Volume>50530000</Volume>
    <AdjClose>27.22</AdjClose>
  </TimeSeries>

So regardless of where the <Close> values are in the schema, I get a list<> of their values with the above code, making it easy for me to chart them, and making it really easy to write a function that is data agnostic, where I can pass the node that I want to get data into the function, and use that to return the List<> of the data, like this:

private List<string> getData(string nodeName, XDocument xmlDoc)
{
    var lReturn = from node in xmlDoc.Descendants(nodeName) select node.Value;
    return lReturn.ToList();
}

I hope this is useful to you! :)

How to convert a Web Service to an Azure Cloud Service

Laurence Moroney — Thu, 04 Apr 2013 22:47:58 GMT

Here’s a video I shot demonstrating how to convert a simple Web Service (ASMX) to become a fully scalable Cloud Service running on Windows Azure. It’s a very straightforward process when using Visual Studio 2012.

Here’s the YouTube Link

Steps:

1. Create the Cloud Service as a WCF Worker Role

2. Add the method signatures of your Web Methods to the Interface Definition, and attribute them with [OperationContract]

3. Add the web methods to the service implementation, removing the [WebMethod] attribution.

4. Deploy.

The source code for the Price History Web and Cloud Services is available here: http://mediasvcp5lc0xlx242lz.blob.core.windows.net/blogstuff/PriceHistoryWebService.zip

MLB.TV App now in the Windows Store

Laurence Moroney — Thu, 04 Apr 2013 17:16:08 GMT

The Windows Store now has the app many of us have been waiting for -- the MLB.TV App. It’s a true Windows Store App, integrating some of the features that make Windows Store Applications distinct when compared with other tablet or desktop apps.

First of all, my favorite feature - it incorporates Snapped and Filled views. So, if you are a Fantasy baseball geek like me, you can track your game while you watch the games on MLB.TV.

So, for example, in filled view, the baseball app takes about 2/3 of the WinRT screen. I can snap an Internet Explorer view to the right of it to view my Fantasy baseball game and stats:

Or, if preferred, I can snap the MLB.TV player, and have a larger Browser view:

Of course the app runs in full screen too:

A really nice feature is that you can swipe up the App Bar, and pick ‘Closed Captions’ for your video:

Yep, you got it. Closed Captions for baseball in an app. That’s amazing. :)

And of course, if you want to watch just the game, and not be distracted by anything, you can go full-screen with the video:

As you can see – Closed captions work nicely in full screen too!

Full Screen video also works in Filled View:

But of course, if you change to snapped view, the app will go out of full screen and show you the video with the tiles for scores as mentioned before.

Speaking of Tiles, the App also gives you a live tile which cycles through the games that are currently in progress, with an update on their score and current inning.

When not watching video, the app gives you an attractive update display of what’s going on in the world of MLB today. Including, if you are not an MLB.TV subscriber an easy way to see which game is the free game of the day (in the below screenshot it’s the Tampa Bay Rays v Baltimore Orioles game, indicated by the gold highlight)

You can choose the desired broadcast, be it the home team, away team or just the radio feed:

It also integrates really nicely with the Windows 8 Settings Charm, allowing you to do things such as specify your favorite teams:

And if you configure favorites (mine are the Mariners, Dodgers and Red Sox), the app will bubble games involving those teams to the top of the list, and put a little ‘star’ on them to draw your attention to it. [The Dodgers aren’t playing on the day I wrote this, so only the Mariners and Red Sox games are shown]

Bottom line: If you are a baseball fan, like me, this app is a Must-Have. I have used MLB.TV app on Android, iOS, XBox and now Windows 8, and this is definitely the best of the bunch.

If you have a Windows 8 device, you could do a lot worse than download and use this free app!

Visual Studio’s Red Squigglies

Laurence Moroney — Thu, 21 Mar 2013 20:50:14 GMT

Here’s a great video for VS developers. Code snippets are an easy way to get quick answers to your app development challenges, but often Visual Studio litters the new code with red squigglies that will stop you from building.

You could fix them the hard way, but @WSDevSol 's own @robcap shares with you shortcuts to clean them up quickly and get back to what you love (which is presumably not cleaning up build errors.)

Using PDF in Windows Store Apps

Laurence Moroney — Wed, 13 Mar 2013 20:36:13 GMT

One question I get a lot is about using document types in Windows Store Apps, and most commonly the question is around how one can use PDF documents. In this tutorial, I’ll show you how.!

The Windows Store SDK doesn’t ship with any controls for using PDFs, but fortunately, the vibrant third party ecosystem has stepped up, and ComponentOne have a very nice PDF Viewer control that may be used to quickly and easily integrate documents into your Windows Store apps.

To get started, visit their download pages for WinRT XAML controls here: http://www.componentone.com/SuperProducts/StudioWinRTXAML/

They have a trial version that you can download and test, with a ‘nag screen’ that shows upon first load. After that, the control appears to be fully functional, so you can do a full eval and test before you commit to buying.

Once you’ve downloaded and installed, launch Visual Studio 2012 and start creating a Windows Store App. If you’ve never done this before, check out my tutorial here: http://www.philotic.com/?p=51

Step 1. Create a New Windows Store App

From Visual Studio, on the File Menu, select ‘New Project’ and in the dialog, select ‘Windows Store’ as the App type, create a Blank App, and call it ‘PDFViewer’ like this:

Visual Studio will create a new App for you. In the next step you’ll add the references that allow you to use ComponentOne’s software to extend your tool suite.

Step 2. Add the ComponentOne Controls

In Solution Explorer, on the top right of your work bench, you’ll see a folder that says ‘References’. Right click on this, and in the pop up menu, you’ll see an option to ‘Add Reference…’

Select this, and the ‘Reference Manager’ popup window will appear. In this you should open the Windows->Extensions folder:

You should see ‘ComponentOne Studio for WinRT XAML’ listed as shown. Click in the column to its left and make sure that the checkbox is shown and checked as above. Press OK and you’re now ready to add PDF functionality to your app.

Step 3. Add the PDF Control

The PDF control is a XAML control, so in order to add it to your App you’ll need to edit your XAML design. This is very easy to do! First, look at your Solution Explorer and find ‘MainPage.xaml’. Double click it to open it.

Then, make sure you can see the Toolbox. Do this by selecting ‘ToolBox’ on the View Menu, or pressing CTRL-W followed by X.

The PDF Viewer Control is called ‘C1PdfViewer’. You should see it in your Toolbox in the ‘C1 XAML Controls’ folder, like this:

Now, simply drag and drop this to the design surface for MainPage.xaml. You’ll see XAML that looks something like this in the XAML Editor after doing so:

<PdfViewer:C1PdfViewer HorizontalAlignment="Left" Margin="281,137,0,0" VerticalAlignment="Top" Xaml:C1NagScreen.Nag="True"/>

If there is a Margin= attribute as above, delete it. Do the same for any alignment attributes. Then, add an x:Name attribute, and set it to ‘PDF1’ so that the code looks like this:

<PdfViewer:C1PdfViewer x:Name="PDF1" Xaml:C1NagScreen.Nag="True"/>

This will allow the PDF Viewer to take up the entire size of the app. Of course when you build your app, it doesn’t have to be full screen, and you can lay it out as you like. The x:Name attribute sets the name of the control as you will refer to it in code. If you don’t use PDF1, as shown, remember your setting – you’ll need it in the next step.

[Note that the Xaml:C1NagScreen.Nag tag will go away with a registered edition of the controls. Delete it in the trial and it will automatically come back.]

In the next step, you’ll add a PDF to your solution, and write code to load it.

Step 4. Load a PDF Document

To make things a little simpler, you’ll add a PDF document as an embedded document to your solution. You’ll load this document directly when the app starts up. It uses a System.IO.Stream to load the document, so adapting this code to load a PDF from the file system, or from a remote server should be very easy. If you need a follow-up article to show how to do this, let me know in the comments section below.

To add a document, right click on the project, and select the ‘Add’ menu, followed by the ‘Existing Item..’ entry. This will give you a file dialog that you can use to select the PDF. Next, you should make sure that the PDF you just added is treated as an Embedded Resource. Select it in ‘Solution Explorer’ and look at the ‘Properties’ window. The ‘Build Action’ setting should be ‘Embedded Resource’ like this:

Now, writing code to load the PDF is very straightforward.

Open MainPage.xaml.cs. At the top of the page, with the rest of the ‘using’ statements, add:

using System.Reflection;

Then, update the Public MainPage() function to look like this:

public MainPage()
{
  this.InitializeComponent();
  Assembly asm = typeof(MainPage).GetTypeInfo().Assembly;
  Stream stream = asm.GetManifestResourceStream("PDFViewer.LegendOfTheLocust_Final_3D.pdf");
  PDF1.LoadDocument(stream);
}

This code gets a reference to the assembly (the compiled app) and pulls the PDF file out of it as a stream. It then calls the LoadDocument method of the PDF control to load this stream. If you have a stream already, for example loaded from a remote server, you’ll only need that code and the PDF1.LoadDocument.

In the next step, you’ll see how this runs, using the Windows Simulator, where you can explore its workings with multi-touch, zoom and more.

Step 5. Running and Testing the PDF Viewer

If you aren’t using a touch screen or tablet for development, a good way to test your app is to use the Windows Simulator. You can do this by changing your run target from ‘Local Machine’. Look at the toolbar in Visual Studio, and you’ll see the run control with the run target beside it:

In this case, it clearly says ‘Local Machine’. Drop the little arrow beside ‘Local Machine’ down, and you’ll see a menu containing Local Machine, Remote Machine and Simulator. Select Simulator, and you’ll see this:

Now, press the green ‘Run’ button, and the simulator will launch with your app, and your PDF ready to read.

You can see the default view, with the tablet in landscape mode, and the PDF centered according it’s aspect ratio:

When you change to landscape mode, the aspect ratio changes for better readability:

The PDF control allows you to zoom in and out of the document using pinch gestures. These are also supported in the emulator. Instructions on how to use the emulator to do that are here: http://msdn.microsoft.com/library/windows/apps/hh441475.aspx.

Here’s an example of having zoomed out of the document using a pinching gesture:

As you can see it’s very straightforward to add PDF support to your Windows Store Apps using ComponentOne’s control.

If you have any questions, comments or feedback, let me know in the comments area below.

Source Code for this article can be downloaded here.

[Sorry, book not included, but you can The Legend of The LocustThe Legend of The Locustbuy it on Amazon, but there’s a different, fun, PDF in the download for you to read :)]

Developers – Get Halo 4, and Windows Store Registration for Free!

Laurence Moroney — Tue, 12 Feb 2013 20:23:22 GMT

Developers, did you know that if you build a Windows 8 or a Windows Phone 8 app, and publish it during the registration period (December 20, 2012 – February 28, 2013), you are eligible to get your fees reimbursed and a copy of Halo 4 for Xbox 360?

Details are at: http://www.generationapp.com/ultimateexperience#fbid=49Ll8brAFYB

Publishing your apps in these stores will give you the ability to make some serious coin from Windows 8 and Windows Phone users. And now you can do it at no risk – your fees will be reimbursed.

To get started, you can follow these tutorials:

Getting Started with Windows 8 Development: http://www.philotic.com/?p=51

Getting Started with Windows Phone Development: http://www.philotic.com/?p=55

I’ve also got lots of hands-on labs and tutorials that you can follow. Ping me and I’ll hook you up.

Build a Windows Phone 8 App for Stock Market Analysis and Future Prediction

Laurence Moroney — Mon, 11 Feb 2013 21:00:46 GMT

In this article I’ll take you, step by step, through everything you need to do to build, run, and test a real-world Windows Phone 8 app that’s useful while also being fun and interesting. You’ll build an app that downloads data about the trading prices for a stock ticker that your user enters, performs an analysis on the current price of the stock relative to its historic price using a ‘trading bands’ technique, makes a judgment on the purchase opportunity of the stock at the moment, and renders this as a color.

Before you get started, you’ll need a Windows 8 development environment set up and ready to go. This article ‘Getting Started with Windows Phone 8 Development’ is a good place to start. It guides you through getting the tools and installing and making sure that they work.

Step 1. Create the UI

For the tutorial, I’m keeping the UI of the app as simple as possible. It’s up to you to replace this with something a bit more polished! The UI will simply be a TextBox where the user can type the ticker for their desired stock, a button that they will press to begin the action of downloading and analyzing the price history for the stock, and a rectangle where the color for the analysis will be returned.

Note: Generally stock applications have a primitive color visualization of red or green, where red means the stock price has gone down in the last trade, and green means it has gone up. This is not a good indicator of whether it’s a good opportunity at this moment to purchase the stock. The app you’ll build in this article is much more sophisticated – analysing historic trends, and making a judgement as to whether the current price is a good opportunity to buy (green, with higher intensity indicating better opportunity) or a good opportunity to avoid buying (or sell if you have it), in red, with a higher intensity meaning that it’s time to avoid, or sell.

Create a new Windows Phone 8 app in Visual Studio, and edit the ContentPanel grid in MainPage.xaml to have this code:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Analyze" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click_1" Margin="13,83,0,0"/>
            <Rectangle x:Name="heatView" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="306" Margin="25,150,0,0" Stroke="Black" VerticalAlignment="Top" Width="406"/>
            <TextBox x:Name="txtTicker" HorizontalAlignment="Left" Height="72" Margin="13,11,0,0" TextWrapping="Wrap" Text="MSFT" VerticalAlignment="Top" Width="402"/>

        </Grid>

You’ll see that Button has a click event called ‘Button_Click_1’, so we’ll see how to implement the code behind that in the next step.

Step 2. Download the Price History Data

When the user presses the button, the App will download Price History data for the stock indicated by the ticker that they entered in the TextBox. The Windows Phone 8 SDK provides a ‘WebClient’ class for this functionality. It’s in the System.Net namespace.

WebClient gives you an asynchronous download mechanism whereby you tell it to download data, and it calls you back once the data is done.

The data itself will come from Yahoo in CSV (Comma Separated Value) format. To get the data for any stock, you simply call the following URL (for example for Microsoft MSFT):

http://ichart.finance.yahoo.com/table.csv?s=MSFT

So, upon the button press, you’d have the following code:

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            WebClient wc = new WebClient();
            string strTicker = txtTicker.Text;
            wc.OpenReadCompleted += wc_OpenReadCompleted;
            wc.OpenReadAsync(new Uri("http://ichart.finance.yahoo.com/table.csv?s=" + strTicker));
           
        }

Now, upon pressing the button, your phone will go out and download the CSV data for the stock, and call back to wc_OpenReadCompleted when it’s done. You’ll see how to parse the data from that in the next step.

Step 3. Parse the Price History Data

The data you get back from the Yahoo Price History service is Comma Separated Values which look like this:

Date,Open,High,Low,Close,Volume,Adj Close
2013-01-31,27.79,27.97,27.40,27.45,50530000,27.45
2013-01-30,28.01,28.19,27.76,27.85,43580

The first line in the file is the columns, where each value is divided by a comma. Each line then has the corresponding data for that column. So, in this case there are 7 columns (Date, Open, High, Low, Close, Volume, Adjusted Close), and each line of data has 7 values, one for each of the columns.

This makes parsing the data quite easy. So, for example if you want the Adjusted close price for the stock, you simply read each line as a string, split it based on the ‘,’ character, and take the 7th item. It’ll be a string, so convert it to a number.

One way to do this is as follows:

Create a List<double> to hold the closing prices:

List<Double> ClosingPrices = new List<double>();

I put this as a module level variable so it can be shared among functions.

Then, populate this with the closing values upon wc_OpenReadCompleted firing:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
  // Clear the List<> of closing prices
  ClosingPrices.Clear();
  // We're going to keep a total of all stock closing prices to be used later in the analytics
  nTotal = 0;
  // WebClient returns a Stream, so load this into a Stream variable
  System.IO.Stream yData = e.Result;
  // Read the stream with a stream reader
  System.IO.StreamReader sRead = new System.IO.StreamReader(yData);
  // The first line is the headers. Read it and throw it away 
  string strHeaders = sRead.ReadLine();
  // Read the first line of data
  string strValues = sRead.ReadLine();
  int rowsCounted = 0;
  // Read 120 lines of data (4 months) unless there are less than 4 months worth
  while ( (strValues != null) && (rowsCounted < 120) )
  {
    // Split the line of data based on the comma character
    string[] Columns = strValues.Split(',');
    // We count from zero, so even though the character is in the 7th column, it's element 6 in the array
    Double closing = Convert.ToDouble(Columns[6]);
    // Add it to Closing Prices
    ClosingPrices.Add(closing);
    // Update the total with today's closing price
    nTotal += closing;
    // Read the next line
    strValues = sRead.ReadLine();
    // Update the rows we've counted
    rowsCounted++; 
  }

I’ve commented each line to make it clear what it does, but it’s pretty simple – it simply reads through the first 120 lines of the data, pulls the 7th column out, converts it to a double and puts it in the List<double> you created earlier. You could, of course, do more than 120 lines (approximately 4 months worth of data), to get a better historic picture, it’s up to you.

Once you have the data, it’s time to analyze it. You’ll see that in the next step.

Step 4. Calculate the trading bands.

One method of stock price analysis that is surprisingly reliable for judging performance is to take a look at a stock’s trading bands over time. These bands are drawn up based on its lows and highs, and will typically give you a good idea for how the stock will perform in the future. Like with everything else, they’re just an indicator, so please don’t consider this to be investment advice!

A picture’s worth a thousand words, so here’s an example of trading bands calculated using the ‘bollinger band’ technique:

The concept is simple – if the current price is at the bottom of the band, it’s generally a good time to buy. If it is near the top, it’s generally a good time to sell. So, for example, this stock was at around 700 in mid September, which would have been a really good time to sell according to this analytic. And it works out right, because within 2 months it had fallen about 20%. Likewise in mid November it was at about 520, and near the bottom, and within a couple of weeks it was close to 580, and near the top, which is a nice profit one could make in 2 weeks!

These bands are surprisingly easy to calculate – the upper band is 2 standard deviations above the moving average and the lower band is 2 standard deviations below it.

This app isn’t going to calculate the full trading band over time, but just what the values would be today, so it takes the average stock price over the last 120 days (or however many days it read), and figures out what the high and low band for them would be.

Here’s the code:

// We kept a total, so the average is the total divided by the amount
Double nAverage = nTotal / ClosingPrices.Count();

// Calculate the standard deviation
Double sum = 0.0;
for (int i = 0; i < ClosingPrices.Count; i++)
{
  sum += Math.Pow(ClosingPrices[i] - nAverage, 2);
}
Double nDeviation = Math.Sqrt(sum / (ClosingPrices.Count - 1));

// Top bollinger is Average + 2xSTD
Double bollingerTop = nAverage + (2 * nDeviation);
// Bottom bollinger is Average - 2xSTD
Double bollingerBottom = nAverage - (2 * nDeviation);

Now that we have the trading envelope for today, and we know today’s closing price, let’s figure out where we are relative to the bottom band. Let’s normalize this so that it’s a value between 0 and 1, where 0 means we’re right at the bottom of the band, and 1 means we’re right at the top.

// Top bollinger is Average + 2xSTD
Double bollingerTop = nAverage + (2 * nDeviation);

// Bottom bollinger is Average - 2xSTD
Double bollingerBottom = nAverage - (2 * nDeviation);

// Today's price is the first one we read
Double bCloseToday = ClosingPrices[0];

// Range is the width of the envelope
Double range = bollingerTop - bollingerBottom;

// Value is how high we are above the bottom
Double value = bCloseToday - bollingerBottom;

// If we device the value by the range, we have a normalized indicator of where we are in the envelope
Double score = (value / range);

So now that we have the score, we can turn that into a color, you’ll see that in the next step.

Step 5. Visualizing the Score with Color

We want to use Green to show that today’s price is good for buying, and Red is bad for buying (or conversely good for selling).

Colors are represented using RGB values, with R=Red level, G=Green level and B=Blue level. Each level has 256 values in 24-bit color, so the ‘brightest’ red will be 0xFF0000, and the ‘brightest’ green will be 0x00FF00.

So, if our score for today’s stock price relative to the trading envelope is 0, we are at the bottom of the band, so we should paint the rectangle 0x00FF00, and if it is 1, we are at the top of the band, and we paint the rectangle with 0xFF0000.

Of course we are likely in between the two, so we want to map our current value to something between 0xFF0000 and 0x00FF00 to give an ‘intensity level’.

Here’s the code to do this:

// This is the bottom value (Green)
Double heatVal = 0x00FF00; // (0x00FF00)

// This is the heat range, i.e. the difference between red and green
long heatRange = 0xFF0000 - 0x00FF00; // Red is 0xFF0000, Green is 0x00FF00. Subtract one from the other to get the range.
            
// Our value is then the bottom value plus the amount of the range we should move 'up' by
// So, for example if our score was 0, we'd stay at green. If our score is at .5 we'd move up to the half way point
// between Red and Green, which would be Green + half the range between red+green etc.
heatVal += heatRange * score;

// Now that we have our color, how do we turn it into a brush?
long heatValBits = (long)heatVal;

// Here's the red value -- shift the bits 0x10 to the right and AND them with FF
byte redByte = (byte) ((heatValBits >> 0x10) & 0xFFL);

// here's the green value -- shift the bits 0x08 to the right and AND them with FF
byte greenByte = (byte) ((heatValBits >> 8) & 0xFFL);

// Now we know what the Red and Green attributes for our desired color are, we can use a Color object to create them
Color heatColor = Color.FromArgb(255, redByte, greenByte, 0);
// And then turn that into a brush
Brush heatBrush = new SolidColorBrush(heatColor);
// And then fill the rectangle with this brush
heatView.Fill = heatBrush;

And that’s everything you need to build this app. Below are a couple of screen shots of it in action today (February 11, 2013). Let’s see if it’s advice turns out to be correct! :)

MSFT = Bright Green = Strong Buy

IBM = Brightish Red = Avoid/Sell

Goog= Dark Green = Buy, but not strong buy.

This is for educational use only. Do not buy or sell stock based on this app.

You can download the source code here.