XAML as an everywhere presentation format

XAML, the Extensible Application Markup Language, lets .NET developers and designers define the key elements of a UI. What's more, it accommodates both WPF and SIlverlight.

XAML, the Extensible Application Markup Language, lets .NET developers and designers define the key elements of

a UI. What's more, it accommodates both Windows Presentation Foundation and SIlverlight, as this tip demonstrates.


Developing a Windows application entails knowing your way around the usual suspects in terms of software development -- an IDE or text editor, a mechanism to access your data source, some business logic and a final layout for end users to appreciate.

Prior to the appearance of the .NET Framework, there were many techniques and APIs one could use to achieve such results. Fortunately, .NET has brought great success in unifying various areas in this respect, to the benefit of developers who can now focus on core issues that can be applied equally across programming languages -- C#, Visual Basic .NET and J#, among others -- and application tiers like ASP.NET and ADO.NET. Up next we will focus our attention on one of these unified approaches in the form of a presentation format named XAML (Extensible Application Markup Language).

What is particularly interesting about XAML, from an application lifecycle point of view, is its influence on creating applications targeting both desktops (think rich client) and Web-bound interfaces. In the area of rich-client applications, XAML is an important building block for the Windows Presentation Foundation (WPF), which in itself is one of the main pillars for the .NET Framework 3.0 and onward. On the other hand, in the area of Web applications, XAML plays an equally important in the use of Silverlight, a rich, interactive runtime that is now being distributed alongside Microsoft's flagship browser Internet Explorer. (Silverlight also works inside the Firefox and Safari browsers, as well as on the Mac and, soon, on Linux.)

While both WPF and Silverlight possess numerous inner workings unique unto themselves, it is to the benefit of those performing user interface design that both technologies leverage the same presentation language in XAML to create layouts, colors, styles, ToolTips and every other little aspect related to presentation. XAML, being a markup language, relies on the use of tags -- a la <html> or <xml> -- to define a wide range of behaviors and effects that are then visually rendered by either a .NET runtime or Silverlight runtime. For example, look at the following snapshot, which illustrates a rich-client interface composed using XAML. (Click on the image to see it at its full size.)

Figure 1: XAML rendered in WPF (Source: Microsoft WPF Quick Start sample)

All the presentation features, including layout, color effects, buttons and events are achieved with unique tags that make up XAML (in this particular case, the presentation rendered via a .NET runtime in the form of a rich client) is composed from markup, which is in part presented here:

    <DataTemplate x:Key="mainScreenTemplate">
      <Border BorderBrush="LimeGreen" BorderThickness="2"
              CornerRadius="3" Margin="15">
        <Grid>
          <!-- Background image if no video is playing. -->
          <Image Source="Images\Crystal.jpg" Stretch="Fill"/>
          <!-- The video -->
          <!-- The Source property of the video is bound to the Source 
                     property of the current MyVideo object.-->
          <MediaElement Name="mainVideo" Stretch="Fill"
                        Source="{Binding Path=Source}"/>
        </Grid>
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="listBoxTemplate">
      <DataTemplate.Resources>
        <Style TargetType="DockPanel">
          <Setter Property="Cursor" Value="Hand"/>
          <Setter Property="ToolTipService.ShowDuration" Value="80000"/>
          <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="ToolTip" Value="{StaticResource PreviewScreen}"/>
            </Trigger>
          </Style.Triggers>
        </Style>
      </DataTemplate.Resources>
      <DockPanel Height="70" Width="160">
        <Border Margin="4,5,0,0" Height="50" Width="50">
          <Image Source="Images\Preview.png" />
        </Border>
        <TextBlock Text="{Binding Path=VideoTitle}" VerticalAlignment="Center"
                   TextBlock.TextTrimming="WordEllipsis" Margin="5,5,0,5"
                   Foreground="White" FontSize="12" FontFamily="Comic Sans MS">
        </TextBlock>
      </DockPanel>
    </DataTemplate>

    <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
      <Setter Property="Margin" Value="10,10,10,0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Grid>
              <Rectangle x:Name="GelBackground" RadiusX="9" RadiusY="9"
                         Opacity="1" Fill="{TemplateBinding Background}"
                         Stroke="#66ffffff" StrokeThickness="1" />
              <Rectangle x:Name="GelShine" RadiusX="6" RadiusY="6"
                         Opacity="1" Margin="2,2,2,0" VerticalAlignment="top"
                         Stroke="transparent" Height="15">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="#ccffffff" Offset="0" />
                        <GradientStop Color="transparent" Offset="1" />
                      </GradientStopCollection>
                    </GradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Grid>
            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation To="LimeGreen" Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
              <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="true">
          <Setter Property="Background" Value="RoyalBlue" />
        </Trigger>
      </Style.Triggers>
    </Style>

In the previous listing, numerous tags are self-explanatory, such as the use of <Border>, <Image>, <MediaElement> and <Style>, which through attributes specify even more finely grained presentation details. Additionally, you will find basic geometry elements, such as <Rectangle> and >LinearGradientBrush>, as well as behavioral presentation elements like <EventTrigger>, which are used to detect user interactions on the interface. These are just a sampling of the entire body of XAML tags available to designers.

Another important aspect is how this last XAML listing is devoid of any application logic and simply provides a visual veneer over the core of an application. It leaves a clean separation between presentation and code, which fosters easier modifications to both the visual display of an application and its internal workings.

Still, let's assume you wanted to offer these same visual effects created for your rich-client users, using WPF, to visitors via the Internet. Well, you can do so using essentially the same XAML elements, thanks to Silverlight.

In this scenario, the boon of being able to leverage XAML in Web environments is that your applications will be able to offer effects beyond the basic staple Web languages -- HTML, CSS and JavaScript -- without diverging into specialized Web-centric platforms like Flash or Java (which until recently were the only options available for such effects), all whilst staying within the same knowledge domain applicable for both your rich-client and Web-based presentation needs. Figure 2 shows a Web-based application rendered in Silverlight:

Figure 2: XAML rendered in Silverlight (Source: Microsoft Netherlands)

Though it's somewhat difficult to appreciate statically -- see source links for live samples -- the same rounded images with colored shadows, the capability to play videos while hovering over images, and the integrated toggling capabilities are all achievable using practically the same XAML elements presented in the earlier WPF sample.

Once again, even though there are particularities behind each approach -- such as knowing C# or Visual Basic for structuring WPF apps and JavaScript and HTML for Silverlight 1.0 -- a XAML structure is decoupled from the bulk of the logic present in an application, which inclusively for those accustomed to Web-based development is a technique very much in-line with the classical style-sheet design.

As far as composing XAML layouts is concerned, Microsoft's main development environment in the form of Visual Studio 2008 already incorporates numerous facilities to easily and visually create rich-application interfaces in this form, additionally there are also a series of third-party tools catering to the needs of more sophisticated interface designers needing to make their way around XAML; meanwhile, for those accustomed to a more 'nuts & bolts' approach, XAML, being of a tag-based nature, can also be easily manipulated with an XML or text editor.

Though the appearance of both WPF and Silverlight is just making headway among Windows developers, the use of XAML in both technologies should be welcome relief for those tired of dealing with fragmented approaches for creating user interfaces. As a result, it should also give XAML a leading position as an everywhere presentation format.

Daniel Rubio is an independent technology consultant with more than 10 years of experience in enterprise and Web-based software. He blogs regularly on these and other software areas at www.webforefront.com.


This was first published in March 2008

Dig deeper on .NET Framework development with XML and XAML

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

SearchCloudComputing

SearchSoftwareQuality

SearchSOA

TheServerSide

SearchCloudApplications

Close