Click here to Skip to main content
12,883,272 members (40,406 online)
Click here to Skip to main content


784 bookmarked
Posted 31 Mar 2007

A Guided Tour of WPF – Part 1 (XAML)

, 19 Apr 2007 CPOL
A guided tour of the Windows Presentation Foundation, one feature at a time.
<Window x:Class="WpfHorseRace.Window1"
    Title="The WPF Derby" 
    Width="710" Height="710" 
      <ImageBrush ImageSource="Resources/Background.jpg" Opacity="0.25" />
      <!-- The top row is for the race track. -->
      <RowDefinition Height="*" />
      <!-- The bottom row is for the command strip. -->
      <RowDefinition Height="Auto" />

        <!-- Import the resource dictionary which contains the DataTemplate for the RaceHorse class. -->
          <ResourceDictionary Source="Resources/RaceHorseDataTemplate.xaml" />

        <!-- This RotateTransform is referenced by the ItemsControl (race track) and Slider. -->
        <RotateTransform x:Key="RaceTrackRotateTrans" Angle="0" />

    <!-- The 'Race Track' area. -->
    <ItemsControl x:Name="raceTrack" 
      LayoutTransform="{StaticResource RaceTrackRotateTrans}"       

    <!-- The 'Command Strip' area -->
    <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="8" Margin="12,4">
      <!-- The background of the command strip area is set via an inline resource. -->
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" Opacity="0.8">          
          <GradientStop Color="#FFFFFF" Offset="0" />
          <GradientStop Color="#22AA22" Offset="0.7" />
          <GradientStop Color="#448844" Offset="0.95" />
          <GradientStop Color="#EEEEEE" Offset="1" />
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
            <!-- This Style is applied to all TextBlock elements in the command strip area. -->
            <Style TargetType="TextBlock">
              <Setter Property="VerticalAlignment" Value="Center" />
              <Setter Property="Foreground" Value="#EE000000" />
            <local:DoubleToIntegerConverter x:Key="RotationDisplayConv" />            
          <TextBlock Margin="10,4">Rotation: </TextBlock>
          <!-- This Slider is bound to the angle of rotation applied to the ItemsControl 'race track.' -->
          <Slider x:Name="rotationSlider"         
            Minimum="-90" Maximum="90" 
            Value="{Binding Source={StaticResource RaceTrackRotateTrans}, Path=Angle}" 
          <TextBlock Text="{Binding ElementName=rotationSlider, Path=Value, Converter={StaticResource RotationDisplayConv}}" />
          <TextBlock xml:space="preserve"> degrees</TextBlock>

        <TextBlock Margin="10,4" HorizontalAlignment="Right">
          <Hyperlink x:Name="lnkStartNewRace">Start new race</Hyperlink>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Josh Smith
Software Developer (Senior) Cynergy Systems
United States United States
Josh creates software, for iOS and Windows.

He works at Cynergy Systems as a Senior Experience Developer.

Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.

Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.

Check out his Advanced MVVM[^] book.

Visit his WPF blog[^] or stop by his iOS blog[^].

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170422.1 | Last Updated 19 Apr 2007
Article Copyright 2007 by Josh Smith
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid