mirror of
https://gitee.com/akwkevin/aistudio.-wpf.-diagram
synced 2026-04-05 00:37:19 +08:00
项目结构调整
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
<Page x:Class="UWP.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:lvc="using:LiveCharts.Uwp"
|
||||
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" CornerRadius="4">
|
||||
<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 Grid.Row="0" Grid.RowSpan="4" CornerRadius="4" 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}" />
|
||||
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<Grid Grid.Column="1" Margin="15, 60, 15, 15" MaxHeight="350" CornerRadius="4">
|
||||
<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>
|
||||
<Style TargetType="lvc:Separator">
|
||||
<Setter Property="StrokeThickness" Value="1"></Setter>
|
||||
<Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
|
||||
<Setter Property="IsEnabled" Value="False"></Setter>
|
||||
<Setter Property="Step" Value="1"></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 Grid.Row="0" Grid.RowSpan="4" 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" Canvas.ZIndex="1"
|
||||
Click="UpdateOnclick">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Grid>
|
||||
<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="{Binding Vals}"/>
|
||||
</lvc:CartesianChart.Series>
|
||||
<lvc:CartesianChart.AxisY>
|
||||
<lvc:Axis IsMerged="True" MaxValue="10">
|
||||
<lvc:Axis.Separator>
|
||||
<lvc:Separator IsEnabled="true" Step="{Binding Nan}"></lvc:Separator>
|
||||
</lvc:Axis.Separator>
|
||||
</lvc:Axis>
|
||||
</lvc:CartesianChart.AxisY>
|
||||
</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>
|
||||
</Page>
|
||||
@@ -0,0 +1,112 @@
|
||||
using System;
|
||||
using System.ComponentModel;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Windows.UI.Core;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using LiveCharts;
|
||||
using LiveCharts.Defaults;
|
||||
using LiveCharts.Uwp;
|
||||
|
||||
namespace UWP.CartesianChart.MaterialCards
|
||||
{
|
||||
/// <summary>
|
||||
/// Interaction logic for MaterialCards.xaml
|
||||
/// </summary>
|
||||
public partial class MaterialCards : Page, INotifyPropertyChanged
|
||||
{
|
||||
private double _lastLecture;
|
||||
private double _trend;
|
||||
private DispatcherTimer _timer = new DispatcherTimer {Interval = TimeSpan.FromMilliseconds(500)};
|
||||
|
||||
public MaterialCards()
|
||||
{
|
||||
InitializeComponent();
|
||||
|
||||
LastHourSeries = new SeriesCollection
|
||||
{
|
||||
new LineSeries
|
||||
{
|
||||
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;
|
||||
|
||||
_timer.Tick += (sender, o) =>
|
||||
{
|
||||
var r = new Random();
|
||||
|
||||
_trend += (r.NextDouble() > 0.3 ? 1 : -1) * r.Next(0, 5);
|
||||
LastHourSeries[0].Values.Add(new ObservableValue(_trend));
|
||||
LastHourSeries[0].Values.RemoveAt(0);
|
||||
SetLecture();
|
||||
};
|
||||
_timer.Start();
|
||||
|
||||
Vals = new ChartValues<double> { 5, 9, 8, 6, 1, 5, 7, 3, 6, 3 };
|
||||
Nan = double.NaN;
|
||||
|
||||
DataContext = this;
|
||||
}
|
||||
|
||||
public SeriesCollection LastHourSeries { get; set; }
|
||||
public ChartValues<double> Vals { get; set; }
|
||||
public double Nan { get; set; }
|
||||
|
||||
public double LastLecture
|
||||
{
|
||||
get { return _lastLecture; }
|
||||
set
|
||||
{
|
||||
_lastLecture = value;
|
||||
OnPropertyChanged("LastLecture");
|
||||
}
|
||||
}
|
||||
|
||||
private async void SetLecture()
|
||||
{
|
||||
var target = ((ChartValues<ObservableValue>) LastHourSeries[0].Values).Last().Value;
|
||||
var step = (target - _lastLecture)/4;
|
||||
|
||||
await Task.Delay(100);
|
||||
LastLecture += step;
|
||||
|
||||
LastLecture = target;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user