Flags of World Cup Soccer 2006


Inspired by watching a number of World Cup matches, I’ve created XAML drawing images representing the flags of the eight quarterfinalists in World Cup 2006. The images were created using Expression Graphic Designer and exported as DrawingImage resources. For more information on converting Graphic Designer content to XAML, see the Creating XAML Drawing Images with Graphic Designer posting.


At the bottom of this posting, you can find an attached XAML file (WorldCupSoccerFlags.xaml) that contain the flags defined as DrawingImage resources:


Flags of World Cup Soccer 2006


You may have noticed that there is an extra flag for the United Kingdom. I accidentally created this flag because I didn’t realize at first that there is a separate English flag. I decided to include the UK flag with the other eight flags anyway, since I had spent time creating it! 🙂






A Closer Look at the XAML Content
The WorldCupSoccerFlags.xaml file defines the flags as DrawingImage objects that are part of the Page.Resources content. The flag content is referenced by Image objects, using the Source property:

<Image
  Margin=20
 
Height=240
 
Source={StaticResource Argentina_Flag}
/>

Notice that the Image object’s Height property determines the displayed size of the flag content. Since the flag content is a vector graphic, it scales nicely no matter the displayed size.

The Image objects containing the flag content are defined within a FlowDocument and FlowDocumentReader. These objects provide flow document features that allow you to resize and repaginate the contained content:


<FlowDocumentReader ViewingMode=Scroll>
  <
FlowDocument ColumnWidth=800.0
>

  <
Paragraph
>
    Argentina
    <LineBreak
/>
    <
Image Margin=20 Height=240

     
Source={StaticResource Argentina_Flag}/>
  </
Paragraph
>
    …

  </FlowDocument>
</FlowDocumentReader>


Try resizing the flow document by moving the slider in the flow document reader tool bar:


DocumentReader viewer controls
FlowDocumentReader tool bar


Graphic Designer Info
The Expression Designers blog provides a lot of good info on how to use the Graphic Designer product.


Enjoy,
Lorin

About Us



We are the Windows Presentation Foundation SDK writers and editors.

WorldCupSoccerFlags.xaml

Comments (1)

  1. barkest says:

    great job on the flags but the union jack has very definate characteristics

    http://en.wikipedia.org/wiki/Union_Jack

    there are broader white stripes that enable you to fly it the right way up.

    i know it does not matter for this but its nice to know for future reference. I cant believe you did not know we have an English flag 🙁 and we even have our own national anthem, and no before you ask we are not stuck in the Victorian age we now have TV’s and cars over here.

    😉

    this is a great blog btw.