fortes.com

In my last post, I mentioned how the Stretch.UniformToFill value can be a useful tool when creating a layout. In this post, we’ll use the functionality to create this flyer for the Tea Kitchen, a cozy little spot where all my imaginary friends hang out.

Raw Materials

The original tea cup image comes from Michael Connors, found via the morgueFile — I’ve mirrored the file locally on this server. The font is Bickham Script Pro.

Markup

Here’s the markup that produced the screenshot above:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" Margin="10">
  <Grid MinHeight="150" MaxHeight="640" MinWidth="250" MaxWidth="480">
    <Image VerticalAlignment="Center" Stretch="UniformToFill" Source="http://fortes.com/2005/07/15/teakitchen/teacup.jpg" />
    <Viewbox>
      <TextFlow Height="220" Foreground="VerticalGradient #ffff #afff"
                Width="400" FontSize="80" VerticalAlignment="Center" FontFamily="Bickham Script Pro, Lucida Handwriting" LineHeight="90">
        <Paragraph>
          <Bold Typography.StylisticAlternates="1">T</Bold>e<Bold Typography.StylisticAlternates="1">a</Bold>
        </Paragraph>
        <Paragraph>
          <Bold Typography.StylisticAlternates="1">K</Bold>itche<Bold Typography.StylisticAlternates="5">n</Bold>
        </Paragraph>
      </TextFlow>
    </Viewbox>
  </Grid>
</Grid>

Notice that the Image has UniformToFill set for it’s Stretch property — this ensures that the background image won’t leave any empty space within the layout. The center of the teacup image is the important portion, so we’ve set VerticalAlignment to Center in order to keep the center of the image in view at all times, cropping the top and bottom portions of the picture when window isn’t tall enough to fit the entire image.

The text is contained within a Viewbox in order to scale up or down within the flyer, depending on the window size. I’ve used Stylistic Alternates in order to show the capital letters with big swashes.

Resize Behavior

When the window width is reduced, notice how we’re cropping the right-side of the image:

When we reduce the height, we’re cropping the top and bottom poritions of the image, keeping the center visible:

By using UniformToFill, we can ensure that the image in the background will both fill our window size while keeping the image at it’s original aspect ratio.

I’ve also set the MinWidth, MaxWidth, MinHeight, and MaxHeight properties on the parent Grid — outside of those size ranges, the flyer starts looking bad (the text is too small, or the image starts getting pixelated). I’ll talk about how we can deal with this issue in a future post.