Share via

Building a Windows 8 App: Phase 1

  • Article

Hello there! So in my last post I mentioned that I was about to start building my first Windows 8 app, and that I did! Today I'm going to give you a step by step on what I've done with my app. This could be helpful for anyone else out there who may be thinking about/or already making their first Windows 8 app. 

Step 1: Get a handle on the tools
So I had all these glorious and wildly creative ideas for what I wanted my app to be, and I thought to myself "how hard can Visual Studio be, really?" I tried dive right in and start building, but I quickly realized that the time I was taking to figure out each little step was really adding up. I decided to regroup, and start at square one. A coworker of mine who had also just made an app, insisted that the "Hello world" tutorial on the Windows Dev center was the way to go, so I decided to try it out.
I followed through each and every step on there, and well, I'm convinced. It really does provide you with a great understanding of the fundamentals of Visual Studio, and how to use XAML and C# for your app. 

Step 2: Pick an idea and get the basic functionality working
I decided that I wanted to make an app that would incorporate my love for music, and thus I decided to build a piano app.

  • Firstly, I found an image of a piano on the interwebs to use as a placeholder. Then, I found piano sounds that I could use while trying to get the functionality going.
    ****Be sure to save each sound file in the 'Assets' folder of your project.****  

  • I then created a Media Element for one note:
    <MediaElement x:Name="C" Source="Assets/soundfile.wav" AutoPlay="False" Height="0" Width="0" /> 

  • Next I created a Button and placed it exactly over one of the piano keys, so that tapping this button would emulate how you would press a piano key. I made the Opacity = 0 so that they can't be seen.
    ****I found editing buttons in Blend to be easier****  

  • Create a handler for the 'Tapped' event and then in the MainPage.xaml.cs put in:

     private void Tap_Note(object sender, TappedRoutedEventArgs e)
        {
            Note.Play();
        }

     

With this, you should have one piano note that plays a sound when tapped! Hope this helps some of you get started, will post next updates soon.

Coming Up: More on Sounds, Copyrights, and Polishing Your App.

Comments

  • Anonymous
    August 16, 2013
    Nice post! This is really helpful for me as a new user coming to XAML/C# in Blend/VS. If possible, could you post some screenshots as well? It'd be really helpful to know if I'm on the right track. Keep up the good work!

  • Anonymous
    August 21, 2013
    I sure can! Thanks for stopping by, check back for them soon!

  • Anonymous
    November 29, 2013
    Great post. Very Easy tutorial. Thanks for sharing. #<a href="http://codeinclude.blogspot.com">CodeInclude</a>