WPF 创建Bar Chart

最新推荐文章于 2024-08-16 17:00:00 发布

flysh05

最新推荐文章于 2024-08-16 17:00:00 发布

阅读量194

点赞数

分类专栏： C# 编程文章标签： WPF 数据绑定创建BarChart 数据模板

本文链接：https://blog.csdn.net/flysh13/article/details/124877352

版权

C# 编程专栏收录该内容

223 篇文章 22 订阅

订阅专栏

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

效果如下：

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>