【WPF】Live Chartsを使ったマテリアルデザインカード

<Grid Grid.Row="1" Margin="70,5,70,20">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height=".6*" />
        <RowDefinition Height=".3*" />
        <RowDefinition Height=".1*" />
    </Grid.RowDefinitions>
    <!--  4行を背景白のボーダーで結合  -->
    <Border
        x:Name="Border1"
        Grid.Row="0"
        Grid.RowSpan="4" 
        Background="White"
        CornerRadius="5" />
    <!--  2行を背景白のボーダーで結合  -->
    <Border
        x:Name="Border2"
        Grid.Row="0"
        Grid.RowSpan="2"
        Background="#007BB1" />
</Grid>

<!--  エフェクト追加  -->
<Grid.Effect>
    <!--  影の方向、ぼかし具合、柔らかさを設定  -->
    <DropShadowEffect
        BlurRadius="15"
        Direction="270"
        Opacity=".2"
        RenderingBias="Quality"
        ShadowDepth="1" />
</Grid.Effect>

<!--  Border1でマスクし、マスクの対象外のビジュアルを透明にする  -->
<Grid.OpacityMask>
    <VisualBrush Visual="{Binding ElementName=Border1}" />
</Grid.OpacityMask>

<!--  折れ線のスタイル変更  -->
<Grid.Resources>
    <Style TargetType="lvc:LineSeries">
        <Setter Property="StrokeThickness" Value="3" />
        <Setter Property="Stroke" Value="White" />
        <Setter Property="Fill" Value="#4EFFFFFF" />
        <Setter Property="PointGeometrySize" Value="0" />
        <Setter Property="LineSmoothness" Value="0" />
    </Style>
    <!--  X軸とY軸のラベル非表示  -->
    <Style TargetType="lvc:Axis">
        <Setter Property="ShowLabels" Value="False" />
        <Setter Property="IsEnabled" Value="False" />
    </Style>
</Grid.Resources>
<!--  グラフ本体  -->
<lvc:CartesianChart
        Grid.Row="1"
        Margin="0,0,4,0"
        DataTooltip="{x:Null}"
        Hoverable="False"
        Series="{Binding LastHourSeries}">
    <lvc:CartesianChart.AxisX>
        <lvc:Axis MinValue="1" />
    </lvc:CartesianChart.AxisX>
</lvc:CartesianChart>

<StackPanel
    Grid.Row="2"
    Margin="25,10"
    VerticalAlignment="Top">
    <TextBlock FontSize="13" Opacity=".4">
        one-minute chart<LineBreak />
        Stock price movementst every minute</TextBlock>
    <StackPanel Orientation="Horizontal">
        <TextBlock
            Margin="8,6"
            VerticalAlignment="Bottom"
            FontSize="26"
            Foreground="#303030">
            $
        </TextBlock>
        <TextBlock
            FontSize="32"
            Foreground="#303030"
            Text="{Binding LastLecture, StringFormat={}{0:N1}}" />
    </StackPanel>
</StackPanel>

public partial class UserControlMaterialCards : UserControl, INotifyPropertyChanged
{
    public SeriesCollection LastHourSeries { get; set; }

    public UserControlMaterialCards()
    {
        InitializeComponent();

        double trend = 20;

        //折れ線グラフのインスタンス生成
        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(10),
                        new ObservableValue(13),
                        new ObservableValue(20),
                        new ObservableValue(19),
                        new ObservableValue(15),
                        new ObservableValue(10),
                        new ObservableValue(6),
                        new ObservableValue(5),
                        new ObservableValue(6),
                        new ObservableValue(7),
                        new ObservableValue(3),
                        new ObservableValue(4),
                        new ObservableValue(9),
                        new ObservableValue(2),
                        new ObservableValue(5),
                        new ObservableValue(8)
                    }
                }
            };

        //グラフ描画処理
        Task.Run(() =>
        {
            var r = new Random();
            while (true)
            {
                Thread.Sleep(1000);
                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);
                    LastLecture = ((ChartValues<ObservableValue>)LastHourSeries[0].Values).Last().Value;
                });
            }
        });

        DataContext = this;
    }


    //ViewModelをバインド
    private double _lastLecture;
    public double LastLecture
    {
        get { return _lastLecture; }
        set
        {
            _lastLecture = value;
            OnPropertyChanged("LastLecture");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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