后台
using System.Windows;
using System.Windows.Controls;
using LiveCharts;
namespace Wpf.CartesianChart.SolidColorChart
{
public partial class SolidColorExample : UserControl
{
public SolidColorExample()
{
InitializeComponent();
Values = new ChartValues<double> {150, 375, 420, 500, 160, 140};
DataContext = this;
}
public ChartValues<double> Values { get; set; }
private void UpdateOnclick(object sender, RoutedEventArgs e)
{
Chart.Update(true);
}
}
}
前台
<UserControl x:Class="Wpf.CartesianChart.SolidColorChart.SolidColorExample"
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.SolidColorChart"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600"
Background="#7EBE8E">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".7*"></ColumnDefinition>
<ColumnDefinition Width=".3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2"></Border>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="25, 10">
<Path Width="25" Height="25" Stretch="Fill" Fill="#4C4949" Data="F1 M 38,3.16666C 57.2379,3.16666 72.8333,18.7621 72.8333,38C 72.8333,57.2379 57.2379,72.8333 38,72.8333C 18.7621,72.8333 3.16667,57.2379 3.16667,38C 3.16667,18.7621 18.7621,3.16666 38,3.16666 Z M 52.252,18.9974L 36.4164,18.9974L 23.75,39.5833L 34.8333,39.5833L 25.3316,60.1667L 50.6667,34.8333L 38,34.8333L 52.252,18.9974 Z "/>
<StackPanel Margin="10, 0">
<TextBlock FontSize="22" Foreground="White">Time Energy</TextBlock>
<TextBlock FontSize="14" Foreground="#7CFFFFFF">03.24.2013</TextBlock>
</StackPanel>
</StackPanel>
<lvc:CartesianChart Name="Chart" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="15">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values}" LineSmoothness="1" StrokeThickness="10"
DataLabels="True" FontSize="20" Foreground="#6B303030"
Stroke="White" Fill="Transparent" PointGeometrySize="0"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis IsEnabled="False" ShowLabels="False"/>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Foreground="White" FontSize="14">
<lvc:Axis.Separator>
<lvc:Separator StrokeThickness="1" Stroke="#8EFFFFFF" StrokeDashArray="8" Step="100" />
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
<StackPanel Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="#4CFFFFFF" Height="270" VerticalAlignment="Top">
<TextBlock Foreground="White" FontSize="16" HorizontalAlignment="Center" Margin="0,20,0,0">Peak Time Today</TextBlock>
<TextBlock Foreground="White" FontSize="30" HorizontalAlignment="Center">7:08 am</TextBlock>
<TextBlock Foreground="White" FontSize="16" HorizontalAlignment="Center" Margin="0,20,0,0">Peak Value Today</TextBlock>
<TextBlock Foreground="White" FontSize="30" HorizontalAlignment="Center">525 kWh</TextBlock>
<TextBlock Foreground="White" FontSize="16" HorizontalAlignment="Center" Margin="0,20,0,0">Day Average</TextBlock>
<TextBlock Foreground="White" FontSize="30" HorizontalAlignment="Center">354 kWh</TextBlock>
</StackPanel>
<Button Grid.Column="1" Grid.Row="1" Width="40" Height="40" VerticalAlignment="Top" Panel.ZIndex="1"
Click="UpdateOnclick" Margin="0, 180, 0, 0">
<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="#4C4949">
</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>
</Grid>
</UserControl>