Using Expression Design for making Creative Buttons for Silverlight Applications

After a long you can say, I was totally engaged in Community Activities, After Sessions at Tech.Ed 09 India in May, I was doing few community sessions on Silverlight 3 as a part of nationwide community event in India titled as “Tech.Ed on the Road”. I was hardly getting time to explore new things since most of the time went in sessions and travel across,Addition to that I left my job (IT Slowdown bang me hard ! ;-) ), well our blog is technical and not personal, so let’s get back to work.

Over last few months here, we were discussing features of Silverlight 3 and how we can make use of its features in our LOB (Line of Business) applications, throughout this period, I was getting common feedback and some people were more keen towards design aspects rather than code part, So I have now decided to spend some time for design related things, So here we go with Expression Design, A tool available for free download and comes as a part of Expression Studio, Basically used for creating jazzy Icons and Buttons and some text effects.Here is small article on this.

With my typical Paint Brush skill, I started these things since I don’t have any designer cell in my brain :) ..mess you can see which I created at first time in Expression Design :

I started with simple geometry shapes like Triangle,Rectangle and Semi-circle to make a pencil type button for my button in Silverlight Save-Dialog box application, so it went like this :

Step 1 : Get your Basic Design Ready

Step 2 : Selecting All or Each part of Design

For this you can make use of Selection tool provided by Design

However, Lasso Selection will help you to select bits and pieces of whole shape as Direct generally select whole area at once.

Step 3 : Actually applying Gradient / Colors

You can apply Colors / Gradient from Appearance section and you can very well adjust the direction of gradient by “Gradient Transform” tool available on Toolbox for any given particular item

Along with that you can either adjust Opacity for whole object or for particular part selected with the selection tool.

Step 4 : With Pen,Selection and Scissors option, you can shape your object like this :

And also you can create designs like this :

Or like this :

Step 5 : Applying Effects

In some of the above images, you can see some glossy and shadow effects, so all you have to do for that is to choose object and apply effects like this :

You can apply effects layer-wise also, to check various layers, you can go through Layer window just below effects on right hand side panel (It is also accessible via Menu), You can add and delete multiple effects.

Step 6 : Export

After creating so much of work, its time to use that in reality, so One can go to File->Export or other simple way is to use “Slice” tool, select particular Object/Area and right click on it and choose “Export…” option, A self explanatory window like this will pop up :

 

As you can see that Expression Design provides several Export format options, being Silverlight professionals, we are much more keen towards XAML Silverlight Canvas or in any of the image format.

However XAML Silverlight Canvas gives you necessary xaml code and it get saved as xaml file, so it is easy to tweak and customize as per application demands, for our demo we are exporting it as image.

Step 7 : Final Step – Getting that Design and applying to Silverlight Control

Right now I have following Normal Silverlight button which I want to replace :

XAML Code for current scenario :

<Button x:Name="btnSave" Height="20" Width="40" Content="Save" Click="btnSave_Click" />

Now let’s replace this button with the Pencil which we created and exported using Expression Design :

So new XAML Code will be :

<Button x:Name="btnSave" Click="btnSave_Click">            
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="MyPencil.png" Height="130" Width="50"/>
                        </ControlTemplate>
                    </Button.Template>
            </Button>

and output will be…

 

I tested out this button and its work very well as it was earlier.

So, This is have you can now make your Silverlight applications much more Jazzy and Beautiful, well this was just initial work we did, so try this out and get comfortable on this, Big this is that this can be done by developer also very easily.

Hope you like this simple way to make creative effects, icons and buttons for your silverlight applications using Expression Design, I will soon again give you much more things over here at my best, so keep visiting here, Though this article came up after a long period, still its not like it will go slow, will coming with much more soon.

Vikram.

Silverlight in Visual Studio 2010

Hello, Before I start with the article, First I would like to Thank You very much for your wonderful response and feedback to my articles over here and encouragement given time to time. Microsoft MVP Award Program made note of this at their recent blog post :

http://blogs.msdn.com/mvpawardprogram/archive/2009/05/26/indian-mvp-inspired-by-silverlight-3.aspx

Thanks to all of you once again, and I will try my best to keep the same in coming days, So now lets see how to go for Silverlight Project in VS 2010. This is very small post and idea is to get familiar with the new environment of Visual Studio 2010 along with Silverlight Project Template.

I have already wrote about Visual Studio 2010 in my last article.So to start with Silverlight in Visual Studio 2010, Open Visual Studio 2010 and choose Silverlight Template with code behind language of your choice.

Note : While selecting Silverlight Project in Visual Studio 2010, do have a look at “Multi-targeting” feature, Visual Studio 2010 supports .NET Framework 2.0,3.0,3.5 and 4.0. So by chance if you choose 4.0, Note that then it will not get open in Visual Studio 2008, In nutshell, If you want to play around Silverlight in both Visual Studio’s then you need to take care while choosing the framework.

Have a look at picture below :

This is new feature in Visual Studio 2010, Now you can “Multi-Target” your Silverlight application by choosing respective Silverlight Version.

Once you open your project with the corresponding version of Silverlight :

On left you will find Silverlight Controls. Note that additional controls like Charting tools etc. you still need to download from CodePlex, I am not sure right now about the compatibility of them with Visual Studio 2010, but soon I am giving try for the same. On right you will find the normal design and code layout which is as-is from Visual Studio 2008.

I know, though I can’t see your faces, but I am sure you must be happy to know this that now Drag drop is possible !! :) So now you can do most of the common layout structure here only, Once you drag drop particular control, corresponding XAML code gets generated.

Another good thing is that,let’s say you drag drop a button, now in Visual Studio 2010, if you double-click on it in design window, it will automatically throw you to code behind with respective event of it like this :

Note : This does not mean that you should stop using Blend, This feature is to provide flexibility to do the normal design which developers generally do to start with placing controls. Blend is more towards hardcore designers to build layouts, whatever it is, still both are tightly integrated.

At the end : One major thing I found missing is : Reduce XAP size option.

In Visual Studio 2008 :

In Visual Studio 2010 :

In end, Overall Visual Studio 2010 looks very promising for development of Silverlight applications, so it may not be useful for production purpose since its in early beta and RIA services etc are still missing, but still you can try it out for small applications.

I request you to kindly visit following URLs which already made few discussion on same topic :

http://timheuer.com/blog/archive/2009/05/20/silverlight-and-visual-studio-2010-beta.aspx

and

http://timheuer.com/blog/archive/2009/05/24/silverlight-blend-visual-studio-beta-confusion.aspx

I am soon starting few articles on Silverlight 3, the features which we have not discuss in earlier post, along with that I am planning to start .NET 4.0 in parallel to this so as to have variety flavors. So keep checking this place and once again thanks to all of you.

Vikram.

Visual Studio 2010 : A total “New” Experience

After TechEd 09 India, sort of new wave going on in community and forums here in India about .NET 4.0, and must be everywhere in the world. We all know how our forums on Internet are loaded with thread of Migration and Backward compatibility, But no one can help and neither can stop moving ahead, Its need rather than version !

Microsoft is now with us with their new Beta Product as “Visual Studio 2010” [Beta 1],While reading this post, I am sure most of you will be opening new Tab and asking Search engines to get result for “Visual Studio 2010 + download”, well I appreciate your enthusiasm, but it may be in vain since right now as far as I know, it is only available for MSDN subscribers, you need to check that for yourself, I came to know from “Twitter” via MSDN India tweet. So I downloaded that and now giving you my first review.

I have installed Visual Studio 2010 Beta 1 on Windows 7 Beta and I already have Visual Studio 2008 and SQL Server 2008 on my machine, Overall experience is smooth with one single restart required. I don’t know about Windows 7 RC and other OS, I think should not be an issue. So here we go…

Let me tell you about the Visual Studio 2010 IDE, Its “WPF” based !, might shock you but this is reality ! ( Great job by both VS and WPF team ), so overall exprience is simply mind blowing and especially it become more rich with that typical “Blue” color of Microsoft all over.

This is the default Start Page you will get for Visual Studio 2010 Beta 1, This initial screen is then got divided into three core sections as “Welcome”,”Projects” and “Visual Studio”.

  Here in “Project” section, you can find list of old/previously opened projects with a “Pin” symbol to pin that to the list and “X” to remove from list. When you click on New Project you will get the New Project window, which I will discuss here after below Visual Studio section snap.

Once you click on Projects –> New Projects, you will get following New Project Template, more or less similar that we use to have in older version of Visual Studio.

If you observe carefully, In the Target Framework dropdown, now you have total 4 Frameworks to target as .NET 2.0,3.0,3.5 and new one 4.0 (In Common Man’s language “Your Visual Studio 2005 Projects can run in Visual Studio 2010”), Beside this on right hand side, you will find a small section where short information about each Project template is shown once you select a particular,like this :

I tried out using a New ASP.NET website ( I still love ASP.NET despite of my ongoing Silverlight work), Most amazing feature I found is “Snippets while doing HTML”, you just type “sm + Tab” and you will get <asp:ScriptManager> , well this is not only for script manager,but now you will find such snippets for all common controls like dropdownlist,Image,Hyperlink etc and even for Validation Controls. (Don’t worry, I am going to cover these in great details on my upcoming ASP.NET 4.0 posts), Coding in Visual Studio 2010 is fun and productive in terms of time saving. You now have something as “View Call Hierarchy” where you can find all calls made to that particular function/method all over project, you just need to right click on it and choose “View Call Hierarchy” functionality. I have done for Hello() in following example you can see as snap :

“Call To” and “Call From” above is very self explanatory. Beside this there are lot more improvements in search with Quick Search and Quick Replace, So hold your breath for more..I hope this must have made some rich picture of Visual Studio 2010 in your mind, keep that as it is, I will be soon covering new stunning features along with examples on each. So, In coming days you will find more stuff about .NET 4.0, ASP.NET 4.0, Visual Studio 2010 and much more along with Silverlight 3.

So don’t wait and waste your time, Grab a copy of Visual Studio 2010 Beta 1 today and start exploring it !!

Vikram.

TechEd 09 India : Something for every one…

You must be thinking why no new buzz here from last week or so, simple reason, I was at TechEd 09 India in City of Hyderabad [ City in India, Capital of Andhra Pradesh state and world famous for Microsoft IDC, Biryani and Pearl jewelry.] City is beautiful and have various flavors, people here are very helpful and co-operative.

It was major event atleast for me since my Visa request got cancelled this year [for no good reason :P] , so I was bit upset that time since I missed MVP Global Summit this year.I was under impression that I will never able to attend any big Microsoft event under my MVP period,but right then they made announcement for TechEd 09 in India which was happening after a gap of few years.I made my mind,come what may, I must attend this one.

Event started taking shape on various social network sites like FaceBook,Orkut,LinkedIn and recent craze of Twitter. Everyone putting their own idea to make this happen and most amazing way. Community being integral part of such events, was there from first moment. Unconference at TechEd 09 India was made successful by all over India Community leaders.

I arrived in Hyderabad on 12th May, I saw Satyam office [IT nightmare] from outside which was near to my hotel. My hotel was a nice place and hardly few minutes away from Venue. I saw Katrina Kaif that day along pool side of the hotel.After spending lot of time day before event, we came back to hotel.

On 13th May 2009, All entry points were loaded with heavy security, I made check in with my laptop and just entered the lobby, after taking 5 steps hardly, I saw Microsoft CEO Steve Ballmer right in front of me walking with his team.After Jazz music of Agni, Steve B took charge of everything.

Steve Ballmer is simply amazing person, once he started talking at keynote, I felt like I am charged with something, I wonder any of the Indian IT big personal could have same impact on people, most of them are in magazine stories, but Steve B is really Iron Man I can say.

After that, I went on attending sessions for next 2 days for ASP.NET 4.0, Silverlight 3, Windows 7 Labs etc. I am most lucky I can say since I was able to attend Stephan Walther’s session.

Well, Technical sessions and HOLs are part of TechEd but beside that there was lot of fun we had with XBOX consoles, Kingfisher ForceIndia Sports car, Microsoft SAM Robot, Microsoft Surface and much more :

Tim Sneath absence was a big loss for people like me who were almost could do anything to listen him talking on Silverlight and other stuff. but still we had fun with all sessions.

Last day was full with quizzes and takeaways, I won few Intel and INETA Caps with some Microsoft goodies and kingfisher goodies, Bag was about to blow out with those on last day ;), I interacted with many MVPs across Asia and US , Also It given me a great chance to interact with all members of Microsoft India people. Hats off to Microsoft India and Team of Organizers of this wonderful event.There is lot more to write since I experience tons of things..Thanks to Abhishek Baxi, Abhishek Kant, Pradipta Sharma, Sanjay Shetty and rest of the team who made this event “happening”..

Usually I come home from such events with loads of Technical stuff for me, but this time I am really a “Rich” person since I got those lovely new friends at TechEd 09 , God bless Microsoft !! :)

   

Well, people..make note of this picture..I am coming with fast speed here with loads of new things on .NET 4.0, ASP.NET and Silverlight, so keep looking here..Vrrrooooommmm !!! :)

Vikram.

Silverlight 3 : Insert & Update Data using WCF Service with DataForm and DataGrid

In my Lap around Silverlight 3 series, I have written a separate article on DataForm in Silverlight 3, This article is a basic extension to that and I am soon pushing it par with DataPager and other few things in coming days.

Now, I am discussing a simple or rather the simplest way to push new data and update existing data. Offcourse selection of data is there by default, so delete operation I left for my blog readers. In a nutshell you can treat this as CRUD demo with DataPager. For this you need 3 Major things

• DataForm
• DataGrid
• WCF Service

I will start with WCF service first.Kindly note that you need to have respective SQL database as backend. I believe “DataContract” of this will be self-explanatory, so I am not giving details of SQL schema, Also I have not much given stress on Validations and authetications since I cover that in last article and priority of this is to show basic CRUD operations.

WCF Service Code :

[ServiceContract]
   public interface IService
   {
       [OperationContract]
       bool InsertEmployee(Employee emp);
       [OperationContract]
       bool UpdateEmployee(Employee emp);
       [OperationContract]
       Employee[] GetAllEmployees();
   }

[DataContract]
   public class Employee
   {
       [DataMember]
       public int EmpNo { get; set; }
       [DataMember]
       public string EmpName { get; set; }
       [DataMember]
       public int DeptNo { get; set; }
       [DataMember]
       public int Salary { get; set; }
   }

Under Service.svc.cs you need to write following code :

public class Service : IService
   {

       SqlConnection Conn;
       SqlCommand Cmd;

       #region IService Members

       public bool UpdateEmployee(Employee emp)
       {
           bool Updated = false;
           Conn = new SqlConnection("Data Source=.;Initial Catalog=Company;Integrated Security=SSPI");
           Cmd = new SqlCommand();
           Conn.Open();
           Cmd.Connection = Conn;
           Cmd.CommandText = "Update Employee Set EmpName=@EmpName,DeptNo=@DeptNo,Salary=@Salary where EmpNo=@EmpNo";

           Cmd.Parameters.AddWithValue("@EmpNo",emp.EmpNo);
           Cmd.Parameters.AddWithValue("@EmpName",emp.EmpName);
           Cmd.Parameters.AddWithValue("@DeptNo",emp.DeptNo);
           Cmd.Parameters.AddWithValue("@Salary",emp.Salary);

           int Upd = Cmd.ExecuteNonQuery();
           if (Upd > 0)
           {
               Updated = true;
           }

           Conn.Close();
           return Updated;

       }

Below will help to fetch the latest records :

       public Employee[] GetAllEmployees()
       {
           Conn = new SqlConnection("Data Source=.;Initial Catalog=Company;Integrated Security=SSPI");
           Cmd = new SqlCommand();
           Conn.Open();
           Cmd.Connection = Conn;
           Cmd.CommandText = "Select * from Employee";

           SqlDataReader Reader = Cmd.ExecuteReader();

           DataTable dtEmp = new DataTable();
           dtEmp.Load(Reader);
           int RCount =  dtEmp.Rows.Count;
           Employee[] arrEmp = new Employee[RCount];
           int i = 0;

           foreach (DataRow Dr in dtEmp.Rows)
           {
               arrEmp[i] = new Employee();
               arrEmp[i].EmpNo = Convert.ToInt32(Dr["EmpNo"]);
               arrEmp[i].EmpName = Dr["EmpName"].ToString();
               arrEmp[i].DeptNo = Convert.ToInt32(Dr["DeptNo"]);
               arrEmp[i].Salary = Convert.ToInt32(Dr["Salary"]);
               i++;
           }

           Conn.Close();

           return arrEmp;

       }

       #endregion

Below will help to Insert New records from DataForm :

       #region IService Members

       public bool InsertEmployee(Employee emp)
       {
           bool Inserted = false;
           Conn = new SqlConnection("Data Source=.;Initial Catalog=Company;Integrated Security=SSPI");
           Cmd = new SqlCommand();
           Conn.Open();
           Cmd.Connection = Conn;
           Cmd.CommandText = "Insert into  Employee Values (@EmpNo,@EmpName,@Salary,@DeptNo)";

           Cmd.Parameters.AddWithValue("@EmpNo", emp.EmpNo);
           Cmd.Parameters.AddWithValue("@EmpName", emp.EmpName);
           Cmd.Parameters.AddWithValue("@DeptNo", emp.DeptNo);
           Cmd.Parameters.AddWithValue("@Salary", emp.Salary);

           int ins = Cmd.ExecuteNonQuery();
           if (ins > 0)
           {
               Inserted = true;
           }

           Conn.Close();
           return Inserted;
       }

       #endregion
   }

Now we have our basic logic in place, So its time to go for design the UI, Before this, Let me give a URL of my fellow who is WCF Geek and he blogs at :

http://maheshsabnis.spaces.live.com/blog/

Though Mahesh blog in irregular intervals but you can buzz him if you have any queries in WCF.

Well,getting back to our demo, For design, I am putting DataForm and DataGrid Head to Head, So code will look like this :

XAML Code :

<Grid x:Name="LayoutRoot"   Width="690" Height="490" ShowGridLines="True" Background="Gainsboro">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="345"></ColumnDefinition>
            <ColumnDefinition Width="345"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <dataControls:DataForm Height="200" Grid.Column="0" x:Name="dfEmp" ItemsSource="{Binding Emp}" ItemEditEnded="dfEmp_ItemEditEnded"
                               AddingItem="dfEmp_AddingItem"
                              ></dataControls:DataForm>
        <data:DataGrid Grid.Column="1" Height="200" x:Name="dgEmp"   Width="300" ItemsSource="{Binding Emp}"></data:DataGrid>
    </Grid>

C# Code :

Some global level declarations :

MyRef.ServiceClient Proxy;

private ObservableCollection<MyRef.Employee> _Emp;

bool IsNewInsertFlag = false;

public ObservableCollection<MyRef.Employee> Emp
{
        get { return _Emp; }
        set { _Emp = value; }
}

Initial Binding of Data :

public MainPage_DataForm_DataGrid()
       {
           InitializeComponent();
           Proxy = new SILV3_DataBoundControls.MyRef.ServiceClient();
       }

       private void UserControl_Loaded(object sender, RoutedEventArgs e)
       {
           Proxy.GetAllEmployeesCompleted += new EventHandler<SILV3_DataBoundControls.MyRef.GetAllEmployeesCompletedEventArgs>(Proxy_GetAllEmployeesCompleted);
           Proxy.GetAllEmployeesAsync();         
       }

Actual Operations :

void Proxy_GetAllEmployeesCompleted(object sender, SILV3_DataBoundControls.MyRef.GetAllEmployeesCompletedEventArgs e)
        {
            if (e.Result != null)
            {
                Emp = e.Result;
            }
            this.DataContext = this;          
        }

I was actually looking for some specific event to each CRUD operation, but finally I landed up with ItemEditEnded (Feedback most welcome if there any better way to do it here), So I did both operations in one event by using flag IsNewInsertFlag.

        private void dfEmp_ItemEditEnded(object sender, DataFormItemEditEndedEventArgs e)
        {
            if (IsNewInsertFlag)
            {
                Proxy.InsertEmployeeCompleted += new EventHandler<SILV3_DataBoundControls.MyRef.InsertEmployeeCompletedEventArgs>(Proxy_InsertEmployeeCompleted);
                Proxy.InsertEmployeeAsync((MyRef.Employee)dfEmp.CurrentItem);
            }
            else
            {
                Proxy.UpdateEmployeeCompleted += new EventHandler<MyRef.UpdateEmployeeCompletedEventArgs>(obj_UpdateEmployeeCompleted);
                Proxy.UpdateEmployeeAsync((MyRef.Employee)dfEmp.CurrentItem);
            }
        }

        void Proxy_InsertEmployeeCompleted(object sender, SILV3_DataBoundControls.MyRef.InsertEmployeeCompletedEventArgs e)
        {
            bool Res = e.Result;
        }

        void obj_UpdateEmployeeCompleted(object sender, MyRef.UpdateEmployeeCompletedEventArgs e)
        {
            bool Res = e.Result;
        }

        private void dfEmp_AddingItem(object sender, CancelEventArgs e)
        {
            IsNewInsertFlag = true;
        }

And you are done with it..Many of you might be wondering about few service calls, Let me explain, Thought we are using ObservableCollection it will surely update in Grid whatever we enter in DataForm, but since we need to push all updates to Database we are doing this service calls, I personally don’t think of any overhead here,if you feel please let me know.

So output will be look like this :

I hope this will give you better idea and help you to implement in your POCs/Projects etc., do let me know your feedback.

Vikram.

TechEd 2009 India : Join India’s Biggest Technical Event by Microsoft

Just look at this image below..do I need to say anymore?

Yes !! Microsoft CEO Steve Ballmer is Keynote Speaker for TechEd 2009 India which is Biggest Technical event by Microsoft starting from 13 May to 15th May in Hyderabad,India.

So, you think that this keynote is only attraction of event?? then you are totally wrong..why I am saying so? look below :

[Tim also written an excellent article on Silverlight CoreCLR after Mix 09]  

[He wrote one of the greatest book on ASP.NET on earth till the day, yes ASP.NET Unleashed]

Beside this loads of Sessions for Developers,Designers,Architects,Managers and CXOs by Top Technical Leaders in India and outside India. Many sessions on Silverlight 3, .NET 4.0, Azure, SQL Server, Windows 7 and many more..

Adding more spice to it, Microsoft giving following which I equally find useful for attendees :

So, what MVPs like me going to do there beside attending sessions?? ..Well, Its going to be loads of stuff for Developers and other Attendees, There will be some side sessions by MVPs, some Blogging and Live Tweeting will be there along with some informative sessions for Community too, This all you can enjoy here :

[So, If you are looking ahead for some Silverlight discussion with me, you can find me here from 13-15 May throughout the day, and I would love to interact with you.]

Well, this was small lap around about TechEd 2009 India by me, so I know you must have several questions in mind, so here I go :

Q) I would like to visit Official Homepage of TechEd 09 India

Ans : www.msteched.in

Q) Why I should attend such events like TechEd 09 India ??

Ans : http://blogs.msdn.com/msdnindia/archive/2009/05/01/ongoing-recession-and-why-you-should-attend-teched-india.aspx

Q) I am looking ahead for Sessions, I would like to know what sessions are there for me and my friends or my organization

Ans :http://www.microsoft.com/india/teched2009/tracks.aspx and Daily breakup at : http://www.microsoft.com/india/teched2009/agenda.aspx

Q) I was just going through this Blog post and saw About “Free Certifications”, can you give more information?

Ans : http://www.microsoft.com/india/teched2009/freecertification.aspx

Q) I heard from my friends who attended various events in US, they told me about “Technology Tents” are they going to be here?

Ans : Yes !! here : http://www.microsoft.com/india/teched2009/technologytents.aspx

Q) How to Register ? and where I can find more information ?

Ans : http://www.microsoft.com/india/teched2009/register.aspx

Q) I am very new to Hyderabad / I am first time visiting Hyderabad, can I know some Travel/Accommodations details ??

Ans : Welcome to India for those who are first time visitors here, For those who are from India as well as from outside India, you can find more information here :

TechEd 2009  Venue :

http://www.microsoft.com/india/teched2009/Venue.aspx

Travel Directions to the Venue from Airport :

http://www.microsoft.com/india/teched2009/Getting_there.aspx

Accommodations :

http://www.microsoft.com/india/teched2009/Accommodation.aspx

Q) Are there any Social Medias covering this event??

Ans : Yes, here you go !! :)

FaceBook : http://www.facebook.com/group.php?gid=62844697987

Twitter : http://twitter.com/techedindia2009

and many more you can find on Homepage of TechEd 09 India.

I hope this will be informative for you, so without thinking much,Register right now and just go ahead and drop e-mail to your Boss with Subject line “Will be Out of Office from 13-15 May 2009” ;-) , Also do share this information in your community and friends, So see you there !! :)

[Note : All Images and URLs are taken from www.msteched.in for blogging purpose only, they carry their respective copyrights]

Vikram.

DataBinding in Blend 3 for Designers

After 8 continuous articles on features of Silverlight 3 Beta, I started now looking at each feature of it and soon will give insight on the same,meanwhile I shifted my focus to Blend 3 which I touch upon only once, so I thought should start looking at it also.

I have already covered some of the new features of Blend 3 in my previous article. Now today I am talking about the features rather only Data feature of Blend 3. Designers always need to work hard to create specific look and feel and give it to developer for development. We know Blend and Visual Studio are tightly coupled, so both can work together. But how about Designer doing POC (Proof of Concept) which will actually show/represent data, Offcourse designers may not able to program it,but from Blend 3 they have few good options.

It is not like that Databinding was impossible in previous version, but now in Blend 3 it is much more friendly.So let talk about that.Please make note that, this is only for “Designers” who are not part of coding, so for developers this post may sound very basic and generic or you may ask what so great in this, but for Designers I am sure it is much more useful.

Open a new project in Blend 3 Preview and look for following “Data” tab.

Right now I have added one XML file by opening this solution in Visual Studio (In Blend 3, if you say add new item, there is no XML document option, so need to do that from Visual Studio)

Employee.xml :

<?xml version="1.0" encoding="utf-8" ?>
<Employees>
  <Employee>
    <EmpId>1</EmpId>
    <EName>Vikram</EName>
    <Sex>Male</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>2</EmpId>
    <EName>Prachi</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>3</EmpId>
    <EName>Swati</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>4</EmpId>
    <EName>Anuja</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
</Employees>

Now with the “Import Sample Data from XML…” option from Data Tab, you can associate this XML file as datasource like this :

It will then analyze your XML file and it will generate metadata [ Refer the Sample Data folder it creates, it creates on xaml and xsd file], It will show you the contents in form of Collection and properties, Also you can go ahead and edit those properties like this :

We already have some data inside xml tags but you can edit that sample data for display purpose by clickin on small cylindrical symbol in front of Collection generated, so it will throw you a window for editing like this :

So, it provide you all the facilities to add and modify properties. Now you just need to simply drag-drop that Collection on Canvas and it will automatically convert that to Grid (Employee.xaml file I was talking before) and then you can simply go ahead and modify that XAML as per look and feel you want, XAML code which is generated and which I edited is like this :

<UserControl.Resources>
        <DataTemplate x:Key="EmployeeTemplate1">
            <StackPanel>
                <TextBlock Text="{Binding Path=City}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Country}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=EmpId}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=EName}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Phone}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Sex}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=State}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Street}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Zip}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource Employee}}">
        <data:DataGrid
          AlternatingRowBackground="Azure"
          GridLinesVisibility="None"
          SelectionMode="Single"
          ItemsSource="{Binding Mode=OneWay, Path=EmployeeCollection}" AutoGenerateColumns="False" VerticalAlignment="Top" Height="126" Margin="0,22,0,0" >
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Header="EmpId" Binding="{Binding Path=EmpId}"/>
                <data:DataGridTextColumn Header="Name" Binding="{Binding Path=EName}"/>
                <data:DataGridTextColumn Header="Sex" Binding="{Binding Path=Sex}"/>
                <data:DataGridTextColumn Header="City" Binding="{Binding Path=City}"/>
                <data:DataGridTextColumn Header="Country" Binding="{Binding Path=Country}"/>
                <data:DataGridTextColumn Header="Phone" Binding="{Binding Path=Phone}"/>
                <data:DataGridTextColumn Header="State" Binding="{Binding Path=State}"/>
                <data:DataGridTextColumn Header="Street" Binding="{Binding Path=Street}"/>
                <data:DataGridTextColumn Header="Zip" Binding="{Binding Path=Zip}"/>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>

This way you can see that how it is getting bind by each field, see this :

ItemsSource="{Binding Mode=OneWay, Path=EmployeeCollection}"

Remember Binding Mode by default is “OneWay” and even if you make it “TwoWay” it won’t be updating your original xml,but you can see it reflect in the design. Also beside this pure XML, you can also bind the XML generated from DataSet (Hope you recollect that DataSet provides one method to export schema to XML as WriteXML(),such XML also can be used to represent data), If you feel that you are restricted due to XML then you can go and explore “ObjectDataSource” facility.After doing this,output will be like this :

This is how you can build full functional POC in Blend 3 by having real data in it, So when Designers will give such inputs to Developers, I am sure sharp developers like you will quickly understand what they need to code.

Let me know your feedback, Soon I will be talking much more better stuff on Blend,Silverlight 3 and offcourse .NET 4.0 and Visual Studio 2010 in coming weeks.

Vikram.