In this series, I will be taking sample applications from the iPhone SDK
and implementing them on Windows Phone 7 Series. My goal is to do as much of an apples-to-apples comparison as I can. This series will be written to not only compare
and contrast how easy or difficult it is to complete tasks on either platform, how many lines of code, etc., but Id also like it to be a way for iPhone developers to either get started on Windows Phone 7 Series development, or for developers in general to learn the platform. Heres my methodology: Run the iPhone SDK app in the iPhone Simulator to get a feel for what it does
and how it works, without looking at the implementation Implement the equivalent functionality on Windows Phone 7 Series using Silverlight. Compare the two implementations based on complexity, functionality, lines of code, number of files, etc. Add some functionality to the Windows Phone 7 Series app that shows off a way to make the scenario more interesting or leverages an aspect of the platform, or uses a better design pattern to implement the functionality. You can download Microsoft Visual Studio 2010 Express for Windows Phone CTP here,
and the Expression Blend 4 Beta here. Hello World! Of course no first post would be allowed if it didnt focus on the hello world scenario. The iPhone SDK follows that tradition with the Your First iPhone Application walkthrough. I will say that the developer documentation for iPhone is pretty good. There are plenty of walkthoughs
and they break things down into nicely sized steps
and do a good job of bringing the user along. As expected, this application is quite simple. It comprises of a text box, a label,
and a button. When you push the button, the label changes to Hello plus the word you typed into the text box. Makes perfect sense for a starter application. Theres not much to this but it covers a few basic elements: Laying out basic UI Handling user input Hooking up events Formatting text So, lets get started building a similar app for Windows Phone 7 Series! Implementing the UI: UI in Silverlight (and therefore Windows Phone 7) is defined in XAML, which is a declarative XML language also used by WPF on the desktop. For anyone thats familiar with similar types of markup, its relatively straightforward to learn, but has a lot of power in it once you get it figured out. Well talk more about that. This UI is very simple. When I look at this, I note a couple of things: Elements are arranged vertically They are all centered So, lets create our Application
and then start with the UI. Once you have the the VS 2010 Express for Windows Phone tool running, create a new Windows Phone Project,
and call it Hello World: Once created, youll see the designer on one side
and your XAML on the other: Now, we can create our UI in one of three ways: Use the designer in Visual Studio to drag
and drop the components Use the designer in Expression Blend 4 to drag
and drop the components Enter the XAML by hand in either of the above Well start with (1), then kind of move to (3) just for instructional value. To develop this UI in the designer: First, delete all of the markup between inside of the Grid element (LayoutRoot). You should be left with just this XAML for your MainPage.xaml (i shortened all the xmlns declarations below for brevity): 1: <phoneNavigation:PhoneApplicationPage
2: x:Class="HelloWorld.MainPage"
3: xmlns="...[snip]"
4: FontFamily="{StaticResource PhoneFontFamilyNormal}"
5: FontSize="{StaticResource PhoneFontSizeNormal}"
6: Foreground="{StaticResource PhoneForegroundBrush}">
7:
8: <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
9:
10: </Grid>
11:
12: </phoneNavigation:PhoneApplicationPage>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Well be adding XAML at line 9, so thats the important part.
Now,
Click on the center area of the phone surface
Open the Toolbox
and double click StackPanel
Double click TextBox
Double click TextBlock
Double click Button
That will create the necessary UI elements but they wont be arranged quite right. Well fix it in a second.
Heres the XAML that we end up with:
1: <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200">
2: <TextBox Height="32" Name="textBox1" Text="TextBox" Width="100" />
3: <TextBlock Height="23" Name="textBlock1" Text="TextBlock" />
4: <Button Content="Button" Height="70" Name="button1" Width="160" />
5: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The designer does its best at guessing what we want, but in this case we want things to be a bit simpler.
So well just clean it up a bit. We want the items to be centered
and we want them to have a little bit of a margin on either side, so heres what we end up with. Ive also made it match the values
and style from the iPhone app:
1: <StackPanel Margin="10">
2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/>
3: <TextBlock Name="textBlock1" HorizontalAlignment="Center" Margin="0,100,0,0" Text="Hello You!" />
4: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello"/>
5: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now lets take a look at what weve done there.
Line 1: We removed all of the formatting from the StackPanel, except for Margin, as thats all we need. Since our parent element is a Grid, by default the StackPanel will be sized to fit in that space. The Margin says that we want to reserve 10 pixels on each side of the StackPanel.
Line 2: Weve set the HorizontalAlignment of the TextBox to Stretch, which says that it should fill its parents size horizontally. We want to do this so the TextBox is always full-width. We also set TextAlignment to Center, to center the text.
Line 3: In contrast to the TextBox above, we dont care how wide the TextBlock is, just so long as it is big enough for its text. Thatll happen automatically, so we just set its Horizontal alignment to Center. We also set a Margin above the TextBlock of 100 pixels to bump it down a bit, per the iPhone UI.
Line 4: We do the same things here as in Line 3.
Heres how the UI looks in the designer:
Believe it or not, were almost done!
Implementing the App Logic
Now, we want the TextBlock to change its text when the Button is clicked.
In the designer, double click the Button to be taken to the Event Handler for the Buttons Click event. In that event handler, we take the Text property from the TextBox,
and format it into a string, then set it into the TextBlock. Thats it!
1: private void button1_Click(object sender, RoutedEventArgs e)
2: {
3: string name = textBox1.Text;
4:
5: // if there isn't a name set, just use "World"
6: if (String.IsNullOrEmpty(name))
7: {
8: name = "World";
9: }
10:
11: // set the value into the TextBlock
12: textBlock1.Text = String.Format("Hello {0}!", name);
13:
14: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
We use the String.Format() method to handle the formatting for us.
Now all thats left is to test the app in the Windows Phone Emulator
and verify it does what we think it does!
And it does!
Comparing against the iPhone
Looking at the iPhone example, there are basically three things that you have to touch as the developer:
1) The UI in the Nib file
2) The app delegate
3) The view controller
Counting lines is a bit tricky here, but to try to keep this even, Im going to only count lines of code that I could not have (or would not have) generated with the tooling. Meaning, Im not counting XAML
and Im not counting operations that happen in the Nib file with the XCode designer tool. So in the case of the above, even though I modified the XAML, I could have done all of those operations using the visual designer tool.
And normally I would have, but the XAML is more instructive (and less steps!). Im interested in things that I, as the developer have to figure out in code. Im also not counting lines that just have a curly brace on them, or lines that are generated for me (e.g. method names that are generated for me when I make a connection, etc.)
So, by that count, heres what I get from the code listing for the iPhone app found here:
HelloWorldAppDelegate.h: 6
HelloWorldAppDelegate.m: 12
MyViewController.h: 8
MyViewController.m: 18
Which gives me a grand total of about 44 lines of code on iPhone. I really do recommend looking at the iPhone code for a comparison to the above.
Now, for the Windows Phone 7 Series application, the only code I typed was in the event handler above
Main.Xaml.cs: 4
So a total of 4 lines of code on Windows Phone 7.
And more importantly, the process is just A LOT simpler. For example, I was surprised that the User Interface Designer in XCode doesnt automatically create instance variables for me
and wire them up to the corresponding elements. I assumed I wouldnt have to write this code myself (and risk getting it wrong!). I dont need to worry about view controllers or anything. I just write my code. This blog post up to this point has covered almost every aspect of this apps development in a few pages. The iPhone tutorial has 5 top level steps with 2-3 sub sections of each.
Now, its worth pointing out that the iPhone development model uses the Model View Controller (MVC) pattern, which is a very flexible
and powerful pattern that enforces proper separation of concerns. But its fairly complex
and difficult to understand when you first walk up to it. Here at Microsoft weve dabbled in MVC a bit, with frameworks like MFC on Visual C++
and with the ASP.NET MVC framework now. Both are very powerful frameworks. But one of the reasons weve stayed away from MVC with client UI frameworks is that its difficult to tool. We havent seen the type of value that beats double click, write code! for the broad set of scenarios.
Another thing to think about is how many of those lines of code were focused on my apps functionality?. Or, the converse of How many lines of code were boilerplate plumbing? In both examples, the actual number of functional code lines is similar. I count most of them in MyViewController.m, in the changeGreeting method. Its about 7 lines of code that do the work of taking the value from the TextBox
and putting it into the label. Versus 4 on the Windows Phone 7 side. But, unfortunately, on iPhone I still have to write that other 37 lines of code, just to get there.
10% of the code, 1 file instead of 4, its just much simpler.
Making Some Tweaks
It turns out, I can actually do this application with ZERO lines of code, if Im willing to change the spec a bit. The data binding functionality in Silverlight is incredibly powerful.
And what I can do is databind the TextBoxs value directly to the TextBlock. Take some time looking at this XAML below. Youll see that I have added another nested StackPanel
and two more TextBlocks. Why? Because thats how I build that string,
and the nested StackPanel will lay things out Horizontally for me, as specified by the Orientation property.
1: <StackPanel Margin="10">
2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/>
3: <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,100,0,0" >
4: <TextBlock Text="Hello " />
5: <TextBlock Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" />
6: <TextBlock Text="!" />
7: </StackPanel>
8: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello" Click="button1_Click" />
9: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now, the real action is there in the bolded TextBlock.Text property:
Text="{Binding ElementName=textBox1, Path=Text}"
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
That does all the heavy lifting. It sets up a databinding between the TextBox.Text property on textBox1
and the TextBlock.Text property on textBlock1. As I change the text of the TextBox, the label updates automatically.
In fact, I dont even need the button any more, so I could get rid of that altogether.
And no button means no event handler. No event handler means no C# code at all. Did you know that DotNetSlackers also publishes .net
articles written by top known .net Authors? We already have over 80
articles in several categories including Silverlight. Take a look: here.
