Grocery List

posted 2005-04-03

Today I'll show you how to do something slightly more complicated with Avalon. First, we'll start with a grocery list written using Segoe Script, which I showed yesterday.

A grocery list written in a handwriting font

The markup here is fairly straightforward:

<TextFlow FontFamily="Segoe Script" FontSize="20">

  <Paragraph Margin="0, 16">
    Honey,
  </Paragraph>

  <Paragraph>
    Please pick these up from the store on your way home:
  </Paragraph>

  <List Typography.Fractions="Slashed" Margin="16">
    <ListItem>3/4 cup sugar</ListItem>
    <ListItem>1/2 cow's brain</ListItem>
    <ListItem>1/4 lb ostrich filet</ListItem>
  </List>
</TextFlow>

Even with a nice font, this list is pretty boring. Let's add a background and a dropdown list with some smarmy replies:

A grocery list written in a handwriting font with a yellow background

I've tweaked our markup by adding another row to the Grid, placing a ComboBox in the new row. I've also used a Rectangle to paint a light yellow background.

<Grid Margin="30">

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

  <Rectangle Fill="#ffc" Grid.RowSpan="2" />

  <!- Trimmed for brevity, see final markup ->
  <TextFlow FontFamily="Segoe Script" FontSize="20"
            Margin="20, 0" VerticalAlignment="Top" />

  <ComboBox FontFamily="Consolas" FontSize="20" Padding="10"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Center"
            Margin="20" Grid.Row="1">
    <ComboBoxItem IsSelected="True" FontFamily="Consolas"
                FontSize="20">
      Yes, Dear
    </ComboBoxItem>
    <ComboBoxItem FontFamily="Consolas" FontSize="20">
      Not tonight
    </ComboBoxItem>
    <ComboBoxItem FontFamily="Consolas" FontSize="20">
      You Never Call
    </ComboBoxItem>
  </ComboBox>
</Grid>

The note looks a little flat, we'll add some depth with a subtle gradient on the background and a light shadow:

A grocery list written in a handwriting font with a yellow, shadowed background

What I've done is changed the background of the Rectangle to a gradient. I've also added a second Rectangle with a mostly-transparent gray background and a SkewTransform to add a shadow effect. Here's our new markup:

<Grid Margin="30">

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

  <Rectangle Fill="#2666" Grid.RowSpan="2">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="1" AngleY="1" Center="0,0"/>
    </Rectangle.RenderTransform>
  </Rectangle>

  <Rectangle Fill="VerticalGradient #ffc #fea" Grid.RowSpan="2" />

  <!- Trimmed for brevity, see final markup ->
  <TextFlow Margin="20, 0" VerticalAlignment="Top" />

  <!- Trimmed for brevity, see final markup ->
  <ComboBox VerticalAlignment="Bottom"
            HorizontalAlignment="Center"
            Margin="20" Grid.Row="1" />
</Grid>

Finally, let's rotate the note slightly and let the note scale intelligently.

A grocery list written in a handwriting font with a yellow, shadowed background, rotated five degrees

I used the RenderTransform property to apply a RotateTransform to our top Grid, then I wrapped the entire Grid within a Viewbox for scaling. Here's our final, full markup:

<Viewbox xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
         xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
  <Grid Margin="30" Width="300">
    <Grid.RenderTransform>
      <RotateTransform Angle="-5" Center="150,200"/>
    </Grid.RenderTransform>

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

    <Rectangle Fill="#2666" Grid.RowSpan="2">
      <Rectangle.RenderTransform>
        <SkewTransform AngleX="1" AngleY="1" Center="0,0"/>
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Fill="VerticalGradient #ffc #fea"
               Grid.RowSpan="2" />

    <TextFlow FontFamily="Segoe Script" FontSize="20"
              Margin="20, 0" VerticalAlignment="Top">
      <Paragraph Margin="0, 16">Honey,</Paragraph>

      <Paragraph>
        Please pick these up from the store on your way home:
      </Paragraph>

      <List Typography.Fractions="Slashed" Margin="16">
        <ListItem>3/4 cup sugar</ListItem>
        <ListItem>1/2 cow's brain</ListItem>
        <ListItem>1/4 lb ostrich filet</ListItem>
      </List>
    </TextFlow>

    <ComboBox FontFamily="Consolas" FontSize="20" Padding="10"
              VerticalAlignment="Bottom"
              HorizontalAlignment="Center"
              Margin="20" Grid.Row="1">
      <ComboBoxItem IsSelected="True" FontFamily="Consolas"
                FontSize="20">
        Yes, Dear
      </ComboBoxItem>
      <ComboBoxItem FontFamily="Consolas" FontSize="20">
        Not tonight
      </ComboBoxItem>
      <ComboBoxItem FontFamily="Consolas" FontSize="20">
        You Never Call
      </ComboBoxItem>
    </ComboBox>
  </Grid>
</Viewbox>