Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Exam 70-540 Results Posted

Posted in Gadgets | Certifications | Windows Mobile at Wednesday, February 28, 2007 8:48 AM Pacific Standard Time

Howard Dierking announced that the Mobile Exam has gone live [Via Email]:

The long-awaited mobility developer exam (70-540) was released today! Check out the preparation guide for a list of the topics covered and links to resources to help you prepare. When you feel ready, you can register for the exam at either Pearson VUE or Prometric.

According to Vue I passed the exam which I took back in September during the beta. That gives me another certification MCTS - Windows Mobile 5.0 Applictions. I think it is pretty interesting that even though I'm one of the first people to get the certification it is already out of date since Windows Mobile 6 has already been released.

WPF/E 3D!

Posted in WPF/E at Tuesday, February 13, 2007 2:18 AM Pacific Standard Time

I didn't think it was possible, but smargroth (the creator of the WPF/E Vista example) has posted in the forums about how to simulate 3D objects in WPF/E. You can view his example here. The example isn't perfect, but he explains that it will be fixed once frustum clipping is added (I really miss frustum clipping (what IS frustum clipping???)).

He has even posted some example javascript which you can use to create your own 3D objects in WPF/E. He leaves the task of lighting and coloring to the reader, but gives a hint that you can accomplish it with an opacity mask. I think I need to go buy a book so I can learn about all this graphics stuff. Any suggestions?

WPF/E Matrix Reloaded

Posted in WPF/E at Monday, February 12, 2007 4:12 PM Pacific Standard Time

Last week Chad posted his Matrix style text animation which I thought was very cool. I wanted to experiment a little with keyboard events and using Glyphs. The result is the Matrix Reloaded:

 

The example takes keyboard input without any html help and then displays what you type like Chad's example but uses a Matrix digital rain type of animation. It took me awhile to figure out how to make this type of animation work with the limitations of the current CTP. In order to get the effect each letter is a seperate Glyphs object with its own gradient brush with five gradient stops which are all animated. I was pretty impressed with the performance which doesn't seem to slow at all even when you have lots of animations all going at once.

However, I was pretty happy with the results. The source code is a little messy because I had several different pieces which it stiched together in the end to make the completed example. If you know of an easier way, let me know. :)

Update: Adam asked for the source code so here are the links for the XAML and the Javascript. I created the example using notepad so there is no Visual Studio solution for it.

Simulating Data Grids in WPF/E - Part 1

Posted in ASP.Net/Web Services | WPF/E at Thursday, February 08, 2007 8:11 AM Pacific Standard Time

The source code for this article can be downloaded here.

While there is no official Data Grid in Windows Presentation Foundation (WPF) you can still layout your data quite easily using the Grid Panel. In WPF/E (E for Everywhere) there is no Grid Panel and you must lay everything out using a Canvas where you must specify the absolute position of every item. WPF/E also has no method of data binding, so creating a data grid is not as simple as DataGrid.DataBind().

In this article I will demonstrate how to simulate both a grid layout and data binding in WPF/E. This will be the first article in the series and will only show the basics with later articles taking this approach even further. Before we get started you will need the following items:

  • Northwind sample database - For this article you can host this in SQL Server 2005, SQL Server Express, or SQL Server 2000. However, future articles will make use of SQL Server 2005 features and the source code was coded against SQL Server 2005.
  • WPF/E Feb CTP SDK - You will need the SDK and the aghost.js file from the SDK.
  • ASP.Net AJAX 1.0 - I also reference the ASP.Net AJAX Futures CTP in the project, but for this article you only need the base 1.0 features.
  • Enterprise Library for .NET Framework 2.0 - This makes our calls to SQL Server much simpler.

Setting Up The Database

The first step is to attach the database to the SQL Server. In SQL Server 2005 you need to open up the SQL Server Management Studio, right click Databases under your server, and select Attach. Browse the the MDF file that was extracted from the Northwind sample database installer. We will be using the Photo column of the Employees table for our images (yes, they are terrible images, but for a demo they will work). However, there are two problems with the data in the Photo column (1) it has a header that makes it so you can load it in .NET and (2) it is a GIF image which isn't supported by WPF/E. So to get around this issue I wrote a console application that strips off the first 78 bytes and then saves the image back as a JPEG (it is included in the source code). So you will need to run that application against your database to convert the images to the right format.

The process for doing this with SQL Express is probably a little different and I leave this as an exercise for the reader (of course you can just add your own images instead using the ones in the database).

The Website Project

Next we can turn our attention to the website project. The project is made up of the following items:

  • Default.aspx - the only page in the site
  • EmployeeService.asmx - the web service that we will be calling
  • PhotoHandler.ashx - the IHTTPHandler that returns the images from the database
  • Web.config - the configuration file for the website
  • App_Code/Employee.cs - the Employee object
  • App_Code/EmployeeData.cs - the Data Access Layer (DAL) for Employee data
  • App_Code/EmployeeService.cs - the code behind for the web service
  • scripts/aghost.js - The WPF/E aghost file from the Feb CTP (part of the SDK)
  • scripts/grid.js - The javascript that we will use to build our grid
  • xaml/grid.xaml - The xaml for our grid (not much there)

I'm not going to cover how the DAL works or what the photo http handler is doing since that is outside the scope of this article and they are fairly simple. We will start with taking a look at the Default.aspx page since that is where everything begins. There are three important things to look at in this page. First, you will notice that we reference both the aghost.js file and the grid.js file. Second, we have the ASP.Net AJAX script manager which we point to our EmployeeService web service url. This tells ASP.NET AJAX to build a javascript proxy for our webservice which we can call via javascript. This is how we will get our list of employees out of the database and into our WPF/E data grid. Third we have the script to create the WPF/E control which makes a call to the code in the aghost.js file. This will load up our grid.xaml which is what we will look at next.

Building the Data Grid

The base of our data grid is the grid.xaml file. If you open this file you will see that it is pretty much an empty canvas. The two important things for this file are the Loaded="javascript:loaded" and the x:Name="root". The Loaded event gets fired when the control has finished loading the canvas. This is important because this is what will trigger the building of the data grid. We give the canvas a name so that we can add the elements of our grid to it at run time.

The javascript loaded function is found in the grid.js file. This file is where the action happens. The loaded function is very basic in that it simply creates a new instance of the javascript grid object that is defined below it. I try to encapsulate all my javascript code in to objects since it helps keep the code neat and I find it smells better than a bunch of functions by themselves.

In the grid object's constructor we define three properties: the WPF/E control, the root canvas, and the item template. If you want to change how your data grid items look you can tweak the item template. After defining these items we make a call to EmployeeService.GetEmployees. This is the javascript proxy that was created for us by ASP.Net AJAX. It is an asynchronous call and we pass to it the method we want to be called when the service returns. In this case we want it to call the loadEmployees method of our grid object, but we really want it to call the method on the grid object that we are currently using. In order to do this we use the delegate object which I borrowed from the WPFEPad project (which BTW is a great project to dissect in order to learn about WPF/E and javascript).

When the call returns it calls our loadEmployees method where we will start the process of adding the employees to our data grid. At the top of the method are some variables which you can tweak to change the spacing and layout of our grid. Make sure the itemWidth is the same as the Width of the canvas in the template, otherwise things will overlap. The javascript proxy returns an array of Employee objects (as defined in the Employee.cs file) which we will loop through, apply to the template to create the Xaml for each Employee, and then add back to the canvas with the appropriate Canvas.Top and Canvas.Left settings. Note that we reference the ActualWidth of the control to determine how much space we have to place the employees.

After we have added the employee xaml to the canvas, we find the name TextBlock (as defined by our template) and center it using the ActualWidth of the TextBlock. This is how you center text in WPF/E since there is currently no alignment property for TextBlocks.

Finally we check to see where we are to see if we need to start a new row of employees. If you run the example you should get something that looks like the following in your browser:

So you now have a very simple data grid created using WPF/E and ASP.Net AJAX.

Next Steps

At this point the grid is very simple so there are quite a few enhancements that we could add. Here are a few of the ones that I have in mind:

  • Paging and Sorting
  • Click Events that allow you to see the Employee details
  • Mouseover effects
  • Handle resizes and full screen

Another thing to keep in mind is that we could build a lot of this using an ASP.Net page that generates the Xaml and only use the javascript code to line the items up. This is another approach which I will leave as an exercise for you. :)

Technorati Tags: WPF/E

The Hong Button

Posted in Avanade | WPF/E at Wednesday, February 07, 2007 10:41 AM Pacific Standard Time

Two collegues of mine at Avanade, Hong Tan and Greg Ferguson, did a demo of WPF for the students at UCI. For the demo they took the Kevin Button and modified it with pictures of Hong. They also created a javascript only version of the button to see how it compared to the WPF version. I took it a step further and created a WPF/E version of the Hong Button.

I made use of some of the new features in the Feb CTP like the downloader object, resizing, and  ActualWidth and ActualHeight properties. I also borrowed some of the code from the WPFEPad sample which has also been updated to use these features. However, this is a much simpler example than WPFEPad, so if you're interested in learning about the downloader object check out the javascript.

The reason for the download object in this case was that each of the images is around 34k. While that isn't very big, if you don't download them prior to running the aplet (what do we call a WPF/E application?) then you get a delay when you mouse over the polygons. I also found that if I just switched the Source of the main Image in the MouseEnter event that it would run slowly as well. So I ended up creating an array of states that each has an associate image. I then set the opacity to 1 for the active image and 0 for the inactive image. This seems to work pretty well and is pretty fast. For the reflection I just set the Source of the image to the Source of the active image.

One thing is for sure, the more WPF/E work I do, the better my javascript skills get. In digging through the WPFEPad example I found that pretty much all the code was done using javascript objects. So I followed that same design pattern and I think it makes the code much easier to use. Hopefully it is easy to read as well.  

When Your Blog Becomes a Tech Forum

Posted in General at Wednesday, February 07, 2007 10:21 AM Pacific Standard Time

One of my blogging habits to to blog about my own technical difficulties. Since I am the IT help desk for all my friends and family, when I encounter something that I can't figure out I usually blog about. Since google ranks blog posts very high in its results, you can usually top the search results quite easily. Here are some of my recent technical challenges:

All three posts have turned into a mini forum where people have been posting questions and answers. I find this to be very interesting use of my blog as a technical forum. The nice thing is that I benefit from many of the comments since I usually try them out to see if they solve my problem. For instance, my Vista Screensaver issue was resolved and I found out about the resolution via a comment on my blog.

I also know that many times I get answers to my technical questions via other peoples blogs. For instance, I was trying to install Vista on an old Toshiba tablet that my brother donated to me (a 3505) and followed this post about setting up a PXE service to network boot it. I didn't have to figure out what tech forum to visit to post my question because it had already been answered.

Blogs + Google have definately made solving technical problems much easier. Don't forget to blog about yours.

WPF/E Feb CTP Updates

Posted in WPF/E at Friday, February 02, 2007 9:21 AM Pacific Standard Time

Check out What's New in the WPF/E February CTP (via Mike Harsh). There is quite a bit of new stuff there including keyboard support, cursor support, fullscreen support (no opacity though), a downloader object, and more. I just finished reading the documentation on the downloader object and it sounds like it will be very useful.

Plus the online SDK has been updated as well as the Quickstarts (via m jacobs). It's going to be a fun weekend. :)

WPF/E Cursor Support

Posted in WPF/E at Thursday, February 01, 2007 3:07 AM Pacific Standard Time

I read about the Feb CTP cursor support over in the WPF/E Google group and had to figure it out. I found this post about the Cursor support in WPF and it turns out you can now use the same syntax in WPF/E.

How to set the mouse cursor in one easy step: set the Cursor property. For example, this markup:

<Button Cursor="Help">Help</Button>

… sets the cursor to be the “Help” cursor, when the mouse is over the button.

Here is a quick sample that shows off setting the cursor to "None".