WPF編程，Live Charts使用說明（24）——能源預測

後臺

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using LiveCharts;
using LiveCharts.Wpf;
 
namespace Wpf.CartesianChart.Energy_Predictions
{
    /// <summary>
    /// Interaction logic for EnergyPredictionExample.xaml
    /// </summary>
    public partial class EnergyPredictionExample : UserControl
    {
        public EnergyPredictionExample()
        {
            InitializeComponent();
 
            Series = new SeriesCollection
            {
                new StackedAreaSeries
                {
                    Values = new ChartValues<double> {20, 30, 35, 45, 65, 85},
                    Title = "Electricity"
                },
                new StackedAreaSeries
                {
                    Values = new ChartValues<double> {10, 12, 18, 20, 38, 40},
                    Title = "Water"
                },
                new StackedAreaSeries
                {
                    Values = new ChartValues<double> {5, 8, 12, 15, 22, 25},
                    Title = "Solar"
                },
                new StackedAreaSeries
                {
                    Values = new ChartValues<double> {10, 12, 18, 20, 38, 40},
                    Title = "Gas"
                }
            };
 
            DataContext = this;
        }
 
        public SeriesCollection Series { get; set; }
 
        private void ListBox_OnPreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            var item = ItemsControl.ContainerFromElement(ListBox, (DependencyObject)e.OriginalSource) as ListBoxItem;
            if (item == null) return;
 
            var series = (StackedAreaSeries) item.Content;
            series.Visibility = series.Visibility == Visibility.Visible
                ? Visibility.Hidden
                : Visibility.Visible;
        }
    }
}

輔助類

using System;
using System.Globalization;
using System.Linq;
using System.Windows.Data;
using LiveCharts;
 
namespace Wpf.CartesianChart.Energy_Predictions
{
    public class ReverseConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((SeriesCollection) value).Reverse();
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

前臺

<UserControl x:Class="Wpf.CartesianChart.Energy_Predictions.EnergyPredictionExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Wpf.CartesianChart.Energy_Predictions"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="6"
             Background="#ECECEC" d:DataContext="{d:DesignInstance local:EnergyPredictionExample}">
    <Grid Margin="20" Width="620">
        <Grid.Effect>
            <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
        </Grid.Effect>
        <Grid.Resources>
            <local:OpacityConverter x:Key="OpacityConverter"></local:OpacityConverter>
            <local:ReverseConverter x:Key="ReverseConverter"></local:ReverseConverter>
        </Grid.Resources>
        <Border CornerRadius="5" Background="White">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" FontSize="40" Foreground="#404040" Margin="20, 10">Energy Consumption</TextBlock>
                <Canvas Grid.Row="1" Name="Canvas" Margin="-4, 0, 0, 20">
                    <ListBox Name="ListBox" ItemsSource="{Binding Series, Converter={StaticResource ReverseConverter}}" PreviewMouseDown="ListBox_OnPreviewMouseDown" 
                             Panel.ZIndex="1" Canvas.Left="60" Canvas.Top="20" BorderThickness="0" Background="Transparent">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding (lvc:LineSeries.Title)}" 
                                           Foreground="{Binding (lvc:LineSeries.Fill)}"
                                           Opacity="{Binding (lvc:LineSeries.Visibility), Converter={StaticResource OpacityConverter}}"
                                           FontSize="22"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="{x:Type ListBoxItem}">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                            <ContentPresenter />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>
 
                    <lvc:CartesianChart Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"
                                     Series="{Binding Series}" Hoverable="False" DataTooltip="{x:Null}">
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis IsEnabled="False" ShowLabels="False"></lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis IsMerged="True" FontSize="14"></lvc:Axis>
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>
                </Canvas>
            </Grid>
        </Border>
    </Grid>
</UserControl>