Peace
/
WPF_LiveChart_Tutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

material design

Browse Source
main
syneffort 1 year ago
parent 93665353c2
commit 88547bbae9
4 changed files with 374 additions and 19 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 142
      LC_Tutorial/Tutorial/AdvancedPlots/MaterialDesignWindow.xaml
  2. 196
      LC_Tutorial/Tutorial/AdvancedPlots/MaterialDesignWindow.xaml.cs
  3. 48
      LC_Tutorial/Tutorial/MainWindow.xaml
  4. 7
      LC_Tutorial/Tutorial/MainWindow.xaml.cs

142
LC_Tutorial/Tutorial/AdvancedPlots/MaterialDesignWindow.xaml
Unescape View File

@ -0,0 +1,142 @@
<Window x:Class="Tutorial.AdvancedPlots.MaterialDesignWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Tutorial.AdvancedPlots"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MaterialDesignWindow" Height="500" Width="800"
Background="#E9E9E9">
<Grid Height="500" Width="650">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" MaxHeight="350">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="0.5*"></RowDefinition>
</Grid.RowDefinitions>
<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.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity="0.2" ShadowDepth="1"/>
</Grid.Effect>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border1}"/>
</Grid.OpacityMask>
<Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White"/>
<Border Grid.Row="0" Grid.RowSpan="3" Background="#CE2156"/>
<TextBlock Grid.Row="0" TextAlignment="Center" Foreground="White" Padding="10 10 0 5" Text="The Current Chart" FontSize="18"/>
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0 0 0 20" Text="{Binding NowDate, StringFormat={}{0:yyyy-MM-dd tt hh:mm:ss}}"/>
<lvc:CartesianChart x:Name="CurrentChart" Grid.Row="2" Series="{Binding LastHourSeries}" Hoverable="False">
<lvc:CartesianChart.AxisX>
<lvc:Axis MinValue="2"/>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
<StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25 0">
<TextBlock Opacity="0.4" FontSize="13">
Total electricity consumption <LineBreak/> of Galaxy SOHO
</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture, StringFormat={}{0:N2}}"/>
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8 6" Text="kWh"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Margin="15 20 15 15" MaxHeight="350">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height=".50*"></RowDefinition>
<RowDefinition Height=".5*"></RowDefinition>
</Grid.RowDefinitions>
<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.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
</Grid.Effect>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border2}" />
</Grid.OpacityMask>
<Border x:Name="Border2" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White"/>
<Border Grid.Row="0" Grid.RowSpan="3" Background="#EB5A13"/>
<TextBlock Grid.Row="0" TextAlignment="Center" Padding="10 10 0 5" Foreground="White" FontSize="18" Text="Time Power"/>
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0 0 0 20" Text="{Binding NowDate, StringFormat={}{0:yyyy-MM-dd tt hh:mm:ss}}"/>
<Button x:Name="btnUpdate" Grid.Row="3" Width="40" Height="40" VerticalAlignment="Top"
HorizontalAlignment="Right" Margin="20 -20" Panel.ZIndex="1"
Click="btnUpdate_Click">
<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"/>
<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 x:Name="TimePowerChart" Grid.Row="2" Series="{Binding TimePowerSeries}" Margin="10 0 10 20" Hoverable="False"/>
<StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25 0">
<TextBlock Opacity="0.4" FontSize="13">The Last 12 hours average <LineBreak/> Electricity Consumption</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#303030" FontSize="40" Text="{Binding TimePowerAverage, StringFormat={}{0:N2}}" />
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Window>

196
LC_Tutorial/Tutorial/AdvancedPlots/MaterialDesignWindow.xaml.cs
Unescape View File

@ -0,0 +1,196 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
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.Shapes;
namespace Tutorial.AdvancedPlots
{
/// <summary>
/// MaterialDesignWindow.xaml에 대한 상호 작용 논리
/// </summary>
public partial class MaterialDesignWindow : Window, INotifyPropertyChanged
{
private double _trend;
private double _lastLecture;
private DateTime _nowDate;
private double _timePowerAverage;
public event PropertyChangedEventHandler? PropertyChanged;
public SeriesCollection LastHourSeries { get; set; }
public SeriesCollection TimePowerSeries { get; set; }
public double LastLecture
{
get { return _lastLecture; }
set
{
_lastLecture = value;
OnPropertyChanged(nameof(LastLecture));
}
}
public DateTime NowDate
{
get { return _nowDate; }
set
{
_nowDate = value;
OnPropertyChanged(nameof(NowDate));
}
}
public double TimePowerAverage
{
get { return _timePowerAverage; }
set
{
_timePowerAverage = value;
OnPropertyChanged(nameof(TimePowerAverage));
}
}
public MaterialDesignWindow()
{
InitializeComponent();
InitInstance();
}
protected virtual void InitInstance()
{
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;
TimePowerSeries = new SeriesCollection
{
new ColumnSeries()
{
Values = new ChartValues<ObservableValue>()
{
new ObservableValue(5),
new ObservableValue(9),
new ObservableValue(8),
new ObservableValue(6),
new ObservableValue(1),
new ObservableValue(5),
new ObservableValue(7),
new ObservableValue(3),
new ObservableValue(6),
new ObservableValue(3)
}
}
};
TimePowerAverage = GetTimePowerAverage();
Task.Run(() =>
{
Random rand = new Random();
while (true)
{
Thread.Sleep(500);
_trend += (rand.NextDouble() > 0.3 ? 1 : -1) * rand.Next(0, 5);
Application.Current.Dispatcher.Invoke(() =>
{
LastHourSeries[0].Values.Add(new ObservableValue(_trend));
LastHourSeries[0].Values.RemoveAt(0);
SetLecture();
});
int lastPower = rand.Next(1, 11);
Application.Current.Dispatcher.Invoke(() =>
{
TimePowerSeries[0].Values.Add(new ObservableValue(lastPower));
TimePowerSeries[0].Values.RemoveAt(0);
TimePowerAverage = GetTimePowerAverage();
NowDate = DateTime.Now;
});
}
});
DataContext = this;
}
private void SetLecture()
{
var target = ((ChartValues<ObservableValue>)LastHourSeries[0].Values).Last().Value;
var step = (target - _lastLecture) / 4;
Task.Run(() =>
{
for (int i = 0; i < 4; i++)
{
Thread.Sleep(100);
LastLecture += step;
}
LastLecture = target;
});
}
private double GetTimePowerAverage()
{
double sum = 0d;
foreach (var value in TimePowerSeries[0].Values.Cast<ObservableValue>())
{
sum += value.Value;
}
return sum / (double)TimePowerSeries[0].Values.Count;
}
protected virtual void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void btnUpdate_Click(object sender, RoutedEventArgs e)
{
TimePowerChart.Update(true, true);
}
}
}

48
LC_Tutorial/Tutorial/MainWindow.xaml
Unescape View File

@ -5,31 +5,41 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Tutorial" xmlns:local="clr-namespace:Tutorial"
mc:Ignorable="d" mc:Ignorable="d"
Title="MainWindow" Height="500" Width="800"> Title="MainWindow" Height="400" Width="400">
<Grid> <Grid>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TabControl SelectedIndex="0"> <TabControl SelectedIndex="1">
<TabItem Header="Basic Plots"> <TabItem Header="Basic Plots">
<StackPanel Grid.Column="0" Orientation="Vertical" Margin="5"> <ScrollViewer VerticalScrollBarVisibility="Auto">
<Button x:Name="btnLines" Content="Lines" Margin="3" Click="btnLines_Click"/> <StackPanel Grid.Column="0" Orientation="Vertical" Margin="5">
<Button x:Name="btnColumns" Content="Columns" Margin="3" Click="btnColumns_Click"/> <Button x:Name="btnLines" Content="Lines" Margin="3" Click="btnLines_Click"/>
<Button x:Name="btnStackedColumns" Content="Stacked Columns" Margin="3" Click="btnStackedColumns_Click"/> <Button x:Name="btnColumns" Content="Columns" Margin="3" Click="btnColumns_Click"/>
<Button x:Name="btnRows" Content="Rows" Margin="3" Click="btnRows_Click"/> <Button x:Name="btnStackedColumns" Content="Stacked Columns" Margin="3" Click="btnStackedColumns_Click"/>
<Button x:Name="btnStackedArea" Content="Stacked Area" Margin="3" Click="btnStackedArea_Click"/> <Button x:Name="btnRows" Content="Rows" Margin="3" Click="btnRows_Click"/>
<Button x:Name="btnStepLine" Content="Step Line" Margin="3" Click="btnStepLine_Click"/> <Button x:Name="btnStackedArea" Content="Stacked Area" Margin="3" Click="btnStackedArea_Click"/>
<Button x:Name="btnScatter" Content="Scatter" Margin="3" Click="btnScatter_Click"/> <Button x:Name="btnStepLine" Content="Step Line" Margin="3" Click="btnStepLine_Click"/>
<Button x:Name="btnBubble" Content="Bubble" Margin="3" Click="btnBubble_Click"/> <Button x:Name="btnScatter" Content="Scatter" Margin="3" Click="btnScatter_Click"/>
<Button x:Name="btnFinancial" Content="Financial" Margin="3" Click="btnFinancial_Click"/> <Button x:Name="btnBubble" Content="Bubble" Margin="3" Click="btnBubble_Click"/>
<Button x:Name="btnPie" Content="Pie" Margin="3" Click="btnPie_Click"/> <Button x:Name="btnFinancial" Content="Financial" Margin="3" Click="btnFinancial_Click"/>
<Button x:Name="btnDoughnut" Content="Doughnut" Margin="3" Click="btnDoughnut_Click"/> <Button x:Name="btnPie" Content="Pie" Margin="3" Click="btnPie_Click"/>
<Button x:Name="btnSolidGauge" Content="Solid Gauge" Margin="3" Click="btnSolidGauge_Click"/> <Button x:Name="btnDoughnut" Content="Doughnut" Margin="3" Click="btnDoughnut_Click"/>
<Button x:Name="btnAngularGauge" Content="Angular Gauge" Margin="3" Click="btnAngularGauge_Click"/> <Button x:Name="btnSolidGauge" Content="Solid Gauge" Margin="3" Click="btnSolidGauge_Click"/>
<Button x:Name="btnHeatMap" Content="Heat Map" Margin="3" Click="btnHeatMap_Click"/> <Button x:Name="btnAngularGauge" Content="Angular Gauge" Margin="3" Click="btnAngularGauge_Click"/>
<Button x:Name="btnGeoMap" Content="Geo Map" Margin="3" Click="btnGeoMap_Click"/> <Button x:Name="btnHeatMap" Content="Heat Map" Margin="3" Click="btnHeatMap_Click"/>
</StackPanel> <Button x:Name="btnGeoMap" Content="Geo Map" Margin="3" Click="btnGeoMap_Click"/>
</StackPanel>
</ScrollViewer>
</TabItem>
<TabItem Header="Advanced Plots">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical" Margin="5">
<Button x:Name="btnMaterialDesign" Content="Material Design" Margin="3" Click="btnMaterialDesign_Click"/>
</StackPanel>
</ScrollViewer>
</TabItem> </TabItem>
</TabControl> </TabControl>
</Grid> </Grid>

7
LC_Tutorial/Tutorial/MainWindow.xaml.cs
Unescape View File

@ -12,6 +12,7 @@ using System.Windows.Media;
using System.Windows.Media.Imaging; using System.Windows.Media.Imaging;
using System.Windows.Navigation; using System.Windows.Navigation;
using System.Windows.Shapes; using System.Windows.Shapes;
using Tutorial.AdvancedPlots;
using Tutorial.BasicPlots; using Tutorial.BasicPlots;
namespace Tutorial namespace Tutorial
@ -115,5 +116,11 @@ namespace Tutorial
GeoMapWindow win = new GeoMapWindow(); GeoMapWindow win = new GeoMapWindow();
win.Show(); win.Show();
} }
private void btnMaterialDesign_Click(object sender, RoutedEventArgs e)
{
MaterialDesignWindow win = new MaterialDesignWindow();
win.Show();
}
} }
} }

Write Preview
Loading…
Cancel
Save