WPF编程，Live Charts使用说明（30）——自定义设计

于 2020-04-14 22:56:24 发布
阅读量2k 收藏 5
点赞数 2
分类专栏： Live Charts 文章标签： wpf C# live charts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43307934/article/details/105523668
版权

在这里插入图片描述

后台

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
using Wpf.Annotations;
 
namespace Wpf.CartesianChart.MaterialCards
{
    /// <summary>
    /// Interaction logic for MaterialCards.xaml
    /// </summary>
    public partial class MaterialCards : UserControl, INotifyPropertyChanged
    {
        private double _lastLecture;
        private double _trend;
 
        public MaterialCards()
        {
            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;
 
#if NET40
            Task.Factory.StartNew(() =>
            {
                var r = new Random();
 
                Action action = delegate
                {
                    LastHourSeries[0].Values.Add(new ObservableValue(_trend));
                    LastHourSeries[0].Values.RemoveAt(0);
                    SetLecture();
                };
 
                while (true)
                {
                    Thread.Sleep(500);
                    _trend += (r.NextDouble() > 0.3 ? 1 : -1) * r.Next(0, 5);
                    Application.Current.Dispatcher.Invoke(DispatcherPriority.Normal, action);
                }
            });
#endif
#if NET45
            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();
                    });
                }
            });
#endif
 
            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;
#if NET40
            Task.Factory.StartNew(() =>
            {
                for (var i = 0; i < 4; i++)
                {
                    Thread.Sleep(100);
                    LastLecture += step;
                }
                LastLecture = target;
            });
#endif
#if NET45
            Task.Run(() =>
            {
                for (var i = 0; i < 4; i++)
                {
                    Thread.Sleep(100);
                    LastLecture += step;
                }
                LastLecture = target;
            });
#endif
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
 
        private void UpdateOnclick(object sender, RoutedEventArgs e)
        {
            TimePowerChart.Update(true);
        }
    }
}

前台

<UserControl x:Class="Wpf.CartesianChart.MaterialCards.MaterialCards"
             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.MaterialCards"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="500" d:DesignWidth="800"
             Background="#E9E9E9">
    <Grid Height="500" Width="650" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <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="0"></Setter>
                    <Setter Property="LineSmoothness" Value="0"></Setter>
                </Style>
                <Style TargetType="lvc:Axis">
                    <Setter Property="ShowLabels" Value="False"></Setter>
                    <Setter Property="IsEnabled" Value="False"></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" ></Border>
            <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>
        
        <Grid Grid.Column="1" Margin="15, 20, 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=Border2}" />
            </Grid.OpacityMask>
            <Grid.Resources>
                <Style TargetType="lvc:ColumnSeries">
                    <Setter Property="StrokeThickness" Value="0"></Setter>
                    <Setter Property="Stroke" Value="White"></Setter>
                    <Setter Property="Fill" Value="White"></Setter>
                    <Setter Property="MaxColumnWidth" Value="5"></Setter>
                </Style>
                <Style TargetType="lvc:Axis">
                    <Setter Property="FontSize" Value="12"></Setter>
                    <Setter Property="Foreground" Value="#64FFFFFF"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="Y">
                            <Setter Property="IsMerged" Value="True"></Setter>
                            <Setter Property="MaxValue" Value="10"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
                <Style TargetType="lvc:Separator">
                    <Setter Property="StrokeThickness" Value="1"></Setter>
                    <Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="X">
                            <Setter Property="IsEnabled" Value="False"></Setter>
                            <Setter Property="Step" Value="1"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </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="Border2" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#EB5A13" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    Time Power
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
            <Button Grid.Row="3" Width="40" Height="40" VerticalAlignment="Top" 
                    HorizontalAlignment="Right" Margin="20, -20" Panel.ZIndex="1"
                    Click="UpdateOnclick">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Effect>
                                <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
                            </Grid.Effect>
                            <Ellipse Stroke="Black" StrokeThickness="0" Fill="#CD2156">
                                
                            </Ellipse>
                            <Path Width="20" Height="20" Stretch="Fill" Fill="White" Data="F1 M 58,33.5001L 58,27L 49,19L 40,27.5001L 40,33.5001L 46,28.2097L 46,40.5C 46,46.299 41.299,51 35.5,51C 29.701,51 25,46.299 25,40.5C 25,34.8686 29.4332,30.2727 35,30.0117L 35,24.0074C 26.1186,24.2718 19,31.5546 19,40.5C 19,49.6127 26.3873,57 35.5,57C 44.6127,57 52,49.6127 52,40.5L 52,28.125L 58,33.5001 Z "/>
                            <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <lvc:CartesianChart Name="TimePowerChart" Grid.Row="2" Margin="10, 0, 10, 20"  Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.Series>
                    <lvc:ColumnSeries Values="5,9,8,6,1,5,7,3,6,3"/>
                </lvc:CartesianChart.Series>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">The Last 12 hours average <LineBreak /> Electricity Consumption</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="20.45" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值