Developing For .NET

Not too long ago, I posted about how to center a Silverlight Application within an HTML page.  Last weekend, I was working on a Silverlight application and I wanted to stretch the background brush across the entire browser, but retain the content in a fixed space in the middle of the screen.  I could have done this by creating a gradient and then applying it as the background in my HTML/CSS, but I wanted the ease of design and flexibility that I have within Silverlight.  Here is what I did to accomplish the trick.

Sizing the UserControl

To begin with, we have to set the width and height properties of the UserControl so that the UserControl will stretch to fill all available space within the browser.  We’ll start by setting Width and Height of our UserControl to Auto and the LayoutRoot container to a fixed size with a Background color so we can see it along with our Background work.  This way we can tell what effect we are actually having. 

[Note: click on the images for full size]

So far, it seems like we are centering, so all we should need to do is add a Background to the UserControl, right?  Unfortunately, that will not do what we want.  Adding a Background to the UserControl gives us the exact same results.  Since the screen shot is the same, I won’t repeat it, but if you are following along at home try it and you should get the same result. 

Also, not to be picky, but this is not actually centering: this is setting the HorizontalAlignment and VerticalAlignment properties to their default values of Stretch.  The Grid is actually stretching to fill up the available space, but it is still limited to its fixed size, so it gives the appearance of centering.  Not to worry, it’s a minor technicality.

Setting the Background

Our goal is for the Background, in this case a GradientBrush, to stretch across the entire surface of the browser window.  Above we saw that fixing the LayoutRoot to the size of our desired content won’t allow this to happen.  Instead, we’ll need to set the LayoutRoot Width and Height properties to Auto, and set the Background of the LayoutRoot element to the desired Gradient. 

Running the application at this point will show our Background filling the entire browser space.

And here is the XAML:

Centering the Content

Now that we have our Background properly visible across the entire surface of the browser, we need to center the Content inside our LayoutRoot Grid.  This is easily done by adding another Container to the LayoutRoot to act as a wrapper for our fixed size content.  This example shows a Grid, but I initially did it with a Canvas. I’ve added a Black Background color so you can see the content Grid.

Now set the HorizontalAlignment to Center.  I think the default VerticalAlignment value of Top looks best, but of course you could center it or add some Margin around the content Grid to suit your preference. 

Now just add your content to the internal Grid, and you will have an automatically sized Silverlight page with centered, fixed size content.

Adding a Clipping Region

One last thing you should be aware of: if you are doing any animations with content off screen, using this method will make them visible outside the bounds of your content.  While this has some interesting potential, it is probably not the behavior you want. 

To correct this, you need to add a Clipping Region to your content Grid.  This will ensure that child elements of that Grid are only visible inside its visual boundaries. Since you can’t do this visually, you’ll need to edit the XAML directly.  The key here is to set the Clipping geometry, in this case a Rectangle, to be the same width and height as the content Grid.

Conclusion

It’s important to note that since we are letting Silverlight do all the work, you do NOT want to use the HTML and CSS from the previous Centering post.  Doing so will result in only the width defined in the CSS being displayed.  Instead, just use the default HTML and CSS settings.

I like this approach better since it gives my application an integrated background.  It gives me more creative options and more control.  Let me know how it works for you!

I’ve written a lot of CSS over the years, so when I wanted to center my Silverlight App in my web page I figured it would be a piece of cake.  It is easy, but it gave me some frustration because it required one element that I normally would not specify.  Read on for the details.

Setting up the CSS

Here is the default CSS created by Visual Studio:

To accomplish this little trick I need to define a wrapper DIV in my CSS.  This Div will then wrap the entire contents of the site, so now I only have to center that DIV.  We need to define the width of the content area: it makes sense that you want to set the size of something you want to center so it can be calculated.  To do this, I set the width property of the wrapper DIV to the pixel width of my Silverlight control.

Since not all browsers interpret things the same way, we need to add a couple of items in order to center our content.  First, add text-align: center; to the body tag.  This should handle the centering for IE browsers, at least older ones.  For Firefox and Safari, we need to add margin: 0 auto; to our wrapper DIV.

This is my typical set up in traditional HTML scenarios, but when I tried using this CSS the Silverlight object would not show.  I had some video in this particular example, and it was a good thing I did or I would have gone crazy trying to figure this out: I could hear the video playing, so I knew the Silverlight object was running, I just couldn’t see it.

It turns out that you need to specify the height property as well in the wrapper DIV.  It doesn’t have to be exact, just larger than your Silverlight control.  If you make it larger than 0 but smaller than your control, it will actually truncate the control, which could be an interesting effect in certain scenarios.  I don’t know the reason for this, perhaps it’s because the Silverlight control runs in an object tag, but I’m not sure.  Please post in the comments below if you know why this was required.

Here is the final CSS I used:

I’m ready to begin my first production Silverlight 2 project, so I needed to learn how to make a data driven Silverlight application. I pretty much already knew that the answer would involve WCF, but as I do not have much experience with such things I was not sure what to expect. I had written several Web Services in PHP using NuSOAP, but I knew basically nothing about WCF or IIS hosting of web services. So, towards the goal of understanding what all the pieces are and how they fit together, I began my research.

Getting Started with WCF

As an old procedural midrange programmer, I always like to start with the data, so the WCF end was where I chose to begin. I tried watching Michele Bustamante’s 15 part video series on WCF, but half way through the second video my eyes glazed over and the drool was beginning to stain my shirt. While I understand she is a giant in the field, this series was not for the rank amateur.

I surfed around Google for a while and came up with several decent examples and a couple of videos. At some point, once I understood the basics, I stumbled across an example of the new Silverlight-enabled WCF Service item type which greatly simplified things. I hooked up a Linq to SQL project to my WCF service and was able to return Linq classes (or subsets as necessary).

I was able to hook up a simple WCF test inside a Silverlight 2 application and consume my new Services. All was well, but I had done everything inside the Silverlight project. It made more sense to me to break the WCF out into its own Solution. To accomplish this, I followed these steps:

1. Create a WCF Service Application
2. Delete the default Service1 files
3. Add a new “Silverlight-enabled WCF Service” item
4. Create the services as needed

Deploying the Service to IIS 6.0

I’m unfortunately still stuck with IIS 6.0. I don’t know if the experience is any different on IIS 7.0, but I went through some trials getting this to work properly. To be fair, I’m sure that most of the trials were caused by my own ignorance.

At first, I was trying to deploy the Services as part of an existing ASP.NET application. This got hairy pretty quickly, since I wasn’t sure how to properly merge the two projects together on the server. I tried deploying the Services to a subdirectory, but I could never get it to work. At that point I decided that it would probably be best if I put the services on their own subdomain, so I created a new subdomain for the Services.

I was able to deploy the Service site to the new subdomain and the WSDL page displayed properly. (Actually, it didn’t right away: I had apparently screwed something up trying to merge it with the other ASP.NET application, so I recreated the Service application from scratch which only took a few minutes. It was that page that displayed properly.)

So at this point I thought I should have been able to simply switch out my Service Reference in my Silverlight application, but it didn’t work. I messed around with it but couldn’t get it to respond. When I ran the application in debug, I received a message indicating that the WCF Service was not configured for cross domain access. Since the Service was now live on the domain but my application was running on localhost, my requests were being rejected by the server. To solve this, I added a clientaccesspolicy.xml file. At this point, the test Silverlight application running on my local machine began functioning again.

Deploying the Silverlight Application

Now, with my Service installed, configured, and running as desired, and with my Silverlight 2 application consuming that Service, I figured I was ready to deploy it to the server. I created my new ASP.NET web site on IIS 6.0 and deployed the Silverlight application’s test ASP.NET page. I pointed my browser to the test page and… nothing.

And by nothing, I mean I received the dreaded blank page. Even worse, when I tried to right-click to view the source, all I got was the “Silverlight Configuration” prompt. At first I was really bummed, but then I realized that if I was getting the Silverlight prompt, then that meant the browser recognized my content as Silverlight! I was actually closer to success than I originally imagined!

Once more unto the Google breach, and I found that, at least in IIS 6.0, you have to configure a MIME type for .xap files! I navigated to the MIME settings on my Silverlight domain and added a Type for extension “.xap” with a content type of “application/x-silverlight-app”. I restarted the web site and went to my page and Viola! I had a Silverlight 2 application running on IIS 6.0 that consumed WCF Services!

What’s next

So now that I have the basic structure down, I have a bit of work left to do. First, I need to test all my Services. Then I need to read up on performance for WCF: I believe there are some lazy loading techniques I can use to make sure my users are getting immediate access and not waiting around for a bunch of data to load. After that, it will be back to Blend 2 for some serious design work. I don’t have anything particularly juicy in mind for this application, but I do want something a little beyond the ordinary. Along the way, I’m hoping to upgrade to Server 2008, Sql Server 2008, and IIS 7.0. And in January I am taking Computer Graphics classes at the local community college. All in all, it looks like I’m going to be having a lot of fun in the near future!

9 am:

Today, VSLive! Austin begins with a session by Billy Hollis entitled “Maximizing WPF & Silverlight”. I’ll be updating this post throughout the day with interesting tidbits from the presentation. The problem is that there is no power in the room, so I can only run for so long before I need a recharge. If I have any complaints about VSLive!, this is it: know your audience – we need power!

I’ve been to several of Billy’s presentations in the past, and he is a real GUI Guru, so I look forward to today’s presentation. If Silverlight promises as delivered, it will finally be the technology to realize the goals of Java Applets and Flash. Should be fun!

9:48am update:

• WPF is hard technology to learn: it is not unusual for developers to flounder for several weeks or even months while in the learning process
• WPF is Vector based, rather than Bitmap based. This should bring the end of developing for specific screen resolutions
• WPF is optimized for integrated media
• Silverlight is a subset of WPF. Small install, runs in a browser not unlike Flash. Cross-platform capable. As such, it cannot do everything WPF can, such as 3D.
• For more robust web apps, WPF can be run inside the browser. This requires WPF to be installed on the machine, and so it will only work on Windows, and currently only in IE (although other browser support on Windows is expected). If you see a web page with an “.xbap” extension, this is WPF running a browser.
• Having the same skill set from Silverlight to full WPF GUIs allows developers to leverage the same skills to do many different UIs
• Silverlight 1.0 is limited to JavaScript: no code-behind capabilities. Billy says that writing rich code in JavaScript is like “frosting a cake with a Ping-Pong paddle. It can be done but it ain’t pretty!”
• Silverlight 1.1 (now in testing) will allow code-behind and will distribute a mini-CLR. This means you can write and execute C# code in ANY browser on ANY platform.
• WPF has a greatly enhanced ListBox control: complete control over the graphics and implementation of each individual item. Allows dynamic formatting and sizing.
• WPF and XAML are a move towards declarative programming. Simply declare what you want, instead of defining how to create it, and the system does the rest.

10:07am update:

• XAML is very friendly for Code Generation – Billy showed a tool he wrote in a few minutes similar to my own PropertyBuilder (see Free Code)
• A quick note: the new language versions (like VB9) have embedded XML tools and object
• Designing XAML: you can use either Visual Studio or Expression Blend
• VS is designed for developers – gives full access to code but cannot do all the design work, such as gradients
• Blend is designed for Designers: great graphics tools, but no access to code
• Blend can execute code that is already present
• The two can be used simultaneously: both open and use the same .proj files – a change in one will be detected and prompted in the other
• Blend XAML does not have Intellisense, but VS does
• Blend is a separate license, but is part of an MSDN subscription
• CONCLUSION: use Blend to develop the XAML, and VS to edit it manually and write code

10:50am update:

• WPF Window class is the root visual element
• Very much like the Form class: same properties and events
• Managed by the Application class as part of Window collection

A good question was asked about the future of Windows Forms. This was Billy’s response:

• Forms are not going anywhere: will be supported for a long time to come
• BUT there will be no significant enhancements: all future development will be for WPF
• WPF is more expensive to develop for right now: more resources, more time, high learning curve
• Eventually, WPF will be as easy or easier than Forms
• WPF does not make Forms obsolete
• New applications should be designed in such a fashion that Forms can be replaced by WPF (good separation of UI and Code) or developed for WPF up front (biting the bullet)

WPF Elements:

• Element is the catch-all term for everything in WPF, like we treat Control today in Forms
• A Control is anything that interfaces with the User: buttons, checkboxes, etc.
• A Container is an Element that contains other elements
• Like Panel (which is an abstract class in WPF) – used for layout and management: there are four basic Panels – StackPanel, Canvas, Grid, and DockPanel – all used for layout
• Or Decorator (such as Borders and the like)
• Item Controls – lists of other elements
• There is no DataGrid in WPF
• Containers have Child element collections
• Controls are limited to a single Content property
• Content can be ANY .Net object – including Containers
• So any Control can be essentially anything
• Non-WPF objects are displayed as their .ToString() implementation

1:30pm update:

Getting back from lunch, here is a quick update from the last session.

• Content items can be very complex: one example would be making the content of a tooltip a video box
• Buttons traditionally fire their click event upon release, but WPF introduces the ClickMode Enumerator: release, press, and hover.
• TextBlock is the most lightweight text control, even more so than Label (it is missing a lot of events, properties, and methods)
• Menus and Toolbars are ItemControls, managing a list of other controls
• Measurement Units replace pixels – they are device independent, theoretical units – their actual size is relative to system DPI settings
• The Canvas panel type uses absolute positioning and appears to make the most sense to typical Form developers – don’t fall into the trap! It should be used sparingly sense it does not handle Resizing (one of the main goals of WPF)
• There is no Forms to WPF conversion
• Forms can be used in WPF
• Silverlight 1.0 only supports the Canvas panel type, but later versions are supposed to incorporate other panels
• In WPF all Colors become Brushes – this means that whereever there is Color, you can use Gradients, images, shapes, textures, etc.
• NOTE: the new language versions support “Relaxed Delegates”. This means you do not need to define event args for event signatures if they are not needed.

Data Binding:

• Data Binding in WPF is very good
• Blend has some tools for assigning Data Binding
• VS does NOT have any tools for Data Binding, you must code the XAML by hand
• XAML uses “Markup Expressions” for variable items such as Data Binding – there is no Intellisense in Markup Expressions
• Elements may have multiple bindings for different properties
• Bindings are defined as Data Context properties: when data binding occurs, the elementsearches up the tree until it finds the first Data Context.
• This does NOT mean it searches for matching properties! It just uses the first one it finds: failing to find one results in a Silent Failure, so nothing happens and there is no Exception to catch.

6:15pm update (post class):

The wireless quit working for a while, and then I ran out of power, so I missed the last two updates.

More on Data Binding:

• Anything that implements IList can be bound to a ListBox
• Data Binding can come from XML, ADO.NET objects like DataSet and DataTable, or a Resource List defined in XAML
• WPF Element properties can be bound to other Elements Properties: this is a potentially very cool feature. The example Billy showed was binding a TextBlock’s FontSize property to a Slider control’s Value. Move the Slider and the Font Size of the TextBlock changes automatically

Some Miscellaneous points:

• VS2008 Properties window has no ABC sort. I hope this is fixed in the GA version because it is awful to constantly scan the window looking for the correct property
• As XML, XAML is case sensitive, which really bothers VB developers

XBAPS – some more on using Silverlight or WPF via a browser:

• Like any web page, XBAPS run in a security sandbox
• Apps delivered by the server: Software-as-a-Service
• Can store small amounts of information in Isolated Storage. Good for configuration and cacheing.
• Requires the .NET Framework 3.0+ – Silverlight does not.
• XBAP takes over the entire browser window – Silverlight does not.
• ASP.NET can deploy Silverlight components like Flash.
• Silverlight is installed in the browser as a plug-in.

Resources – A crucial part of WPF used to define reusable items:

• XAML can contain declared resources
• Used partially for styling
• Can be ANY .NET object,but is usually a WPF object
• The name of the resource is the key in a Resources Collection
• Can be defined at any level of the XAML: application, window, grid, panel, etc.
• Employed like stylesheets
• When looking for a match, walks up the tree until it finds the first one

Data Templates – a way to define layout and binding templates:

• Helps with the separation of code and UI
• Data should not care about how it is displayed
• The UIElement is in charge of the display
• A data template is used to layout data in a display
• Data Template elements can be data bound to object properties or other information
• Defined as a Resource
• Templates can contain other Elements such as Panels, TextBoxes, Images, etc.
• Template assignments can be changed dynamically: apply different templates based on different states

Animation – not just “cartoonish” or movement, animation means “changing visual properties over time”, such as color, opacity, size, position, etc.:

• Has good and bad uses
• Good animation should be a metaphor for a real world experience (opening a folder, for instance)
• Real world movement is more natural than something just appearing or disappearing
• Fading in and out “feels” more comfortable and natural
• Establish a Path or Storyboard (use Path for movement)
• Bind animation to an appropriate property
• Animation classes are used to execute
• There are different Animation classes for each data type, like DoubleAnimation for doubles
• Namespace: System.Windows.Media.Animation

Media:

• MediaPlayer wraps the Windows Media Player
• MediaElement wraps MediaPlayer in XAML
• EventTriggers respond to buttons
• MediaElement can be the Content for any Control – you can effectively put video anywhere
• Media can be used to create a VisualBrush

Transforms – used to alter shapes and sizes of graphics

• A Transform is a system that maps a coordinate space to a different coordinate space
• Unlike GDI+, you can simply declare Transforms in WPF and they “just happen”
• TranslateTransform is used to offset hte starting coordinate
• There areTransforms for Scaling, Skewing, and Rotating
• MatrixTransform is used to apply multiple Transforms
• RenderTransform will apply the transform withoutupdating the Layout
• LayoutTransform will adjust the WPF layout to accomadate the Transform

Styles – like CSS, styles are used to change the look of Elements:

• Declared as a StaticResource
• Allows you to define multiple properties simultaneously
• Styles can be assigned at any level or globally for a type
• Styles can inherit from other styles using the BasedOn attribute

Ink – add Ink capabilities anywhere:

• Bolted on to Windows Forms, but built in to WPF
• Use an InkCanvas and set the background to any element
• You can Ink over anything, including streaming video
• Ink also has Recognition capabilities via the System.Windoes.Ink.InkAnalyzer class.

Whew!  There is more I could add, but what a day!  I think these pre and post conference seminars are the best part of VSLive!  See you tomorrow!