Click here to Skip to main content
12,698,775 members (23,663 online)
Click here to Skip to main content


784 bookmarked

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.
<!-- This resource dictionary contains a DataTemplate for the RaceHorse class. -->
  <!-- Import the resource dictionary which contains the Style applied to Border of each horse's "pit". -->
    <ResourceDictionary Source="RacePitBorderStyle.xaml" />

  <DataTemplate DataType="{x:Type local:RaceHorse}">
      <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 x:Key="FinishedBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#44FF0000" Offset="0.1" />
        <GradientStop Color="#11FF0000" Offset="0.9" />

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

      <local:RaceHorseProgressIndicatorWidthConverter x:Key="WidthConv" />

    <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}"
            <!-- The width of the progress indicator is calculated by an instance
                 of the RaceHorseProgressIndicatorWidthConverter class. -->
              <MultiBinding Converter="{StaticResource WidthConv}">
                <Binding Path="PercentComplete" />
                <Binding ElementName="racePit" Path="ActualWidth" />

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

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

      <!-- This MultiDataTrigger affects losers of the race. -->
          <Condition Binding="{Binding IsFinished}" Value="True" />
          <Condition Binding="{Binding IsWinner}" Value="False" />          
        <!-- 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. -->
              <DoubleAnimation Storyboard.TargetName="racePit" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0:0:0.75" />
              <DoubleAnimation Storyboard.TargetName="racePit" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.25" />

      <!-- 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" />

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...

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