通过数据绑定，数据模板，触发器实现

效果如下：

1. 创建数据模型

public class Course

{

  public string Name { get; set; }

  public int Grade { get; set; }

}

2.创建数据模型的集合

public class Courses

{

  public List<Course> CourseList { get; set; } = GetCourses();

  public static List<Course> GetCourses()

  {

    return new List<Course>()

    {

          new Course {Name="Math", Grade=77*3},

          new Course {Name="Science", Grade=97*3},

          new Course {Name="English", Grade=87*3},

          new Course {Name="Art", Grade=67*3},

          new Course {Name="Chinese", Grade=80*3}

      }.ToList();

  }

}

数值乘以3的目的是让创建的条形图变成长一些，视图更佳。

3. 添加DataContent

<Window.DataContext>

  <local:Courses/>

</Window.DataContext>

4.UI创建数据绑定

<Grid>

<DockPanel Margin="5">

  <TextBlock FontWeight="Black" FontSize="30" DockPanel.Dock="Top" Margin="3">Bar Chart Demo</TextBlock>

  <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

    <TextBlock FontWeight="Black" Margin="3" Text="Math" FontSize="20" Foreground="Blue"/>

    <TextBlock FontWeight="Black" Margin="3"  Text="Science" FontSize="20" Foreground="Orange"/>

    <TextBlock FontWeight="Black" Margin="3"  Text="English" FontSize="20" Foreground="Green"/>

    <TextBlock FontWeight="Black" Margin="3"  Text="Art" FontSize="20" Foreground="Red"/>

    <TextBlock FontWeight="Black" Margin="3"  Text="Chinese" FontSize="20" Foreground="Violet"/>

  </StackPanel>

<ListBox DockPanel.Dock="Bottom" Margin="3" x:Name="listChart"

                    ItemsSource="{Binding CourseList}"

                    >

    <ListBox.ItemTemplate>

      <DataTemplate>

        <Rectangle Height="30" Width="{Binding Grade}">

            <!-- Fill="LightGreen"-->

            <Rectangle.Style>

              <Style TargetType="Rectangle">

                <Setter Property="Fill" Value="Black"/>

            <Style.Triggers>

              <DataTrigger Binding="{Binding Name}" Value="Math">

                <Setter Property="Fill" Value="Blue"></Setter>

              </DataTrigger>

              <DataTrigger Binding="{Binding Name}" Value="Science">

                  <Setter Property="Fill" Value="Orange"></Setter>

              </DataTrigger>

              <DataTrigger Binding="{Binding Name}" Value="English">

                  <Setter Property="Fill" Value="Green"></Setter>

              </DataTrigger>

              <DataTrigger Binding="{Binding Name}" Value="Chinese">

                  <Setter Property="Fill" Value="Red"></Setter>

              </DataTrigger>

              <DataTrigger Binding="{Binding Name}" Value="Art">

                  <Setter Property="Fill" Value="Violet"></Setter>

                </DataTrigger>

</Style.Triggers>

      </Style>

            </Rectangle.Style>

          </Rectangle>

        </DataTemplate>

      </ListBox.ItemTemplate>

    </ListBox>

  </DockPanel>

</Grid>