Rafal Kwiek's World at Microsoft

Achieve What You Can Imagine. Join the UK’s Edition of Imagine Cup 2011 Competition!

2010-12-02T11:02:03Z

www.imaginecup.co.uk

Hello World in Windows Phone 7! The 1st Screencast in a Brand New Series!!!

2010-11-26T18:19:35Z

Developers! Developers! Developers! We hope you enjoy this first screencast in a brand new series about developing apps for Windows Phone 7. We’ve just posted the first three tutorials of the series here on this blog – and the new ones are on their way! Please stay tuned!!!

If you liked our tutorials you may also want to check out the newly released book on the subject: Programming Windows Phone 7 by Charles Petzold [Free Thousand-Page E-book Now Available!]

Student Developers!!! Remember, all the software you will need for developing apps for Windows Phone 7 (and much more!) can be downloaded from Microsoft DreamSpark (www.dreamspark.com). Check it out!

Finally, why not use your new found skills to enter the Imagine Cup? By taking part in this World's Premier Student Technology Competition you can make a big difference to the world we live in! Find out more here or click the below image!!! We’ve also got an official website: www.imaginecup.co.uk

Developing applications for Windows Phone 7 – Hello World in Silverlight

2010-11-26T16:52:36Z

In this article we are going to create a simple “Hello World!” program using Silverlight.

Step # 1:

Run “Microsoft Visual Studio 2010 Express for Windows Phone” by clicking its icon from the Start menu (follow: Start > All Programs > Microsoft Visual Studio 2010 Express). Wait for the IDE to load.

Step # 2: When prompted for a registration key click on the “Obtain a registration key online” button and follow instructions (recommended), alternatively click on the “Close” button to continue using an evaluation version of the IDE.

Step # 3: You are now on the Start Page of the IDE.

Step # 4: Let’s start by creating a new project, click on the “New Project…” link.

Step # 5: In the next window, make sure the “Visual C#” option in the left-side menu is selected and then choose the “Windows Phone Application” from the list of available project templates.

Step # 6: Set the name of the project to be: “HelloWorldinSilverlight” by editing the “Name” textbox. Next, click on the “OK” button.

Step # 7: The new project is created and you are presented with the main view of the IDE. By default the screen is divided into three parts: the leftmost is the Design pane (allows you to use the visual editor to generate XAML code for designing the UI), the middle one is the XAML pane (allows you to manually edit the markup code), and the rightmost is the Solution Explorer (which allows you to easily navigate through the project’s files).

Step # 8: You are now only one step from trying out your first app for Windows Phone 7 in action – but first let’s change the title under which your application will be displayed in the list of available applications. To do this, locate and double-click the “WMAppManifest. xml” file from the Solution Explorer.

Step # 9: In the displayed file contents, locate and edit the shaded part of the code. Change the title of the application to be: “Hello World! :-)”.

Step # 10: You are now ready to run your application! Press the F5 button on the keyboard to get started and launch the Windows Phone Emulator; alternatively you can select: “Debug > Start Debugging” from the IDE’s main menu. Wait for the emulator to load up, then you will be presented with the virtual WP7 device’s desktop, followed by your application in action.

.
Did you notice a small floating menu in the upper right corner of the emulator? You can use it to perform the following actions (from the top): exit the emulator, minimise the emulator, change the orientation of the emulator (rotate) to the left, change the orientation of the emulator (rotate) to the right, resume the original size of the emulator, change the settings for the zoom level of the emulator.

Step # 11: Now, check how your application is displayed in the list of available applications. To do this you will need to click on the back/exit button in the form of a left arrow. What you will see should correspond to the image shown below.

Step # 12: Now it’s time to make some changes to the UI of your application (after all – we are heading towards the goal of this article: displaying a string of text on the screen). We are going to change the default application title & page title of your application. To do this you could either use the visual editor (please refer to the image shown below) by right-clicking the required text block and selecting “Properties” – or edit the XAML markup code manually.

Step # 13: In the XAML pane locate and edit the shaded parts of the code. Change the “ApplicationTitle” to be: “Hello World! :-)” and the “PageTitle” to be “Welcome”.

Step # 14: Run the emulator to see the results of the changes.

.
Did you notice that all the changes made to the XAML pane are automatically reflected in the Design pane? Hence you can either use the visual editor or edit the XAML markup code manually to design the UI (please refer to the images shown below). The Toolbox provides an extensive number of Windows Phone Controls to choose from.

For your convenience, at any time – you can easily switch between the Design and XAML panes or swap them in place by using the following toolbar: (usually located in the upper-right area of the Design pane’s scrollbar).

You can also use another toolbar:(usually located in the lower-left area of the Design pane’s scrollbar) to split the view in one of the following modes – Vertical Split, Horizontal Split, or even Collapse Pane.

Consider using the following combination to switch to the Full Screen mode: Shift + Alt + Enter.

Step # 15: Let’s now display a string of text on the screen! Having the contents of the “MainPage.xaml” file displayed in the XAML pane, locate the following part of the source code and add the shaded markup. As you can see you can effectively use the “Text” parameter to specify the contents of TextBlocks on the screen.

At all times, you can watch the changes as they are being made by using the Design pane (shown below).

Step # 16: Run the emulator to see the results of the changes.

Step # 17: Now, let’s think about applying some text formatting and producing the result shown below.

Step # 18: To do this – in the XAML pane locate the following part of the source code and add the shaded markup. As you can see you can effectively use the “HorizontalAlignment” & “VerticalAlignment” parameters to specify the position of TextBlocks on the screen.

.
Again, you can watch the changes as they are being made by using the Design pane (shown below).

Step # 19: It’s time now to use the newly acquired knowledge to display a single, formatted string of text on the screen.

Step # 20: In this final step – in the XAML pane locate the following part of the source code and edit it to contain only the shaded markup. As you can see you can effectively use the “FontFamily”, “FontSize”, “FontWeight” & “Foreground” parameters to specify the formatting of TextBlocks on the screen.

Congratulations! You have now completed all the activities related to this article.

What have we done?
In this tutorial, you have been introduced to creating a simple “Hello World!” program using Silverlight. In the next one – you’ll learn to create the same application but this time using XNA. Please stay tuned!

Developing applications for Windows Phone 7 – Download and install the tools

2010-11-26T14:57:57Z

In this article we are going to guide you through the process of obtaining the necessary tools to start developing apps for WP7 (namely – the Windows Phone Developer Tools, WPDT).

Step # 1: Navigate to the App Hub

We are about to download the required software from the official website for Windows Phone & Xbox 360 developers. Navigate to the following URL: http://create.msdn.com. Once there, locate and click on the “Download the free tools GET STARTED NOW” link on the left-hand side of the page.

Step # 2: Run the Setup

This in turn takes you to another page (“getting started guide”) providing a brief overview of all the resources available to help you get started. For now, we are only going to concentrate on obtaining the WPDT – feel free to explore the rest of the resources in your own time. Next, locate a part of the page entitled: “download the free tools” and click on the “install now” link to run the setup.

Note: You may wish to refer to the Release Notes prior to progressing with installing the software.

In the setup window please take your time to review the contents of the license terms – once you’re finished click on the “Accept” button.

In the next window select the “Install Now” button. Alternatively – click on the “Customize” button to change the optional settings for the installation.

Step 3: You’re done!

Wait for the setup to download and install the required components. Once it’s finished click on the “Run the Product Now” button to launch Microsoft Visual Studio 2010 Express for Windows Phone!

What have we done here?
Congratulations, you’ve now installed all the tools you’ll need to build applications for Windows Phone 7. Next we’ll build something useful – a “Hello World!” application. Please stay tuned!

Developing applications for Windows Phone 7 – Intro

2010-11-26T14:41:27Z

If you are a student with developer aspirations, passion for the newest technology, who enjoys taking new challenges and wants to engage with innovative technology “first hand” – whilst furthering his/her skillset and making money from it at the same time – then you’ve come to the right place!

This series of posts has been specially designed for people like you; it offers a unique opportunity to take part in an adventure that will introduce you to the fascinating world of Windows Phone 7, and let you see for yourself that developing applications for this platform is both challenging and fun!

Throughout the course of this blog you will be introduced to the key aspects of technology behind Windows Phone 7 Series, equipped with the state-of-the-art developer tools, and guided step by step on the journey to quickly get started with developing fab apps.

Take a moment to check what’s coming (to be updated as we progress...):

• Installing the tools.
• Hello World in Silverlight.
• Hello World in XNA.
• Creating a Web Browser in Silverlight.
• A Simple Calculator in Silverlight (I).

Our promise: this journey will be engaging, stimulating, challenging and fun at the same time – what’s even better, when you’re finished you can apply the newly acquired knowledge to make some real money from selling your apps on the Windows Phone Marketplace! Want to know more? Keep on reading…

So what does it take? A combination of passion, creativeness, questioning mind, and imagination on top of that would be helpful… Ready? Fasten your seatbelt – here we go!

What is the Imagine Cup? Join the UK’s 2011 Edition Now!

2010-11-25T16:41:47Z

Imagine a world where technology helps solve the world’s toughest problems.

The above is the official theme of this year’s edition of Imagine Cup, and that’s right – by taking part in this World's Premier Student Technology Competition you can make a big difference to the world we live in!

Your project will target one of the world’s toughest problems identified by the United Nations in its Millennium Development Goals.

What’s in it for you?
With prizes including all expenses paid trips to New York and a total cash pot of more than $200,000, as well as the opportunity to solve the world’s biggest problems and give your career a massive boost, it’s easy to see why more than 300,000 students around the world enter the Imagine Cup.

Why aren’t you one of them yet?

You can compete in one of the two UK’s Competitions: Software Design & Embedded Development.

Interested? Find out more and step up to the challenge at www.ImagineCup.co.uk !!!

Programming Windows Phone 7 by Charles Petzold [Free Thousand-Page E-book Now Available!]

2010-11-11T16:00:00Z

If you recall a recent article entitled “Microsoft Windows Phone 7 Resources” that listed all the resources publicly available on the subject to date – you should know that it’s gained quite a high popularity across the posts on this blog.

This clearly indicates how high demand is out there for the latest info about Windows Phone 7 application development – and that developers of all levels and backgrounds can’t wait to get their hands on developing for this great new platform!

Developers! Developers! Developers! Watch out for a brand new series of blog articles about developing applications for Windows Phone 7 (along with screencasts) to appear on this site very soon! We’re really excited to help you get started and guide step by step through building your own apps for this platform in no time!

In the meantime – we’ve been waiting for the final version of this fantastic book by Charles Petzold for quite some time now, and here it is! It comes as a free, thousand-page e-book that you can use to explore the world of programming for WP7 – check it out!

– You can download the book in PDF: Programming Windows Phone 7 (Book)
– In addition to the sample code in ZIP: Programming Windows Phone 7 (Sample Code)

For the impatient – here is the Table of Contents at a glance:

Part I The Basics
- 1 Hello, Windows Phone 7
- 2 Getting Oriented
- 3 An Introduction to Touch
- 4 Bitmaps, Also Known as Textures
- 5 Sensors and Services
- 6 Issues in Application Architecture
  .
Part II Silverlight
- 7 XAML Power and Limitations
- 8 Elements and Properties
- 9 The Intricacies of Layout
- 10 The App Bar and Controls
- 11 Dependency Properties
- 12 Data Bindings
- 13 Vector Graphics
- 14 Raster Graphics
- 15 Animations
- 16 The Two Templates
- 17 Items Controls
- 18 Pivot and Panorama
  .
Part III XNA
- 19 Principles of Movement
- 20 Textures and Sprites
- 21 Dynamic Textures
- 22 From Gestures to Transforms
- 23 Touch and Play
- 24 Tilt and Play

Enjoy!

Microsoft WebMatrix Beta 3 is here!

2010-11-11T10:00:00Z

“Everything you need to build Web sites using Windows. Small, simple, and seamless.”

That’s right – the latest version of this simple but yet powerful web development tool is ready for download.

Current users: all you need to do is to re-run the Web Platform Installer (the current version is 3.0) and upgrade the product.

New users: if you’re new to WebMatrix welcome! We’ve got a whole series of articles walking you through getting started with WebMatrix on this very blog. You can find them all here.

Remember: we’re constantly working on developing new content so it’s always up to date – so definitely stay tuned and let your friends now as well! Thank you.

Microsoft Professional Developers Conference (PDC) 2010

2010-11-10T16:00:05Z

You may recall an article about the event published at Microsoft UK Student Blog the other day. Since 1991, the PDC has been the centre for students, developers and architects to gather and hear about the next generation of Microsoft technologies – this year was no exception and everyone was welcome to join. How come…? Well, for the first time in history, the Microsoft Professional Developers Conference (PDC) 2010 was streamed live from the Microsoft Campus in Redmond, USA – reaching a global audience of developers by organising some 200 local PDC watch events worldwide.

This exclusive broadcast was made possible by using a new online player from Microsoft incorporating the latest, cutting-edge technology including Silverlight, Windows Azure, and Town Hall.

The event kicked off on 28th October punctually at 9am in the USA (GMT-7) which is 5pm in the UK (GMT+1) and lasted until 5:30pm (1:30 am in the UK) – for whole two days delivering sessions in HD quality on state of the art technologies from Microsoft, spanning: Client & Devices, Cloud Services, Framework & Tools, Channel 9 and much more!

The Academic Team at Microsoft UK being always committed to providing students with the best quality programs and initiatives, decided to come forward and host live streaming sessions at 8 universities throughout the country (including London South Bank University, University of Nottingham, King's College London, Cambridge University, University of Surrey, University of Hertfordshire, Manchester University, University of Southampton) in addition to Microsoft’s HQ in Reading – allowing students interested in leading edge technologies and professional developers to come together and watch Microsoft Executives (Steve Ballmer and Bob Muglia) delivering their keynotes at the beginning of the event.

Throughout the event, the local Microsoft UK staff partnered with NACUE members and held an interactive Q & A session (in person and via Twitter: #UKPDC10) on the content around PDC10 and “all things Microsoft for students” in general. We were amazed by the level of engagement with the audience and the smart questions and true interest in the subject coming from the students. One of them, at Nottingham University even ended up demoing a Windows Phone 7 device to anyone who would be interested to see – fantastic!

From my perspective, joined by James Marshall from Microsoft UK’s Live@Edu team – we had a great pleasure of meeting with one of our MSPs (Microsoft Student Partners): Blake Pender at King's College London. Blake remained fully engaged throughout the event and came along to us afterwards to catch up and share his views on the PDC10 session. Make sure to check out his blog post here.

This was a fantastic event – we’re all looking forward to the next PDC soon.

In the meantime, why not check out all the materials from PDC10 edition? Once again, it all starts with the keynotes by Microsoft Executives (Steve Ballmer and Bob Muglia). Enjoy!

Thank you very much and we hope to engage with you all again soon.

Rafal Kwiek on behalf of the Academic Team at Microsoft UK

Creating web pages using WebMatrix - Tutorial 6: Dynamic Content (Basics: Forms).

2010-11-05T01:26:00Z

In this article, you’re going to be introduced to processing of data input by the user by using forms.

Download complete CSHTML Project

Step # 1: First of all, create a new empty site and name it: "BasicsForms". Once you’ve done this – you’ll automatically be presented with the contents of the newly created page. To continue, replace the existing markup with the following (we’ll be referring to it as you go):

Code Snippet #1: ASP.NET Razor Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

@{
    // Declaring the necessary variables and initialising them with values captured from the form submission
    var Name = Request["Name"];
    var Surname = Request["Surname"];
    var ExamplePassword = Request["ExamplePassword"];
    var Gender = Request["Gender"];
    var FavouriteDaysOfWeek = Request["FavouriteDaysOfWeek"];
    var HasAnySiblings = Request["HasAnySiblings"];
    var Comments = Request["Comments"];
    var IsVegetarian = Request["IsVegetarian"];
    var LikedFruits = Request["LikedFruits"];
    var FileToAttach = Request["FileToAttach"];

    // Checking if the form has been submitted
    if(IsPost)
    {
        // Making sure that all the fields have been completed
        if(Name != "" && Surname != "" && ExamplePassword != "" && Gender != "" && FavouriteDaysOfWeek != "" && HasAnySiblings != "" && Comments != "" && IsVegetarian != "" && LikedFruits != "" && FileToAttach != "")
        {
            // Using the "<text>" element to mark the start & end of Text/HTML markup and separate it from the code
            <text>
            
            <fieldset>
                <legend>Sample Result</legend>
                    <p>Your name: @Name
                    <p>Your surname: @Surname
                    <p>Your example password: @ExamplePassword
                    <p>Your gender: @Gender
                    <p>Your favourite day(s) of the week: @FavouriteDaysOfWeek
                    
                    <p>@{
                            if(@HasAnySiblings == "Yes")
                            {
                                @: You have siblings
                            }
                            else
                            {
                                @: You have no siblings
                            }
                        }
                    <p>Your comments: @Comments
                    
                    <p>@{
                            if(@IsVegetarian == "Yes")
                            {
                                @: You are a vegetarian
                            }
                            else
                            {
                                @: You are not a vegetarian
                            }
                        }
                    <p>Fruits you like: @LikedFruits
                    <p>Your file to attach: @FileToAttach
            </fieldset>
            </text>
        }
        else
        {
            // Otherwise displaying an error message
            @: Error: Make sure you complete all the fields of the form!
        }
    }
}

Code Snippet #2: HTML/CSS markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html>
<html>
    <head>
        <title>Basics: Forms</title>
    </head>
    <body>
    
    <form action="" method="post"> 
        <fieldset>
            <legend>Sample Form <input type="button" value="Reload" onClick="parent.location='BasicsForms.cshtml'"></legend>
            <p>Name: <input type="text" name="Name">
            <p>Surname: <input type="text" name="Surname">
            <p>Example password: <input type="password" name="ExamplePassword">
            <p> Gender: <p><input type="radio" name="Gender" value="Male"> Male
                        <p><input type="radio" name="Gender" value="Female"> Female

            <p>Favourite day(s) of the week:
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Monday"> Monday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Tuesday"> Tuesday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Wednesday"> Wednesday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Thursday"> Thursday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Friday"> Friday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Saturday"> Saturday
            <p><input type="checkbox" name="FavouriteDaysOfWeek" value="Sunday"> Sunday

            <p>Do you have any siblings: <select name="HasAnySiblings">
                                            <option value="" selected disabled>Select</option>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                         </select>

            <p>Enter your comments: <p><textarea name="Comments" rows="10" cols="50"></textarea>

            <p>Are you a vegetarian: <select name="IsVegetarian" size="2" multiple>
                                        <option value="" selected disabled>Select</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                     </select>

            <p>Which fruits do you like (use CTRL to select multiple options):
            <select name="LikedFruits" size="7" multiple>
               <option value="" selected disabled>Select</option>
               <option value="Apples">Apples</option>
               <option value="Bananas">Bananas</option>
               <option value="Cherries">Cherries</option>
               <option value="Kiwis">Kiwis</option>
               <option value="Oranges">Oranges</option>
               <option value="Grapes">Grapes</option>
            </select>

            <p>Attach a file: <input name="FileToAttach" type="file">
            <p><input type="submit" value="Proceed"> <input type="reset">
        </fieldset>
    </form>
    
    </body>
</html>

Step # 2: When you’re finished, it’s now time to see your web page in action! Click on the “Run” option from the standard toolbar to launch the page in a browser – what you’ll see should correspond to the image shown below.

Step # 3: Now comes the interactive part! Go ahead and complete the form with some sample data. Once you’re finished click on the “Proceed” button, alternatively you can click on the “Reset” button to start again.
Look what happens – your data has just been processed and displayed as a summary for your review. What you’ll see should look similar to the image shown below.

Step # 4: Let’s now take a closer look on the underlying code (HTML/CSS markup and the ASP.NET Razor Syntax).

As you’ve probably seen above, your web page is now making some real decisions based on the data input by the user. In the source code, lines # 1-64 are responsible for the application logic and lines # 65-113 contain the HTML markup.

HTML Markup (lines # 1-64)
In order to capture data from the user we use HTML forms. In this case, we have a simple form with multiple controls of types including: Text, Password, Radio, Checkbox, Select, Textarea, File, and finally Submit & Reset.

Notice the two “<form>” tags embracing the whole structure. The first one (“<form action="" method="post">”) simply defines the action to be performed upon submission of the form as well as the method to be used (“post”). In this case, we don’t supply any values to the “action” parameter consequently forcing the page to reload. The “post” method prevents the browser from encoding the data received from the form into a URL, instead – it’s entirely stored within a message body (invisible to the user).

The protocol used for making requests to the server – HTTP (HyperText Transfer Protocol) supports only the two methods mentioned above: GET & POST. The GET method is primarily used for requesting data from the server (i.e. downloading a web page, but can also be used for passing ASCII parameters back) and the POST method for returning data back to the server (i.e. values from a form, files, binary data, or the like thanks to no restrictions on data type).

If we were to use the GET method instead of the POST, the resulting URL in the browser would look something like: http://localhost:51819/BasicsForms.cshtml?Name=John&Surname=Doe&ExamplePassword=SecretP@s sword&Gender=Male&FavouriteDaysOfWeek=Monday&FavouriteDaysOfWeek=Wednesday&FavouriteDaysOfWeek=Friday&FavouriteDaysOfWeek=Sunday&HasAnySiblings=No&Comments=Hey%2C+that%27s+a+really+cool+example+of+using+forms%21&IsVegetarian=Yes&LikedFruits=Apples&LikedFruits=Cherries&LikedFruits=Oranges&FileToAttach=C%3A%5CImage.jpg and would not work with this particular example anyway.

Let’s now move on to the “<fieldset>” and “<legend>” tags which allow for producing of a neat frame with a caption embracing the entire HTML form. This is a handy way of keeping the form well organised.

Later in the code – notice that each of the form controls is assigned its own unique name, for example: the “<input type="text" name="Name">” is assigned the value “Name” as its name. This is then used in the application logic for capturing its contents upon submission of the form. But does it work? Read on below…

Application Logic (lines # 65-113)
In this case, the application logic is quite straightforward – we begin by declaring the necessary variables and initialising them with values captured from the form submission. Then, we’re using a simple “If” statement to check if the form has been submitted – if so we’re later using another “If” statement to make sure that all the fields have been completed. Only when the first two tests have been passed can the program continue with displaying a summary of data received from the form, and later making decisions based on the processed values. Otherwise – an error message is displayed forcing the user to review the contents of the form. And that’s all there is to know about processing forms really! Feel free to modify the source code of the web page to see what comes back – you might agree that it’s best to learn the new concept by experimenting with it.

Step # 5: Congratulations! You have now completed all the activities related to this article.

What have we done?
In this tutorial, you have been introduced to processing of data input by the user by using forms. In the following ones – you’ll be introduced to using databases with your web pages, become familiar with many useful helpers and finally get ready to put your skills to practice by using each of the built in site templates. It’s all yet to come and there’s far more exciting stuff later on as well, so please stay tuned! :-)