---
lang: ja-jp
breaks: true
---
# LiveCharts を使ってみる。.NET Core 5.0 C# WPF 2021-07-12

## 参考

> Live-Charts/Live-Charts
> https://github.com/Live-Charts/Live-Charts

:::info
Live-Chartsをビルドする時に表示された警告。
:::

> Tutrial and samples
> https://lvcharts.net/App/examples/Wpf/start

## NuGet


## Material Design

https://lvcharts.net/App/examples/v1/Wpf/Material%20Design

### MainWindow.xaml

<Window
    x:Class="WPF_LiveCharts_test.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:local="clr-namespace:WPF_LiveCharts_test"
    mc:Ignorable="d"
    xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    Title="MainWindow"
    Height="450"
    Width="800">
    <Grid
        Margin="15, -60, 15, 15"
        MaxHeight="350">
        
        <Grid.Effect>
            <DropShadowEffect
                BlurRadius="15"
                Direction="-90"
                RenderingBias="Quality"
                Opacity=".2"
                ShadowDepth="1" />
        </Grid.Effect>
        
        <Grid.OpacityMask>
            <VisualBrush
                Visual="{Binding ElementName=Border1}" />
        </Grid.OpacityMask>
        
        <Grid.Resources>

            <!--
            -->
            <Style
                TargetType="lvc:LineSeries">
                <Setter
                    Property="StrokeThickness"
                    Value="3"></Setter>
                <Setter
                    Property="Stroke"
                    Value="White"></Setter>
                <Setter
                    Property="Fill"
                    Value="#4EFFFFFF"></Setter>
                <Setter
                    Property="PointGeometrySize"
                    Value="10"></Setter>
                <Setter
                    Property="LineSmoothness"
                    Value="10"></Setter>
            </Style>

            <!--
            -->
            <Style
                TargetType="lvc:Axis">
                <Setter
                    Property="ShowLabels"
                    Value="True"></Setter>
                <Setter
                    Property="IsEnabled"
                    Value="True"></Setter>
            </Style>
        </Grid.Resources>
        
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto"></RowDefinition>
            <RowDefinition
                Height="Auto"></RowDefinition>
            <RowDefinition
                Height=".50*"></RowDefinition>
            <RowDefinition
                Height=".5*"></RowDefinition>
        </Grid.RowDefinitions>
        
        <Border
            x:Name="Border1"
            Grid.Row="0"
            Grid.RowSpan="4"
            CornerRadius="5"
            Background="White" />
        <Border
            Grid.Row="0"
            Grid.RowSpan="3"
            Background="#CE2156" />
        <TextBlock
            Grid.Row="0"
            TextAlignment="Center"
            Padding="10, 10, 0, 5"
            Foreground="White"
            FontSize="18">
                    The Current Chart
        </TextBlock>

        <TextBlock
            Grid.Row="1"
            TextAlignment="Center"
            Foreground="#59FFFFFF"
            Padding="0,0,0,20">2014.12.25</TextBlock>
        
        <lvc:CartesianChart
            Grid.Row="2"
            Margin="0, 0, 0, 0"
            Series="{Binding LastHourSeries}"
            Hoverable="False"
            DataTooltip="{x:Null}">

            <lvc:CartesianChart.AxisX>
                <!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
                <lvc:Axis
                    MinValue="2"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            
        </lvc:CartesianChart>
        
        <StackPanel
            Grid.Row="3"
            VerticalAlignment="Center"
            Margin="25, 0">
            <TextBlock
                Opacity=".4"
                FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
            <StackPanel
                Orientation="Horizontal">
                <TextBlock
                    Foreground="#303030"
                    FontSize="40"
                    Text="{Binding LastLecture, StringFormat={}{0:N1}}" />
                <TextBlock
                    Foreground="#303030"
                    FontSize="18"
                    VerticalAlignment="Bottom"
                    Margin="8, 6">kWh</TextBlock>
            </StackPanel>
        </StackPanel>
        
    </Grid>
</Window>

### MainWindow.xaml

using System;
using System.ComponentModel;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;

namespace WPF_LiveCharts_test
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private double _lastLecture;
        private double _trend;

        public MainWindow()
        {
            InitializeComponent();

            LastHourSeries = new SeriesCollection
            {
                new LineSeries
                {
                    AreaLimit = -10,
                    Values = new ChartValues<ObservableValue>
                    {
                        new ObservableValue(3),
                        new ObservableValue(5),
                        new ObservableValue(6),
                        new ObservableValue(7),
                        new ObservableValue(3),
                        new ObservableValue(4),
                        new ObservableValue(2),
                        new ObservableValue(5),
                        new ObservableValue(8),
                        new ObservableValue(3),
                        new ObservableValue(5),
                        new ObservableValue(6),
                        new ObservableValue(7),
                        new ObservableValue(3),
                        new ObservableValue(4),
                        new ObservableValue(2),
                        new ObservableValue(5),
                        new ObservableValue(8)
                    }
                }
            };
            _trend = 8;

            Task.Run(() =>
            {
                var r = new Random();
                while (true)
                {
                    Thread.Sleep(500);
                    _trend += (r.NextDouble() > 0.3 ? 1 : -1) * r.Next(0, 5);
                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        LastHourSeries[0].Values.Add(new ObservableValue(_trend));
                        LastHourSeries[0].Values.RemoveAt(0);
                        SetLecture();
                    });
                }
            });

            DataContext = this;
        }

        public SeriesCollection LastHourSeries { get; set; }

        public double LastLecture
        {
            get { return _lastLecture; }
            set
            {
                _lastLecture = value;
                OnPropertyChanged("LastLecture");
            }
        }

        private void SetLecture()
        {
            var target = ((ChartValues<ObservableValue>)LastHourSeries[0].Values).Last().Value;
            var step = (target - _lastLecture) / 4;

            Task.Run(() =>
            {
                for (var i = 0; i < 4; i++)
                {
                    Thread.Sleep(100);
                    LastLecture += step;
                }
                LastLecture = target;
            });
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

## 実行確認


:::info
ビルド時に以下の警告がでるが、今のところ正常に動作している。

1>D:\Samples\CShape_Sample\WPF_LiveCharts_test\WPF_LiveCharts_test\WPF_LiveCharts_test.csproj : warning NU1701: パッケージ 'LiveCharts 0.9.7' はプロジェクトのターゲット フレームワーク 'net5.0-windows7.0' ではなく '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' を使用して復元されました。このパッケージは、使用しているプロジェクトとの完全な互換性がない可能性があります。
1>D:\Samples\CShape_Sample\WPF_LiveCharts_test\WPF_LiveCharts_test\WPF_LiveCharts_test.csproj : warning NU1701: パッケージ 'LiveCharts.Wpf 0.9.7' はプロジェクトのターゲット フレームワーク 'net5.0-windows7.0' ではなく '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' を使用して復元されました。このパッケージは、使用しているプロジェクトとの完全な互換性がない可能性があります。
1>D:\Samples\CShape_Sample\WPF_LiveCharts_test\WPF_LiveCharts_test\WPF_LiveCharts_test_w0pdprvo_wpftmp.csproj : warning NU1701: パッケージ 'LiveCharts 0.9.7' はプロジェクトのターゲット フレームワーク 'net5.0-windows7.0' ではなく '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' を使用して復元されました。このパッケージは、使用しているプロジェクトとの完全な互換性がない可能性があります。
1>D:\Samples\CShape_Sample\WPF_LiveCharts_test\WPF_LiveCharts_test\WPF_LiveCharts_test_w0pdprvo_wpftmp.csproj : warning NU1701: パッケージ 'LiveCharts.Wpf 0.9.7' はプロジェクトのターゲット フレームワーク 'net5.0-windows7.0' ではなく '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' を使用して復元されました。このパッケージは、使用しているプロジェクトとの完全な互換性がない可能性があります。

:::

## 【追記】`LiveCharts.Wpf.NetCore3`を使えば、ビルド時の警告もなく利用できた。


###### tags: `LiveCharts` `.NET Core` `WPF` `C#`