How Blend made creating a Windows 8 app in 24 hours easy.

Having never used Blend before I was amazed how fast and easy it was to create my simple app

The source code for this Windows 8 app and many others can be found on my GitHub ( https://bit.ly/17NwuAw )

After joking with a friend of mine, we came up with a fun little app that would tell you your fortune, we called it “Cookie fortune”. This oracle disguised as a chocolate chip cookie was something I thought would be easy to implement and would be a fun app to make.

• Why I built my app with Blend (instead of Visual Studio)
• Adding the artwork
• Adding the Fortune cookie logic
• Adding Share
• Adding Snap view

Why I built my app with Blend (instead of Visual Studio)

After deciding on a language, C#, my next step was research. I was looking for the fastest way to create the XAML layout I wanted for my app. This is where I bumped into Blend. I remembered briefly looking at Blend a few years ago but never really sat down and used it. Reading through the documentation I quickly discovered that it had some awesome features that should really speed up the design process. One of the biggest ones that jumped out at me was the fact that it’s a visual editor, what you see is what the user will see. I loved this because it means less compiling and running just to see simple changes. Another feature that also helps in this regard is Interactive mode. Interactive mode lets you design your apps in states that would normally only be available at runtime. No more guessing how snap view would make my app look. Add in the ability to drag and drop Windows app controls onto the design surface and I was falling in love. I was even more delighted when I realized Blend for 2012 was already installed (It’s comes with Visual Studio 2012 including Express for Windows 8 and free trial versions). To get a better feel for the tool I decided to follow along with the example “Design your first Windows Store app in Blend” (https://bit.ly/FirstWindowsApp) on the Windows Dev Center website. Within 30 minutes I had completed it. This made my confidence soar. I was ready to create my Cookie Fortune app with Blend.

Below are some highlights from the development of my app, but in no way is it meant to be a step by step guide. Feel free to download the code for a more complete picture.

I started by creating a new project and selected the blank app, because of the simple nature of my app it seemed like the best fit.

  Adding the artwork

My next step was to change the background image to one that I had created. I imported it as an existing item Project>Add Existing Item or Ctrl+i. Then I placed the newly imported asset in the design view, the image below shows the result.

I then added three more images, one of the cookie whole and the two pieces of the cookie when it was broke.

My plan was to hide the two broken pieces when the cookie was being shown then to hide the cookie image and show the broken cookie pieces when the user clicked or tapped. This gives the illusion that the cookie breaks in two on the user’s input. The image below shows the cookie in its whole state. 

Adding the Fortune cookie logic

I completed the cookie’s breaking ability by writing some basic lines of code. One big thing to note here is I never had to leave Blend to write the code, I actually wrote it right inside of Blend’s code editor.

Below is the code I used to make this happen.

  private void Grid_Tapped(object sender, RoutedEventArgs e)
        {
            if (isFirstTap)
            {
                if (ApplicationView.Value != ApplicationViewState.Snapped)
                {
                    //Hide the whole cookie
                    CookieWhole.Visibility = Visibility.Collapsed;
                    //Display the broken pieces of the cookie
                    CookieBrokenLeft.Visibility = Visibility.Visible;
                    CookieBrokenRight.Visibility = Visibility.Visible;
                    isFirstTap = false;
                }
            }            
            else
            {
                //Display the whole cookie
                CookieWhole.Visibility = Visibility.Visible;
                //Hide the broken pieces of the cookie
                CookieBrokenLeft.Visibility = Visibility.Collapsed;
                CookieBrokenRight.Visibility = Visibility.Collapsed;
                isFirstTap = true;
            }
        }
``` 

At this point I was on a roll I had dragged a dropped a few images wrote a few lines of code and in extremely little time I had a pretty cool breakable cookie. Next it was time to make the cookie dispense some wisdom. I quickly gathered together some fortunes from lists I had found on the web. I picked XML as my method of storing these fortunes and found a great example and information on how to parse the XML file using the XmlReader Class on the MSDN library website ([https://bit.ly/KE9Ges](https://bit.ly/KE9Ges "https://bit.ly/KE9Ges")). Below is a sample of the code I wrote to parse the fortune XML and add it to a the “fortune” list.

``` csharpcode
             string fortuneString = null;

            // Create an XmlReader
            using (XmlReader reader = XmlReader.Create("Assets//Fortunes.xml"))
            {
                while (reader.Read())
                {
                    switch (reader.NodeType)
                    {
                     
                        case XmlNodeType.Text:
                            fortuneString = reader.Value;
                            fortunes.Add(fortuneString);
                            break;
                       
                    }
                }   
            }

Adding Share

After writing a few more lines of code to make the fortune text appear when the cookie was in its broken state and disappear when the cookie was whole, I now had a fully functioning fortune telling cookie. I could hardly believe how quick I managed to get to this point. Since it was moving along so quickly I decided to add a feature. I thought wouldn’t it be great if you could share your fortune with others. With Windows 8’s share feature this was a snap. While still in Blend I added the following code to easily add the share function to my app.

         private void RegisterForShare()
        {
            DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
            dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,
                DataRequestedEventArgs>(this.ShareTextHandler);
        }

        private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)
        {
            DataRequest request = e.Request;
            request.Data.Properties.Title = "Cookie Fortune";
            request.Data.Properties.Description = "Share your fortune with your friends.";
            request.Data.SetText(FortuneDisplay.Text);
        }

  Adding Snap view

My app was almost ready for the store it only needed one more feature to be complete and to pass the Windows Application Certification Test, snap view. Again to my delight Blend made this unbelievably easy. Like I said in the beginning, Blend has a very useful feature called Interactive mode. With interactive mode you are able to design your application in various states like snap, filled and full screen. Check out this link if your would like to know more about how to use Interactive mode (https://bit.ly/11xje4d). The image below is a screen shot of Blend while in the app is in the “snap” state.

As you can see creating a simple app is very fast using this powerful tool. In under 24 hours I was able to create my application, add custom layouts for the various states and even add the share contract feature. Blend can truly speed up your development time, I know I will be using it for designing my future applications.

Check out this great documentation for more information on getting started with Blend( https://bit.ly/18ESHSH ) and as an extra challenge why not try using this as a starting point for creating a “Magic 8-ball” style application.

Happy Coding!