14주차 WinForm과 WPF 및 LiveChart

 

이번주차는 Winform과 WPF 의 차이점에 대해 알아 가고자 합니다.

 

•비슷하지만 다른 점도 많다

•Chart Control은 WinForm에는 있지만, WPF에는 없다

•3rd Party 제품을 사용해야 한다(Nuget Package 설치)

•유료 제품이 많지만(회사에서는 유료 제품을 많이 사용함)
LiveChart는 무료이고 오랫동안 사용됨

 

LiveChart  에 대하여 

우선 설치를 해줍니다 .

Nuget Package 들어간 후  LiveCharts.Wpf를 검색하여 다운로드 받아줍니다. 

 

 

디자인코드 

 

<Window x:Class="LiveChart2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:local="clr-namespace:LiveChart2"
        mc:Ignorable="d"
        Title="House Sales" Height="450" Width="800">
  <Grid>
    <lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Top">
      <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="Seller" Labels="{Binding xMarks}" >
          <lvc:Axis.Separator>
            <lvc:Separator Step="1"/>
          </lvc:Axis.Separator>
        </lvc:Axis>
      </lvc:CartesianChart.AxisX>
      <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="Amount" Labels="{Binding Values}"/>
      </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>
  </Grid>
</Window>

 

 

Xml namespace 추가해줘야 합니다.

 

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

 

CS 코드 

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Windows;

namespace LiveChart2
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      SeriesCollection = new SeriesCollection {
        new LineSeries  // ColumnSeries는 막대그래프, LineSeries는 선 그래프
        { Title = “2020”, Values = new ChartValues<double> { 3, 5, 7, 4, 7, 15, 4, 8 } },
        new LineSeries
        { Title = “2021”, Values = new ChartValues<double> { 5, 6, 2, 7, 8, 5, 10, 6 } },
        new LineSeries
        { Title = “2022”, Values = new ChartValues<double> { 8, 7, 6, 9, 7, 9, 13, 7 } } };
      xMarks = new string[] { “Susan”, “Tom”, “Jerry”, “Mike”, “Steve”, “Bill”, “Tom”, “John” };
      Values = value => value.ToString(“N”);
      DataContext = this; // Data binding 할 때 필요함
    }

    public SeriesCollection SeriesCollection { get; set; }
    public string[] xMarks { get; set; }
    public Func<double, string> Values { get; set; }  // 매개변수 double을 string으로 리턴하는 델리게이트 
  }
}

using LiveCharts;

using LiveCharts.Wpf;

 

위에 두개를 추가해줘야합니다. 

 

 

또한  

Grid를 쪼개서 넣어야합니다.

 

 <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Margin="10" HorizontalAlignment="Center" FontSize="20" 
               Text="Anual House Sales Summary"/>
    <lvc:CartesianChart Grid.Row="1" Series="{Binding SeriesCollection}" LegendLocation="Top">
      <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="Seller" Labels="{Binding xLabel}" >
          <lvc:Axis.Separator>
            <lvc:Separator Step="1"/>
          </lvc:Axis.Separator>
        </lvc:Axis>
      </lvc:CartesianChart.AxisX>
      <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="Amount" Labels="{Binding Values}"/>
      </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>
  </Grid>

 

 

결과창 

 

 

 

점을 이은 그래프 말고 막대 그래프로 그리고 싶다면

LineSeries부분을 전부  ColumnSeries로 바꾸어 주기만 하면 됩니다.