Had migrated from .Net Framework to .Net8 and of course updated Telerik references, and I'm facing this problem rendering the chart.
using Telerik.Windows.Controls.ChartView;
using Telerik.Windows.Controls.Legend;
namespace Manager
{
public partial class CustomChartControl : UserControl, INotifyPropertyChanged
{
private const int YAXIS_STEP_NUMBER = 8;
private ChartSerieCollectionVM _viewModel;
private string _title;
public LinearAxis LeftAxis { get { return chart.Resources["leftAxis"] as LinearAxis; } }
public LinearAxis LeftCAxis { get { return chart.Resources["leftAxisC"] as LinearAxis; } }
public LinearAxis RightAxis { get { return chart.Resources["rightAxis"] as LinearAxis; } }
public LinearAxis RightCAxis { get { return chart.Resources["rightAxisC"] as LinearAxis; } }
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged("Title");
}
}
public DateTime ActualMaxDateTime { get; private set; }
public DateTime ActualMinDateTime { get; private set; }
public CustomChartControl()
{
InitializeComponent();
}
public void SetDataContext(ChartSerieCollectionVM series)
{
foreach (var serie in series.Series)
{
AsignSerieAxis(serie);
}
_viewModel = series;
DataContext = _viewModel;
}
private void AsignSerieAxis(ChartSerieVM serie)
{
if (serie.HorizontalAlignment == Telerik.Charting.AxisHorizontalLocation.Left)
{
if (serie.IsC)
{
serie.Axis = this.LeftCAxis;
}
else
{
serie.Axis = this.LeftAxis;
}
}
else
{
if (serie.IsC)
{
serie.Axis = this.RightCAxis;
}
else
{
serie.Axis = this.RightAxis;
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
<telerik:RadCartesianChart x:Name="chart" Grid.Row="2">
<telerik:RadCartesianChart.Resources>
<telerik:LinearAxis
x:Key="leftAxisC"
Margin="0,0,0,0"
HorizontalLocation="Left"
IsInverse="True"
LineStroke="{DynamicResource Gray4}"
Maximum="1.1"
Minimum="0.9"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource CValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="leftAxis"
Margin="0,0,0,0"
HorizontalLocation="Left"
LineStroke="{DynamicResource Gray4}"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding .}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="rightAxisC"
Margin="0,0,0,0"
HorizontalLocation="Right"
IsInverse="True"
LineStroke="{DynamicResource Gray4}"
Maximum="1.1"
Minimum="0.9"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource CValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="rightAxis"
Margin="0,0,0,0"
HorizontalLocation="Right"
LineStroke="{DynamicResource Gray4}"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource RightAxisValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
</telerik:RadCartesianChart.Resources>
<!-- HORIZONTAL AXIS -->
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:DateTimeContinuousAxis
ActualRangeChanged="DateTimeContinuousAxis_ActualRangeChanged"
Name="BottomAxis"
LabelFitMode="Rotate"
LabelFormat="HH:mm:ss"
LineThickness="1"
Maximum="{Binding MaxVisible, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Minimum="{Binding MinVisible, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
PlotMode="OnTicks" />
</telerik:RadCartesianChart.HorizontalAxis>
<!-- SERIES PROVIDER -->
<telerik:RadCartesianChart.SeriesProvider>
<telerik:ChartSeriesProvider Source="{Binding VisibleSeries}">
<telerik:ChartSeriesProvider.SeriesDescriptors>
<telerik:CategoricalSeriesDescriptor
CategoryPath="Date"
ItemsSourcePath="ItemsInView"
ValuePath="YVal">
<!-- Fill="{Binding Series.Stroke}" -->
<telerik:CategoricalSeriesDescriptor.Style>
<Style TargetType="telerik:LineSeries">
<Setter Property="Stroke" Value="{Binding SerieColor}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="LegendSettings">
<Setter.Value>
<telerik:SeriesLegendSettings Title="{Binding Title}" />
</Setter.Value>
</Setter>
<Setter Property="VerticalAxis" Value="{Binding Axis}" />
<Setter Property="TrackBallTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle
Width="7"
Height="7"
Fill="{Binding Series.Stroke}"
RenderTransformOrigin="0.5,0.5">
<Rectangle.ToolTip>
<ToolTip>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="lbPointValue" Text="{Binding Path=DataPoint.Value}" />
<TextBlock Text="{Binding Path=DataPoint.Category, StringFormat=HH:mm:ss}" />
</StackPanel>
</ToolTip>
</Rectangle.ToolTip>
</Rectangle>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Series, Converter={StaticResource DataPointSerieIsCConverter}}" Value="True">
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:CategoricalSeriesDescriptor.Style>
</telerik:CategoricalSeriesDescriptor>
</telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>
<!-- GRID -->
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" />
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.SmartLabelsStrategy>
<telerik:ChartSmartLabelsStrategy />
</telerik:RadCartesianChart.SmartLabelsStrategy>
</telerik:RadCartesianChart>
This CustomChart is declared from other view as:
<TabItem x:Name="TabTotal" Header="Total">
<this:CustomChartControl x:Name="TelerikPowerChart" />
</TabItem>
TelerikPowerChart.Title = "Total Active Power";
TelerikPowerChart.SetDataContext(_viewModel.ActiveModel.PowerSerieCollection
If I had a static VerticalAxis
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
"No series added" message appears.
So it looks like the chart is rendered before the data is able to be binded. Is there any way to re-render the chart once the data is binded or to make the renderization waits for the data be binded?