Welcome!

Blog Feed Post

Element Binding in Silverlight 3.0 with a DatePicker Control

Binding control elements one with the other is a very powerful tool that can reduce writing code. Now with Silverlight 3 which is in beta this is easy. There are many examples wherein the values of a given element would depend on the setting of another control and binding elements would reduce the amount of code to be written otherwise. Although the code for the example chosen would have been very small, it could be substantial in other cases. This tutorial shows how to set the date on a date picker control that would display the date in a text box. Although the example by itself quite trivial, it brings out the essentials of element binding. In order to test this you need to have Visual Studio 2008 SP1 and Silverlight 3.0 installed on your machine.

Step 1: Create a Silverlight application

You create a Silverlight Application project from File | New |Project in Visual Studio 2008. Make sure you have displayed .NET Framework 3.5 in your New Project window as shown. Provide a name for your project. Herein it is called XmalianSL32.
When you click on OK Visual Studio creates an XmalianSL32 solution with an XmlaianSL32 VB project and an XmalianSL32.web project as shown with all necessary folders and files.

















The web project has both an ASPX page as well as an HTML page. When you browse this (Right click XmalianSL32.aspx (or XmalianSL32.html) and choose
View in Browser) you would bring up the web (or html) page in a sand-boxed web site [you do not need a separate web server for this]. However the project may also be placed in a folder in the local web server's root directory. In the case of the HTML page you would see an embedded Silverlight object with the MimeType="applicaiton/x-silverlight-2". In the case of the ASPX page you will see a ASP:Silverlight control (review the source code for both). Well, this is two birds with one stone!!. The Object or the control both gets their XAML from the MainPage.XAML in the project.




Step 2: Place a Stack Panel in the grid 

When you double click the MainPage.xaml you would open the XMAL code with its preview XMAL as shown. The default layout scheme is grid. The white area you see in the preview is the grid.
Place a StackPanel inside the grid. Contrary what you would do in Visual Studio with other projects you may be tempted to drag and drop a StackPanel from the Toolbox and drop it in XMAL. You cannot drag and drop it into what appears like a design area. Because this is only a preview window for the XMAL code. You may however drag and drop the Stack Panel inside the XMAL code. When you do this you will see that the preview changes as shown. When you make changes to the code you may also hit on the Build menu item to load the XMAL code. I just colorized the stack panel to orient myself as shown. You may also add other attributes which are supported by intellisense as shown. As of now you cannot edit the properties in the property window as you might be doing for other project types.

Step3: Drag and drop DatePicker and a Textbox to the Stack Panel

Drag and drop a DatePicker control and a Textbox control from Toolbox |Silverlight XAML Controls shown.
These get added to the stack panel as shown. Provide a name to the DataPicker as shown[x:Name="dpx"]. In doing this you have intellisense support.

<StackPanel Width="200" Height="60" 
                    VerticalAlignment="Center" 
                    HorizontalAlignment="Center" 
                    Background="LawnGreen" >
            <controls:DatePicker x:Name="dp" Visibility="Visible"></controls:DatePicker>
            <TextBox Text=""></TextBox>
</StackPanel>

You can see that the DatePicker and the Textbox are unrelated. So if you browse the page you would see the following displayed.












When you pick a date in the date picker it is not displayed in the textbox as they are unrelated.



Step 4: Bind the controls using the Element Name


In the next step you will bind the DatePicker to the Textbox using the Element Name which you provided for the DatePicker.
Now build the solution and browse to the page (either of the ASPX or HTML). When the page gets displayed click on the DatePicker to open up and click on a date. The date you picked gets displayed in the textbox.
Note that you could have accomplished the same using code by assigning the DatePicker's date property to the textbox's text property.
It may be noted that the project files were placed in a folder on the root directory of the Local IIS web server as shown. This folder can be accessed with anonymous authentication with read only privileges. You may browse the HTML page from here (IIS).

Reversing the role of TextBox and DatePicker

In the previous case the DatePicker drove what was displayed in the TextBox. It can be the other way as well. However in order to do this you need to bind the appropriate property for the DatePicker. How would one know what property of one element can be bound to what property of the other element? You may know this by looking at the properties that are accessible from a drop-down list that intellisense provides. This is shown in the next figure.

Now you can try binding the DisplayDate of the Calendar part of the DatePicker to the value that is in the text box. If you already have a hard-coded date in the textbox the calendar would display that date when you browse either of the ASPX or HTML pages.


After editing the XAML markup of the two controls, the XMAL code is as shown here. An extra Label control is also added with its Content property bound to the textbox. If the Textbox is hard-coded with its Text property it would be immediately visible for the Label but not for the DatePicker.

Browsing either of the pages (HTML or ASPX) and then typing in a date in the Textbox would set the date of the Calendar part of the DatePicker to the date entered as shown here. 

Binding with properties within the same element

It is also possible to bind one property of an element to another property in the same element. Changes were made to the XMAL mark up to test the binding.

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="XmalianSL33.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Width="200" Height="80"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Background="LawnGreen" >
            <controls:Label Background="PowderBlue"
                 Content="{Binding Text,ElementName=tb}">        
            </controls:Label>
            <TextBox x:Name="tb" Text="2/2/2020"></TextBox>
            <controls:DatePicker  x:Name="dp"
                 DisplayDate="{Binding Text,ElementName=tb}"
                 Text="{Binding DisplayDate, ElementName=dp}"
                 Visibility="Visible"></controls:DatePicker>
          
        </StackPanel>
    </Grid>
</UserControl>

The above code would work when (the first time) you browse as seen in the following browser display.


However when you change the textbox entry to something different in the browser, the display in the Calendar synchronizes with the textbox change but the text of the DatePicker does not. One of the reasons for this could be that between an existing content and the one referenced by the ElementName, the existing content has precedence.

Summary

The article described the essentials of codeless Element Binding in Silverlight 3.0 using a very simple example. A variation of Element Binding was tested for binding of properties within the same element with limited success. Visual Studio 2008 allows you to choose any of the browsers on your machine. IE 8 used in the preparation of this article was too slow to respond and was changed over to Safari browser. The other option for viewing the pages is the internal browser in Visual Studio.

Read the original blog entry...

More Stories By Jayaram Krishnaswamy

Jayaram Krishnaswamy is a technical writer, mostly writing articles that are related to the web and databases. He is the author of SQL Server Integration Services published by Packt Publishers in the UK. His book, 'Learn SQL Server Reporting Services 2008' was also published by Packt Publishers Inc, Birmingham. 3. "Microsoft SQL Azure Enterprise Application Development" (Dec 2010) was published by Packt Publishing Inc. 4. "Microsoft Visual Studio LightSwitch Business Application Development [Paperback] "(2011) was published by Packt Publishing Inc. 5. "Learning SQL Server Reporting Services 2012 [Paperback]" (June 2013) was Published by Packt Publishing Inc. Visit his blogs at: http://hodentek.blogspot.com http://hodentekHelp.blogspot.com http://hodnetekMSSS.blogspot.com http://hodnetekMobile.blogspot.com He writes articles on several topics to many sites.

Latest Stories
Cloud Expo, Inc. has announced today that Andi Mann and Aruna Ravichandran have been named Co-Chairs of @DevOpsSummit at Cloud Expo Silicon Valley which will take place Oct. 31-Nov. 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. "DevOps is at the intersection of technology and business-optimizing tools, organizations and processes to bring measurable improvements in productivity and profitability," said Aruna Ravichandran, vice president, DevOps product and solutions marketing...
The next XaaS is CICDaaS. Why? Because CICD saves developers a huge amount of time. CD is an especially great option for projects that require multiple and frequent contributions to be integrated. But… securing CICD best practices is an emerging, essential, yet little understood practice for DevOps teams and their Cloud Service Providers. The only way to get CICD to work in a highly secure environment takes collaboration, patience and persistence. Building CICD in the cloud requires rigorous a...
SYS-CON Events announced today that IBM has been named “Diamond Sponsor” of SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California.
In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, will lead you through the exciting evolution of the cloud. He'll look at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering ...
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
In a recent survey, Sumo Logic surveyed 1,500 customers who employ cloud services such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). According to the survey, a quarter of the respondents have already deployed Docker containers and nearly as many (23 percent) are employing the AWS Lambda serverless computing framework. It’s clear: serverless is here to stay. The adoption does come with some needed changes, within both application development and operations. Tha...
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere delivers a more modern architectural approach to storage that doesn't require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbui...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
Companies are harnessing data in ways we once associated with science fiction. Analysts have access to a plethora of visualization and reporting tools, but considering the vast amount of data businesses collect and limitations of CPUs, end users are forced to design their structures and systems with limitations. Until now. As the cloud toolkit to analyze data has evolved, GPUs have stepped in to massively parallel SQL, visualization and machine learning.
We all know that end users experience the Internet primarily with mobile devices. From an app development perspective, we know that successfully responding to the needs of mobile customers depends on rapid DevOps – failing fast, in short, until the right solution evolves in your customers' relationship to your business. Whether you’re decomposing an SOA monolith, or developing a new application cloud natively, it’s not a question of using microservices – not doing so will be a path to eventual b...
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software. They hope to capture value from emerging technologies such as IoT, SDN, and AI. Ultimately, irrespective of the vertical, it is about deriving value from independent software applications participating in an ecosystem as one comprehensive solution. In his session at @ThingsExpo, Kausik Sridhar, founder and CTO of Pulzze Systems, will discuss how given the magnitude of today's applicati...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
The dynamic nature of the cloud means that change is a constant when it comes to modern cloud-based infrastructure. Delivering modern applications to end users, therefore, is a constantly shifting challenge. Delivery automation helps IT Ops teams ensure that apps are providing an optimal end user experience over hybrid-cloud and multi-cloud environments, no matter what the current state of the infrastructure is. To employ a delivery automation strategy that reflects your business rules, making r...
Digital transformation is changing the face of business. The IDC predicts that enterprises will commit to a massive new scale of digital transformation, to stake out leadership positions in the "digital transformation economy." Accordingly, attendees at the upcoming Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA, Oct 31-Nov 2, will find fresh new content in a new track called Enterprise Cloud & Digital Transformation.