fortes.com

In my last post, I briefly mentioned the difference between a layout-affecting transform and a render-only transform. Here’s a screenshot and markup for a quick sample which illustrates the difference between the two:

The screenshot shows a two by three Grid, with a Button and a Rectangle within each cell. The first row is used as a control, the Buttons in the second row have a layout-affecting transform, and those in the third have a render-only transform. Here’s the markup:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
  <Grid.RowDefinitions>
    <RowDefinition Height="150" />
    <RowDefinition Height="150" />
    <RowDefinition Height="150" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
  </Grid.ColumnDefinitions>

  <Rectangle Margin="5" Fill="VerticalGradient #99f #66c" />
  <Rectangle Margin="5" Fill="VerticalGradient #f9f #c6c" Grid.Column="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #9f9 #6c6" Grid.Row="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #f99 #c66" Grid.Row="1" Grid.Column="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #ff9 #cc6" Grid.Row="2" />
  <Rectangle Margin="5" Fill="VerticalGradient #9ff #6cc" Grid.Row="2" Grid.Column="1"/>

  <Button Margin="10">
    None
  </Button>
  <Button Grid.Column="1" Margin="10">
    None
  </Button>

  <TransformDecorator Transform="rotate 45" Grid.Row="1" Margin="10">
    <Button>Layout</Button>
  </TransformDecorator>
  <TransformDecorator Transform="scale 1.5" Grid.Column="1" Grid.Row="1" Margin="10">
    <Button>Layout</Button>
  </TransformDecorator>

  <Button RenderTransform="rotate 45" Grid.Row="2" Margin="10">
    Render
  </Button>
  <Button RenderTransform="scale 1.5" Grid.Row="2" Grid.Column="1" Margin="10">
    Render
  </Button>
</Grid>

As you can see, the cells with render-only transforms end up drawing outside of their cells. Unlike layout-affecting transforms, the render-only transforms do not factor into layout; the content’s layout is performed as usual, with a transformation applied to the final result.

Bickham Script Pro is a very sophisticated OpenType font, with very nice contextual alternates and ligatures. What sets Bickham apart is the alternate forms it provides — here are the ten (10!) different versions of the lowercase letter “h” available in the font:

In Avalon, you can choose between the alternates through the Typography.StylisticAlternates property. Most of the alternate forms shown above look best at the beginning of a word, but some (like #9) are meant for the end of the word.

Here’s the full markup for the screenshot shown above:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" HorizontalAlignment="Center">
  <Grid.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="Margin" Value="5" />
      <Setter Property="Padding" Value="20,0" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="#ccc" />
    </Style>
    <Style x:Key="AlternateDisplay" TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Bickham Script Pro" />
      <Setter Property="FontSize" Value="60" />
    </Style>
    <Style x:Key="AlternateLabel" TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Calibri, Verdana" />
      <Setter Property="FontSize" Value="20" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <Border>
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="0">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="1">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="2">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="2">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="3">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="3">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="4">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="4">h</Inline></TextBlock>
  </Border>
  <Border Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="5">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="1" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="6">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="2" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="7">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="3" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="8">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="4" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="9">h</Inline></TextBlock>
  </Border>

  <!-- Labels -->
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="0">0</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="1">1</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="2">2</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="3">3</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="4">4</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="0">5</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="1">6</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="2">7</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="3">8</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="4">9</TextBlock>
</Grid>