Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

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.
wpfhorserace.zip
WpfHorseRace
WpfHorseRace
Properties
Settings.settings
Resources
Background.jpg
RaceHorse.gif
wpfhorserace_exe.zip
WpfHorseRace.exe
<!-- This resource dictionary contains a DataTemplate for the RaceHorse class. -->
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfHorseRace" 
  >
  <!-- Import the resource dictionary which contains the Style applied to Border of each horse's "pit". -->
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="RacePitBorderStyle.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <DataTemplate DataType="{x:Type local:RaceHorse}">
    <DataTemplate.Resources>
      <LinearGradientBrush x:Key="RaceInProgressBrush" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Color="#1100CC22" Offset="0" />
        <GradientStop Color="#8800CC22" Offset="0.97" />
        <GradientStop Color="#AA10FF18" Offset="0.999" />
        <GradientStop Color="#44FFFFFF" Offset="1" />
      </LinearGradientBrush>

      <LinearGradientBrush x:Key="FinishedBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#44FF0000" Offset="0.1" />
        <GradientStop Color="#11FF0000" Offset="0.9" />
      </LinearGradientBrush>

      <LinearGradientBrush x:Key="WinnerBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="Gold" Offset="0.1" />
        <GradientStop Color="#FFFFFF88" Offset="0.9" />
      </LinearGradientBrush>

      <local:RaceHorseProgressIndicatorWidthConverter x:Key="WidthConv" />
    </DataTemplate.Resources>

    <Border x:Name="racePit" Style="{StaticResource RacePitBorderStyle}">
      <Grid Width="{Binding ElementName=racePit, Path=ActualWidth}">        
        <StackPanel Orientation="Horizontal">
          <!-- This Rectangle "follows" a horse as it runs the race. -->
          <Rectangle x:Name="progressIndicator"
            Fill="{StaticResource RaceInProgressBrush}"
            HorizontalAlignment="Left" 
            RadiusX="8" 
            RadiusY="8"
            Margin="1"
            >
            <!-- The width of the progress indicator is calculated by an instance
                 of the RaceHorseProgressIndicatorWidthConverter class. -->
            <Rectangle.Width>
              <MultiBinding Converter="{StaticResource WidthConv}">
                <Binding Path="PercentComplete" />
                <Binding ElementName="racePit" Path="ActualWidth" />
              </MultiBinding>
            </Rectangle.Width>
          </Rectangle>

          <!-- Displays the picture of a race horse. -->
          <Image Source="RaceHorse.gif" Height="60" Width="80"/>
        </StackPanel>

        <TextBlock x:Name="horseName" Text="{Binding Name}"  Margin="6,0" VerticalAlignment="Center" Foreground="White" />
      </Grid>
      
      <!-- Make the race pit display a tooltip which shows how much of the race the horse has completed. -->
      <Border.ToolTip>
        <ToolTip>
          <Grid>
            <TextBlock>
              <TextBlock Text="{Binding PercentComplete}" Margin="0,0,-2,0" />
              <Run>% finished</Run>
            </TextBlock>
          </Grid>
        </ToolTip>
      </Border.ToolTip>
    </Border>

    <DataTemplate.Triggers>
      <!-- This MultiDataTrigger affects losers of the race. -->
      <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
          <Condition Binding="{Binding IsFinished}" Value="True" />
          <Condition Binding="{Binding IsWinner}" Value="False" />          
        </MultiDataTrigger.Conditions>
        <!-- Apply the "finished the race" brush to the horse's progress indicator. -->
        <Setter TargetName="progressIndicator" Property="Fill" Value="{StaticResource FinishedBrush}" />

        <!-- Fade the race pit in and out if the horse lost the race. -->
        <MultiDataTrigger.EnterActions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetName="racePit" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0:0:0.75" />
            </Storyboard>
          </BeginStoryboard>
        </MultiDataTrigger.EnterActions>
        <MultiDataTrigger.ExitActions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetName="racePit" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.25" />
            </Storyboard>
          </BeginStoryboard>
        </MultiDataTrigger.ExitActions>
      </MultiDataTrigger>            

      <!-- Set special values for the winner of the race. -->
      <DataTrigger Binding="{Binding IsWinner}" Value="True">
        <Setter TargetName="progressIndicator" Property="Fill" Value="{StaticResource WinnerBrush}" />
        <Setter TargetName="horseName" Property="Foreground" Value="Black" />
        <Setter TargetName="horseName" Property="FontWeight" Value="Bold" />
        <Setter TargetName="horseName" Property="HorizontalAlignment" Value="Center" />
      </DataTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
</ResourceDictionary>

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.

License

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

Share

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[^].
Follow on   Twitter

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