Just Built My First SL3 / Dev 10 App

As you no doubt know we released Beta 1 of Visual Studio 2010 today   (the usual caution applies: I would advise only installing this on a machine you are prepared to repave!).  [Update – the Landing Page for all things related to VS 2010 Beta1 is here. ]

I installed it and Silverlight 3 on my laptop running Windows 7 (yowza!) and then fired it up and created an incredibly simple app as follows:

NewVS10Project

In the new project dialog shown cropped here, I chose to build to the latest version of the .NET Framework (marked Red-circle 1), then chose C# as the language I’d build in (2); narrowed the types of projects by choosing Silverlight (3) and finally chose a Silverlight application (4). 

At the bottom (not shown) I picked the directory and named the project Element Binding.

NewVS10ProjectDialog

 

 

As in previous versions, I’m prompted to choose either a web-based or a simple test application (I chose the latter) but I then had to choose to build to Silverlight 3 rather than 2).

VS10WhichVersion

Visual Studio opens on a new Silverlight 3 application and here is where everything changes.  No longer does the design surface say preview; now it says “Design” and means every syllable.  I created columns and rows much as I would in Blend (by clicking in the margins of the grid:

VS10CreatingColumns

I then dragged a slider into the first column and a text block into the second. WooHoo!

VS10DragControls

I then set the values for the slider to be 0 to 100 and the small increment to be 1 and the large increment to be 100. Finally, I set the properties for the TextBlock, the most important of which being its Text; which I set by clicking on the symbol next to Text (shown circled below) to choose Apply DataBinding

VS10ApplyDataBinding

The Source Dialog opens, and choosing ElementName brings up a list of the elements to which you can bind. Clicking on Slider1 (the slider control) caused the instruction “Use the Path pane to choose propoerties for the Source“ to appear as shown circled in the figure below,

VS10BindingToAnElement

Clicking on the Path pane opened a list of all of Slider’s properties. The property I wanted to bind to was Value, and I clicked on that. I had the option of choosing additional properties or options, but that was all I needed and in fact when I closed the dialog the value of the slider was immediately reflected in the text block in the designer. A quick test run of the application demonstrated that the TextBlock was now bound to the value of the slider, with no need for an event or an intervening data object! 

Sweet.

The application runs as intended,

VS10BoundElement

and here is the complete source, all of which is Xaml:

   1: <UserControl x:Class="ElementBinding.Page"

   2:    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:    mc:Ignorable="d"

   7:    d:DesignHeight="100"

   8:    d:DesignWidth="200">

   9:    <Grid x:Name="LayoutRoot"

  10:          Background="White"

  11:          Height="62">

  12:       <Grid.RowDefinitions>

  13:          <RowDefinition Height="3*" />

  14:          <RowDefinition Height="1*" />

  15:       </Grid.RowDefinitions>

  16:       <Grid.ColumnDefinitions>

  17:          <ColumnDefinition Width="200*" />

  18:          <ColumnDefinition Width="200*" />

  19:       </Grid.ColumnDefinitions>

  20:       <Slider Height="22"

  21:               Margin="0,20,0,0"

  22:               Name="slider1"

  23:               VerticalAlignment="Top"

  24:               Maximum="100"

  25:               SmallChange="1"

  26:               Value="50"

  27:               LargeChange="10" />

  28:       <TextBlock Grid.Column="1"

  29:                  Height="21"

  30:                  HorizontalAlignment="Left"

  31:                  Margin="5,0,0,0"

  32:                  Name="textBlock1"

  33:                  Text="{Binding ElementName=slider1, Path=Value}"

  34:                  VerticalAlignment="Center"

  35:                  Width="95"

  36:                  FontFamily="Verdana"

  37:                  FontSize="18" />

  38:    </Grid>

  39: </UserControl>

 

The key new Silverlight 3 feature is found on line 53 where we bind directly to the Slider.

This is just too much fun.

ecq100

Example-Code Quality, GuaranteedThis code was compiled with Silverlight 3 (Beta) using Visual Studio 10 (Beta) on Windows 7 (RC).  For more on this guarantee, please see this page.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.