Syncfusion是一款第三方的控件库,里面各种控件样式的展示不用说,样式非常丰富,最大的好处是跨平台。本文章讲述WPF中关于Syncfusion中SfChartSfChart的使用,是比较好的展示表格。
在NuGet包中安装包Syncfusion.Xamarin.SfChart包。
首先,在page页进行引用。xmlns:Chart
<Page 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"
mc:Ignorable="d"
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
d:DesignHeight="420" d:DesignWidth="780"
Title="ActiveEnergyConsume">
其次是表格的定制
<Grid.Resources>
<DataTemplate x:Key="ylabelTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding LabelContent}" Foreground="Black" FontSize="13"/>
<TextBlock Text="%" FontSize="13"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="legend">
<StackPanel Orientation="Horizontal">
<Grid Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Width="10" Height="10" Fill="{Binding Interior}"/>
<TextBlock Margin="5,0,0,0" FontSize="12" Grid.Column="1"
Foreground="Black" Text="{Binding Label}"/>
</Grid>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="xLabelTemplate">
<TextBlock Text="{Binding LabelContent}" Foreground="Black" FontSize="13"/>
</DataTemplate>
<DataTemplate x:Key="yheadertemplate">
<TextBlock Text="当前功率" Margin="0,0,0,15" FontSize="15" />
</DataTemplate>
<DataTemplate x:Key="xheadertemplate">
<TextBlock Text="时 间" Margin="0,10,0,0" FontSize="12"/>
</DataTemplate>
<Style TargetType="Line" x:Key="AxisStyle">
<Setter Property="Stroke" Value="DarkGray" />
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</Grid.Resources>
<chart:SfChart Header="实时电力能耗" HorizontalAlignment="Center" Margin="10" VerticalAlignment="Center"
FontSize="20"
x:Name="RealtimeEnergyConsumeElectricChart"
AreaBorderBrush="#8e8e8e"
AreaBorderThickness="0,1,1,1"
Background="White"
Height="390"
>
<chart:SfChart.Legend>
<chart:ChartLegend Foreground="Black" DockPosition="Bottom"
ItemTemplate="{StaticResource legend}"
HorizontalContentAlignment="Center"/>
</chart:SfChart.Legend>
<chart:SfChart.PrimaryAxis>
<chart:DateTimeAxis FontSize="10" PlotOffset="15"
ShowTrackBallInfo="True" ShowGridLines="False"
LabelFormat="hh:mm:ss"
AxisLineStyle="{StaticResource AxisStyle}"
HeaderTemplate="{StaticResource xheadertemplate}"
LabelTemplate="{StaticResource xLabelTemplate}"/>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis FontSize="15" Header="当前功率(KW)" Maximum="20" Minimum="0" Foreground="Black" Interval="2"
HorizontalAlignment="Center"
AxisLineStyle="{StaticResource AxisStyle}"
MajorTickLineStyle="{StaticResource AxisStyle}"/>
</chart:SfChart.SecondaryAxis>
<chart:SplineSeries EnableAnimation="True" Label="瞬时功率(KW)"
ItemsSource="{Binding ElectricInfoCollection}" XBindingPath="EnergyChartTime"
YBindingPath="EnergyConsumptionValue" ShowTooltip="True"
DataContext="{Binding Electric, Source={StaticResource Locator}}">
</chart:SplineSeries>
界面展示:
数据绑定:
private ObservableCollection<LineReportEnergyChartInfo> _electricInfo;
public ObservableCollection<LineReportEnergyChartInfo> ElectricInfoCollection
{
get { return _electricInfo; }
set { this._electricInfo = value; }
}
//大于多少条数据开始删除
if (_electricInfo.Count > Login.MaxChartDataNumber)
{
_electricInfo.RemoveAt(0);
}
//实时图表电接收数据
_electricInfo.Add(new LineReportEnergyChartInfo()
{
EnergyChartTime = message.Content.RcvTime,
EnergyConsumptionValue = tElec.MeterPower
});
X轴是时间,Y轴是能耗值,数据超过最大值自动删除,表格实时加载能耗数据。