后台
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
{
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>
<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>