WPF程式設計，Live Charts使用說明（32）——可滾動圖表

本事例中使用了增強類

背景處理類：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using LiveCharts.Defaults;
using LiveCharts.Geared;
 
namespace Geared.Wpf.Scrollable
{
    public class ScrollableViewModel : INotifyPropertyChanged
    {
        private Func<double, string> _formatter;
        private double _from;
        private double _to;
 
        public ScrollableViewModel()
        {
            var now = DateTime.Now;
            var trend = -30000d;
            var l = new List<DateTimePoint>();
            var r = new Random();
 
            for (var i = 0; i < 50000; i++)
            {
                now = now.AddHours(1);
                l.Add(new DateTimePoint(now.AddDays(i), trend));
 
                if (r.NextDouble() > 0.4)
                {
                    trend += r.NextDouble()*10;
                }
                else
                {
                    trend -= r.NextDouble()*10;
                }
            }
 
            Formatter = x => new DateTime((long) x).ToString("yyyy");
 
            Values = l.AsGearedValues().WithQuality(Quality.High);
 
            From = DateTime.Now.AddHours(10000).Ticks;
            To = DateTime.Now.AddHours(90000).Ticks;
        }
 
        public object Mapper { get; set; }
        public GearedValues<DateTimePoint> Values { get; set; }
        public double From
        {
            get { return _from; }
            set
            {
                _from = value;
                OnPropertyChanged("From");
            }
        }
        public double To
        {
            get { return _to; }
            set
            {
                _to = value;
                OnPropertyChanged("To");
            }
        }
 
        public Func<double, string> Formatter
        {
            get { return _formatter; }
            set
            {
                _formatter = value;
                OnPropertyChanged("Formatter");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
           

前台：

<UserControl x:Class="Geared.Wpf.Scrollable.ScrollableView"
        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:controls="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:geared="clr-namespace:LiveCharts.Geared;assembly=LiveCharts.Geared"
        xmlns:scrollable="clr-namespace:Geared.Wpf.Scrollable"
        mc:Ignorable="d">
    <UserControl.DataContext>
        <scrollable:ScrollableViewModel></scrollable:ScrollableViewModel>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"></TextBlock>
        <lvc:CartesianChart Grid.Row="1"
                            Zoom="X" 
                            DisableAnimations="True"
                            Hoverable="False">
            <lvc:CartesianChart.Resources>
                <Style TargetType="lvc:Separator">
                    <Setter Property="StrokeThickness" Value="2.5"></Setter>
                    <Setter Property="Stroke" Value="#E7E7E7"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="X">
                            <Setter Property="IsEnabled" Value="False"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </lvc:CartesianChart.Resources>
            <lvc:CartesianChart.Series>
                <geared:GLineSeries StrokeThickness="0" 
                                    Values="{Binding Values}"
                                    Fill="#2194F1"
                                    AreaLimit="0"
                                    PointGeometry="{x:Null}"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis LabelFormatter="{Binding Formatter}" RangeChanged="Axis_OnRangeChanged" 
                          MinValue="{Binding From, Mode=TwoWay}" MaxValue="{Binding To, Mode=TwoWay}"
                          Separator="{x:Static lvc:DefaultAxes.CleanSeparator}"/>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
        <lvc:CartesianChart Grid.Row="2" DisableAnimations="True" 
                            ScrollMode="X" 
                            ScrollHorizontalFrom="{Binding From, Mode=TwoWay}"
                            ScrollHorizontalTo="{Binding To, Mode=TwoWay}"
                            ScrollBarFill="#25303030"
                            DataTooltip="{x:Null}"
                            Hoverable="False"
                            Margin="20 10">
            <lvc:CartesianChart.Resources>
                <Style TargetType="lvc:Separator">
                    <Setter Property="IsEnabled" Value="False"></Setter>
                </Style>
            </lvc:CartesianChart.Resources>
            <lvc:CartesianChart.Series>
                <geared:GLineSeries Values="{Binding Values}"
                                    Fill="Silver"
                                    StrokeThickness="0"
                                    PointGeometry="{x:Null}"
                                    AreaLimit="0"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis IsMerged="True" 
                          LabelFormatter="{Binding Formatter, Mode=OneTime}" 
                          Foreground="#98000000"
                          FontSize="22"
                          FontWeight="UltraBold"/>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis ShowLabels="False" />
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</UserControl>
           

背景：

using System;
using LiveCharts.Events;
 
namespace Geared.Wpf.Scrollable
{
    /// <summary>
    /// Interaction logic for ScrollingWindow.xaml
    /// </summary>
    public partial class ScrollableView: IDisposable
    {
        public ScrollableView()
        {
            InitializeComponent();
        }
 
        private void Axis_OnRangeChanged(RangeChangedEventArgs eventargs)
        {
            var vm = (ScrollableViewModel) DataContext;
 
            var currentRange = eventargs.Range;
 
            if (currentRange < TimeSpan.TicksPerDay * 2)
            {
                vm.Formatter = x => new DateTime((long)x).ToString("t");
                return;
            }
 
            if (currentRange < TimeSpan.TicksPerDay * 60)
            {
                vm.Formatter = x => new DateTime((long)x).ToString("dd MMM yy");
                return;
            }
 
            if (currentRange < TimeSpan.TicksPerDay * 540)
            {
                vm.Formatter = x => new DateTime((long)x).ToString("MMM yy");
                return;
            }
 
            vm.Formatter = x => new DateTime((long)x).ToString("yyyy");
        }
 
        public void Dispose()
        {
            var vm = (ScrollableViewModel)DataContext;
            vm.Values.Dispose();
        }
    }
}