WPF 创建Bar Chart
通过数据绑定，数据模板，触发器实现
效果如下：
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>
