Archive for October, 2010

How to gray the text of a disabled Silverlight Label control.

Have you ever written code that both offended and impressed you at the same time? Maybe it was a piece of code that flew in the face of accepted design or coding practice yet produced inarguably good results. Maybe you came up with a hack to work around some limitation in your toolset or existing application which proved to be so resourceful you couldn’t help but be proud. I recently had one such moment while working on a Silverlight application.

While trying to design a configuration style dialog using a natural text pattern, I found myself needing to enable and disable blocks of text along with related controls. When disabled, I wanted the control to render itself in a ghosted fashion with grayed out text. The first issue you will run into when doing this in Silverlight is that the TextBlock element can’t be enabled or disabled as it does not derive from System.Windows.Controls.Control and therefore does not have an IsEnabled property.

This is where the Silverlight Toolkit’s Label control comes in as it does derive from Control. Additionally, since the Label control is also a ContentControl, it’s able to host any number of other controls as part of its content template including simple text. The IsEnabled property of a label will properly propagate down to other such controls which inherit from Control thus disabling them as well. However there seems to be a known issue with the current version where simple text content in the control is not rendered with the same disabled/ghosted style as the other controls. The net affect was that a Label was no different than a TextBlock for my purposes.

Starting in Silverlight 4, through the use of implicit styles, you can now define the look and feel of a control without having to specify a key name. This allows you to target your style for a specific type of control without having to specifically add a reference to the style in the location where you make use of the target control type. You can read more about Implicit Styles in Silverlight 4 at SilverlightShow.net.

This is the part where a hack becomes a thing of beauty (or at least power anyway). Leveraging some XAML provided in the CodePlex ticket for this issue and tweaking it for inclusion in App.xaml as an Implicit Style, I was able to extend all my label controls in the application with a grayed out text feature when they are in the disabled state. So while I was a little dismayed that something as simple graying out some text for a disabled control required a hack, I was also quite impressed with the power of Implicit Styles.

Sample App.xaml code:

<!-- /////////////////////////////////////////////////////////////////////////////
SDK LABEL HACK: the sdk version of the label doesn"t gray the text when disabled. 
http://silverlight.codeplex.com/workitem/969
-->
<style targettype="sdk:Label">
  <setter property="IsTabStop"
      value="False" />
  <setter property="HorizontalContentAlignment"
      value="Left" />
  <setter property="Template">
    <setter.value>
      <controltemplate targettype="sdk:Label">
        <grid>
          <vsm:visualstatemanager.visualstategroups>
            <vsm:visualstategroup x:name="CommonStates">
              <vsm:visualstate x:name="Normal" />
              <!-- add state change when Disabled-->
              <vsm:visualstate x:name="Disabled">
                <storyboard>
                  <objectanimationusingkeyframes storyboard.targetname="ContentControl"
                                   storyboard.targetproperty="Foreground"
                                   duration="0:0:1.5">
                    <discreteobjectkeyframe keytime="0">
                      <discreteobjectkeyframe.value>
                        <solidcolorbrush color="Gray" />
                      </discreteobjectkeyframe.value>
                    </discreteobjectkeyframe>
                  </objectanimationusingkeyframes>
                </storyboard>
              </vsm:visualstate>
            </vsm:visualstategroup>
          </vsm:visualstatemanager.visualstategroups>
          <border background="{TemplateBinding Background}"
              borderbrush="{TemplateBinding BorderBrush}"
              borderthickness="{TemplateBinding BorderThickness}"
              padding="{TemplateBinding Padding}"
              cornerradius="2">
            <contentcontrol x:name="ContentControl"
                    foreground="{TemplateBinding Foreground}"
                    content="{TemplateBinding Content}"
                    contenttemplate="{TemplateBinding ContentTemplate}"
                    fontweight="{TemplateBinding FontWeight}"
                    cursor="{TemplateBinding Cursor}"
                    horizontalalignment="{TemplateBinding HorizontalAlignment}"
                    horizontalcontentalignment="{TemplateBinding HorizontalContentAlignment}"
                    fontfamily="{TemplateBinding FontFamily}"
                    fontsize="{TemplateBinding FontSize}"
                    fontstretch="{TemplateBinding FontStretch}"
                    verticalalignment="{TemplateBinding VerticalAlignment}"
                    verticalcontentalignment="{TemplateBinding VerticalContentAlignment}"
                    istabstop="False" />
          </border>
        </grid>
      </controltemplate>
    </setter.value>
  </setter>
</style>
<!-- END SDK LABEL HACK
///////////////////////////////////////////////////////////////////////////// -->

, , , ,

Leave a comment

Web Services for both AJAX Based and Silverlight Based Clients – Part I

Back in the nineties, I did some development on the old Palm Pilot devices and later tinkered with some Windows CE development as well as .Net development on Windows Mobile 5.x devices, but the experience always left me feeling a little underwhelmed. However the recent popularity of touch screen based mobile devices such as the iPhone, iPad, various Android based devices, and now the new Windows Phone 7 launch has inspired me to investigate mobile software development again.

In that pursuit, I decided to attend the local Microsoft Presents — Windows Phone 7 Unleashed event put on by the South Colorado .NET User Group in Colorado Springs. The event turned out to be a good time and provided some good hands on labs to experience what development on a Windows Phone 7 device entails. Let me just say that nearly two years ago I had heard that bringing Silverlight development to the mobile market was in the works at Microsoft and the potential prospects that could provide was a factor in my decision to invest time in learning Silverlight on the desktop. Microsoft has done a good job of ensuring those skills transfer to the mobile development experience on Windows Phone 7. I was amazed at how easily a colleague and I were able to put together a Silverlight and WCF Service enabled Windows Phone 7 application during our hands-on labs.

Given my positive experience with Windows Phone 7 mobile application development, I began wondering how I might tailor the design and architecture of the web applications I’m building today to be ready for mobile integration in the near future. The web applications I build today are generally done as ASP.Net and/or Silverlight clients and frequently make use of AJAX and/or Web Services to access server-side systems and data. Additionally, I’ve been making a strong push to leverage jQuery in my solutions so being able to work with jQuery’s AJAX services would be a huge plus.

Service Categories

For the purpose of this discussion, let me start by defining two general categories of web services, each targeted at solving different problems. The first are what I’d call private application services, where the client-side and server-side components of the system are generally controlled by the same developing party. Their interfaces and features are often purpose-specific and aren’t necessarily intended for general public consumption. These types of services are well suited to JSON and AJAX implementations.

The second type of service category could be described as public services, where the service itself is the application and its purpose is to expose data and features to any number of clients both known and unknown. Often these are implemented as RESTful services because of their discoverable nature and cross-platform compatibility. It’s the first category of services that I plan to discuss today.

Private application services generally fall into two groups that differ primarily in intended consumption scope – local or application wide. For those who follow the MVC or MVVM design patterns, local scope web services can be thought of as view-specific callbacks with very limited scope such as a specific page or component on a page. In standard ASP.Net web applications they are often implemented as a WebMethod on an ASPX page or using traditional web services (.ASMX files). Application wide services, where the reuse of the service is unlikely to extend beyond multiple pages in an application or maybe a set of related applications, are often implemented as standard web services using ASMX files or using WCF.

A number of projects I’m currently working on have a need for both local and application wide services which can be called using jQuery’s AJAX features. I also have a desire to share the application wide services with Silverlight clients and want to leverage the binary XML serialization that was made available starting with Silverlight 3 when accessing WCF services. This requirement falls right in line with Windows Phone 7 requirements and would allow me to work with these same services when doing mobile development on that platform.

So to cut short what is turning out to be a fairly long blog post, I believe I’ve come up with a project configuration that meets all my requirements.

  1. I am able to easily make JSON formatted AJAX calls, using jQuery, to page-level Web Methods, traditional ASMX Web Service methods, and WCF service methods using the same client-side syntax. This will allow me to organize my services into functional groups and scope their reuse as appropriate (page, in-application, or cross-application).
  2. I’ve also figured out a way to configure WCF services so that they are simultaneously accessible as JSON based services for AJAX clients as well as binary XML based services for Silverlight and Windows Phone 7 clients. This simply requires specific web.config file settings.

Stay tuned for a follow-up post on this subject, where I will walk you through samples of this configuration using Visual Studio 2010, jQuery and the new templating plug-in, WCF, and Silverlight 4.

, , , , , ,

Leave a comment

%d bloggers like this: