A Guided Tour of WPF – Part 1 (XAML)

<Window x:Class="WpfHorseRace.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="The WPF Derby" 
    xmlns:local="clr-namespace:WpfHorseRace" 
    Background="White"
    Width="710" Height="710" 
    WindowStartupLocation="CenterScreen"
    FontSize="13"
    >
  <Grid>
    <Grid.Background>
      <ImageBrush ImageSource="Resources/Background.jpg" Opacity="0.25" />
    </Grid.Background>
    
    <Grid.RowDefinitions>
      <!-- The top row is for the race track. -->
      <RowDefinition Height="*" />
      <!-- The bottom row is for the command strip. -->
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

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

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

    <!-- The 'Race Track' area. -->
    <ItemsControl x:Name="raceTrack" 
      Grid.Row="0" 
      HorizontalAlignment="Stretch"
      LayoutTransform="{StaticResource RaceTrackRotateTrans}"       
      Margin="8" 
      VerticalAlignment="Center"
      />

    <!-- 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. -->
      <Border.Background>
        <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" />
        </LinearGradientBrush>
      </Border.Background>
      <Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
          <StackPanel.Resources>
            <!-- 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" />
            </Style>
            <local:DoubleToIntegerConverter x:Key="RotationDisplayConv" />            
          </StackPanel.Resources>
          
          <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"         
            Margin="2,0" 
            Minimum="-90" Maximum="90" 
            Width="120" 
            Value="{Binding Source={StaticResource RaceTrackRotateTrans}, Path=Angle}" 
            />
          <TextBlock Text="{Binding ElementName=rotationSlider, Path=Value, Converter={StaticResource RotationDisplayConv}}" />
          <TextBlock xml:space="preserve"> degrees</TextBlock>
        </StackPanel>

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