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:
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.
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).
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:
I then dragged a slider into the first column and a text block into the second. WooHoo!
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
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,
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,
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.
Example-Code Quality, Guaranteed! This 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.