• John Papa’s Web Site
• Jon Galloway’s Web Site
• JsRender course
• toastr 
• Knockout course
• Sammy
• JsRender
• Knockout
• Bootstrap
• Amplify

Listen | Yet Another Podcast

Call in comments: 1-347-YAP-CAST

ListView and GridView both derive from ListViewBase, and neither adds any properties, methods or events; thus they are nearly identical.  The key difference is that ListView is typically used for vertical scrolling, while GridView makes a grid that is typically scrolled horizontally.

Creating a demo program to illustrate GridView is nearly trivial.  We’ll divide our page’s Grid (not to be confused with GridView) into rows and columns. In the left column we’ll add two buttons: Add and Insert. In the right hand column we’ll add the GridView.

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button Name="Add"
            Content="Add"
            Grid.Row="0"
            Grid.Column="0"
            Click="Add_Click_1"/>
    <Button Name="Insert"
            Content="Insert"
            Grid.Row="1"
            Grid.Column="0"
            Click="Insert_Click_1" />
    <GridView Name="xGridView"
              Grid.RowSpan="4"
              Grid.Column="1"
              Grid.Row="0" />

</Grid>

The event handler for both the add button and the insert button are nearly intuitive,

private int counter = 1;

private void Add_Click_1( object sender, RoutedEventArgs e )
 {
     xGridView.Items.Add( "Item " + counter++ );
 }

 private void Insert_Click_1( object sender, RoutedEventArgs e )
 {
     xGridView.Items.Insert( 0, "Item " + counter++ );
 }

Clicking Add and/or Insert a number of times will fill the first column of the grid, and then the second column will begin to fill.  Unfortunately, the grid will size all the items based on the size of the first item, and things get crowded quickly.  We can fix this by adding a style,

 <GridView Name="xGridView"
           Grid.RowSpan="4"
           Grid.Column="1"
           Grid.Row="0" >
     <GridView.ItemContainerStyle>
         <Style TargetType="ListViewItem">
             <Setter Property="Width"
                     Value="150" />
         </Style>
     </GridView.ItemContainerStyle>
 </GridView>

Now when the grid is populated there is a bit more breathing room between the columns and nothing is truncated,

[Click image for full size]

Special thanks to Ian Griffiths for helping me figure out the styling solution.

Create a new application in Visual Studio 11.  Add two BlankPages to the application, naming the first Page1.xaml and the second (you guessed it) Page2.xaml. 

Find the Page name in each file and change them accordingly.  For example, on page 1, your code should look like this:

<TextBlock x:Name="pageTitle"
   Grid.Column="1"
   Text="Page 1"
   Style="{StaticResource PageHeaderTextStyle}"/>

We need the ability to navigate from Page 1 to Page 2. For that, we’ll add a HyperLinkButton.  For purposes of formatting, we’ll put that control into a StackPanel:

 <StackPanel Grid.Row="1"
             Margin="120,0,120,60">
     <HyperlinkButton
         Content="Click to go to page 2"
                      Click="HyperlinkButton_Click_1"/>
 </StackPanel>

Go to page 2, where you’ve already fixed the name of the page, and add a TextBlock (again, within a StackPanel)

<StackPanel Grid.Row=”1″
            Margin=”120,0,120,60″>
    <TextBlock HorizontalAlignment=”Left” Name=”Message”  Text=”Hello World!”/>
</StackPanel>

Open Page1.xaml.cs and find the event handler for the HyperLinkButton.  Add the following line of code,

this.Frame.Navigate( typeof( Page2 ) );

Finally, open App.xaml.cs and set Page 1 as the start page.  To do so, locate OnLaunched() and substitute Page1 for BlankPage,

 rootFrame.Navigate(typeof(Page1));

Run the application; Page 1 opens and offers you a link to Page 2. Page 2 displays your Hello World message.  Notice that Page 2 has a back button; that is actually on every  page, but Page 1 collapses the back button because CanGoBack is false (there is no page to go back to). 

As part of my new work for Telerik, and in preparation for writing a book on Windows 8 XAML programming for APress, I’ve been digging into Win 8. 

Rather than waiting for it all to become clear, I’ve decided to start blogging about what I’m learning as I go.  That will make for some scattershot  posts, but it will also, I hope, capture some of the fundamentals that might otherwise be glossed over.

Microsoft’s advice is that if you are already a XAML programmer, program Win 8 in XAML.  After looking at the XAML samples and the Javascript samples, I can see their point; to a Silverlight or WPF or Windows 7 programmer, the XAML approach is not only familiar, but there is a great deal of overlap, making the learning curve much easier.

To get started I bought a Samsung Slate and dock, which I’m using to drive a 24” monitor, keyboard and mouse.  Other folks I know are using powerful laptops (with or without touch screens) and some folks are making Win 8 their desktop operating system (see my interview with Shawn Wildermuth).

The first thing I did was to download and install Windows 8 directly to the Samsung. This was incredibly fast and easy and when it was done my Win 7 machine was instantly a Win 8 machine. 

Second step was to download and install Visual Studio 11 and the SDK. Also fast and painless.

Step 3 was to download the samples.     While I don’t find it very helpful to simply read the samples, I do find it tremendously useful to have the samples on hand as I’m reading about particular topics. 

Microsoft’s documentation is very good, especially for a preview edition; if there is a complaint at all it is that there is so much documentation it is hard to figure out where to start.

What is missing is a tutorial that takes you through the story of Windows 8 and teaches you what you need to know as you go.  And thank goodness, because that’s what keeps us authors busy.

Stay tuned for more, starting with the fundamentals and working my way through this brave new world.

Shawn Wildermuth is a nine-time Microsoft MVP (Data), member of the INETA Speaker’s Bureau and an author of seven books and dozens of articles on software development.

Shawn is involved with Microsoft as a Silverlight Insider, Data Insider and Connected Technology Advisors (WCF/Oslo/WF). He has been seen speaking at a variety of international conferences including TechEd, Oredev, SDC, VSLive, WinDev, MIX, DevTeach, DevConnections and DevReach.

He is currently teaching workshops around the country through his training company AgiliTrain.  He can also be reached via his blog.

Listen | Yet Another Podcast

Call in comments: 1-347-YAP-CAST

• Joe’s Blog
• Joe on Twitter: @MisfitGeek
• Mozilla Apps Documentation
• Mozilla Hacks Blog
• Mozilla Marketplace App Submission Page
• Boot-to-Gecko
• Personal/Browser ID

Listen | Yet Another Podcast

Call in comments: 1-347-YAP-CAST

An international speaker, Microsoft MVP, MCSD, CSM, and CSP, and a passionate member of the developer community, Phil Japikse has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil works as the Agile Practices Evangelist for Telerik’s Agile Project Management Division, serves as the Lead Director for the Cincinnati .Net User’s Group and the Cincinnati Software Architect Group, and is the host of the Zero To Agile podcast .

Phil founded Agile Conferences, Inc., a non-profit dedicated to advancing agile in all aspects of software development. Phil also serves as Cub Master for his sons’ Cub Scout Pack, volunteers for the National Ski Patrol, and is a recently retired Firefighter/Paramedic. You can follow Phil on twitter and read his blog

• Kent Beck’s  Books
  • XP 
  • TDD

• BDD 
  • Dan North’s post
  • Scott Bellware’s Article

Listen | Yet Another Podcast

Call in comments: 1-347-YAP-CAST

My experiences at Microsoft were terrific, and I had the opportunity to meet and come to know some great and very bright folks. 

I had the chance to work with the Silverlight community from its formative days, and to see XAML become a crucial markup language for Silverlight, WPF, Windows Phone 7 and much more.

Now I am very much looking forward to my new job  at Telerik, where my focus will be on all things XAML: Silverlight, WPF, Windows Phone and Windows 8.

Like many of you, I’ve not only been blown away by the Telerik controls, but I’ve been impressed by the culture at Telerik.  I’ve spent quite a bit of time with Telerik evangelists at conferences, and consider some to be personal friends.  My recent talk at DevReach in Bulgaria gave me the opportunity to visit their world headquarters and meet some of the senior management.   In addition, I’m looking forward to working with Chris Sells who also recently moved from Microsoft to Telerik. 

I need your help

I’m going to continue to speak at user groups and conferences and to blog and in general to interact with the community. Part of that, for example, will be contributing to Telerik’s XAMLflix blog series.  As I do, please let me know what you like about Telerik’s XAML products and what you don’t like, what we should do more of and what new things we should be doing.

Telerik already has forums, online customer support, blog posts and voting – please continue to use those, but in addition,  feel free to reach out to me directly about Telerik’s XAML products.

jesseliberty@gmail.com or @jesseliberty (twitter)

• KnockoutJS Home
• Steve Sanderson’s Home Page
• John Papa’s Home Page
• Jon Galloway’s Home Page
• Knockout Tutorials
• Pluralsight Course on Knockout
• Single Page Applications

Listen | Yet Another Podcast

Call in comments: 1-347-YAP-CAST

The Windows Phone 7.1 SDK (formerly known as Mango) includes a new extended emulator that allows you to see the effect of moving the phone when using the accelerometer. 

We’ll draw a dot in the center of the phone screen, and then move that dot by “tilting” and “rotating” the emulated phone.

To begin, we’ll remove the Application and Page title and change the Layoutroot from a Grid to a Canvas.  Inside the Canvas we’ll draw our dot,

<Canvas
   x:Name="LayoutRoot"
   Background="Transparent">
   <Ellipse
      Name="Dot"
      Fill="Yellow" />
</Canvas>

Notice that the dot has no size; we’ll fix that in the code-behind. 

In MainPage.xaml.cs we’ll declare a couple private membrer variables and a constant; the latter to represent the radius of the dot,

double halfScreenWidth;
double halfScreenHeight;
const double radius = 12;

In the constructor we first set the two member variables by asking the application for the Actual Height (and Width) and dividing by two,

public MainPage()
{
    InitializeComponent();
    halfScreenHeight =
        Application.Current.Host.Content.ActualHeight / 2;
    halfScreenWidth =
        Application.Current.Host.Content.ActualWidth / 2;

We then set the height and width for the dot using the constant radius,

 Dot.Height = radius * 2;
 Dot.Width = radius * 2;

With these measurements in place we’re ready to instantiate the Accelerometer,

var acc = new Accelerometer();

The accelerometer has just two events, we want to handle CurrentValueChanged

acc.CurrentValueChanged +=
  new EventHandler<SensorReadingEventArgs<AccelerometerReading>>(
        acc_CurrentValueChanged );

We can now start the Accelerometer,

acc.Start();

Every time the Accelerometer detects a change in orientation, etc., the event fires and we compute the current position of the dot,

void acc_CurrentValueChanged(
    object sender,
    SensorReadingEventArgs<AccelerometerReading> e )
{
    Dispatcher.BeginInvoke( () =>
    {
        double xPos = halfScreenWidth *
            (e.SensorReading.Acceleration.X + 1)
            - radius;
        double yPos = halfScreenWidth *
            (e.SensorReading.Acceleration.Z + 1)
            - radius;

        Canvas.SetLeft( Dot, xPos );
        Canvas.SetTop( Dot, yPos );
    } );
}

This maps the three dimensional movement of the phone to the two dimensional representation of the location of the dot on the Canvas.  You can see this quite clearly in the new extended emulator.  Run the application and open the emulator. Click on the chevron to the right of the emulator to open the extended emulator. 

With this open, grab the red dot in the center of the emulator and move it around to simulate tilting and rotating the phone. Notice that as you do, the yellow dot you created moves in the x/y (two dimensional) plane to represent the three dimensional movement of the phone, as shown in the illustration at the top of this article.