02 april 2007

VB Central community talk on WPF

Last Wednesday VB Central held another meeting at the pitoresque venue of Oosterkamp Training in Doorn, The Netherlands. The evening started of with Jacqueline van der Holst (senior developer at Avanade). She made her first public appearance with a talk on Linq. I think she did an excellent job covering Linq, given that Linq is a pretty hard and complex topic to learn, let alone talk about.

After the break I answered 5 common questions on Windows Presentation Foundation:

  1. Why?
  2. Is it difficult?
  3. XAML?
  4. Windows or Web?
  5. WPF/e?

As always I put everyone's patience to the test by going a good half hour over my alotted time of 1 hour 15 minutes. I had the impressions everyone was enjoying the things they were hearing about WPF. Thanks again for sitting it out.

The slidedeck and demos are available from here, here and on VB Central. Jacqueline's slides should be up there as well.

The demo featured a +/- 40 line demo of XAML that showed it all:

  • XAML syntax (property-element syntax, attached properties, markup extensions and so on)
  • layout (panels and grids)
  • resources (page and application level)
  • styling
  • templating (control templates, itempanel templates and datatemplates)
  • data binding
  • calling into CLR objects from XAML
  • typography
  • events (although I did not show this during the presentation)

I tried to squeeze in as much as possible. The end result, albeit simple in visuals, is shown as a Internet Explorer XBAP in the picture below.

Edwin Jongsma (also from Avanade) even challenged me to do a reflection of the whole button. I believe I did get close, but missed the Rectangle.Fill (stupid, stupid). Just to prove that it is easy, here is the completed result. A little more than the five lines of XAML I mentioned (those were just the Rectangle with a VisualBrush as the Fill), but this one has a transformation and opacity mask.

    <Button Grid.Row="0" Content="Quick &amp; Effective WPF"

            Width="320" Height="150" HorizontalContentAlignment="Center"

            Style="{StaticResource Style1}" x:Name="Button1">

      <Button.Template>

        <ControlTemplate TargetType="{x:Type Button}">

          <StackPanel>

            <Image Source="class-a.jpg" x:Name="image" ></Image>

            <ContentPresenter />

          </StackPanel>

        </ControlTemplate>

      </Button.Template>

    </Button>

    <Rectangle Width="320" Height="150" Grid.Row="1">

      <Rectangle.Fill>

        <VisualBrush Visual="{Binding ElementName=Button1}">

          <VisualBrush.Transform>

            <TransformGroup>

              <ScaleTransform ScaleY="-1" />

              <TranslateTransform Y="160" />

            </TransformGroup>

          </VisualBrush.Transform>

        </VisualBrush>

      </Rectangle.Fill>

      <Rectangle.OpacityMask>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="Black" Offset="0" />

          <GradientStop Color="Transparent" Offset="1" />

        </LinearGradientBrush>

      </Rectangle.OpacityMask>

    </Rectangle>

 The fragment also shows the source of the Button control, but does not list the Style1 that is used. The bold part is the new code for the challenge.