Why is RadCartesianChart not displayed in RadTileViewItem?

[Dmitry]

Hello. I have the following XAML markup:

<UserControl x:Class="UltrasonicSensors.Views.UltrasonicSensorsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True">

    <UserControl.Resources>
        <!--Spline series style-->
        <Style x:Key="SplineSeriesStyle" TargetType="telerik:SplineSeries">
            <Setter Property="Stroke" Value="RoyalBlue"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
        <!--Content template of each RadTileViewItem-->
        <DataTemplate x:Key="ContentTemplate">
            <telerik:RadCartesianChart x:Name="chart1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" EmptyContent="{Binding ChartEmptyContent}">
                <!--Turn scrollbar off-->
                <telerik:RadCartesianChart.Resources>
                    <Style TargetType="telerik:PanZoomBar">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </Style>
                </telerik:RadCartesianChart.Resources>
                <!-- X-axis -->
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis LabelInterval="6"/>
                </telerik:RadCartesianChart.HorizontalAxis>
                <!-- Y-axis -->
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Minimum="-128" Maximum="127" MajorStep="8" />
                </telerik:RadCartesianChart.VerticalAxis>
                <!--Spline series itself-->
                <telerik:SplineSeries CategoryBinding="Item1" ValueBinding="Item2" ItemsSource="{Binding SensorData}" Style="{StaticResource SplineSeriesStyle}"/>
                <!--Layout grid-->
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="XY" IsTabStop="False">
                        <telerik:CartesianChartGrid.YStripeBrushes>
                            <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
                            <SolidColorBrush Color="Transparent" />
                        </telerik:CartesianChartGrid.YStripeBrushes>
                        <telerik:CartesianChartGrid.XStripeBrushes>
                            <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
                            <SolidColorBrush Color="Transparent" />
                        </telerik:CartesianChartGrid.XStripeBrushes>
                    </telerik:CartesianChartGrid>
                </telerik:RadCartesianChart.Grid>
                <!--Panning and zooming-->
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both" PanMode="Both"/>
                </telerik:RadCartesianChart.Behaviors>
            </telerik:RadCartesianChart>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <!--Ultrasonic sensors signals charts:-->
        <telerik:RadTileView Grid.Row="0" Grid.Column="0" PreservePositionWhenMaximized="True" MinimizedColumnWidth="150" ItemsSource="{Binding SensorSignalCharts}" DisplayMemberPath="ChartCaption"
                             ContentTemplate="{StaticResource ContentTemplate}">
        </telerik:RadTileView>
    </Grid>
</UserControl>

For the RadCartesianChart above I have the following ViewModel:

using Prism.Mvvm;
using System;
using Telerik.Windows.Data;

namespace UltrasonicSensors.ViewModels
{
    /// <summary>
    /// Ultrasonic sensor signal ViewModel.
    /// </summary>
    public class SensorSignalChartViewModel : BindableBase
    {
        #region Fields

        /// <summary>
        /// Ultrasonic sensor signal chart point collection.
        /// </summary>
        private RadObservableCollection<Tuple<int, double>> _sensorData;
        /// <summary>
        /// Data missing Message.
        /// </summary>
        private object _chartEmptyContent;
        /// <summary>
        /// Chart header.
        /// </summary>
        private string _caption;

        #endregion

        #region Constructors

        /// <summary>
        /// Create instance of  SensorSignalViewModel.
        /// </summary>
        /// <param name="aSensorData">Ultrasonic sensor signal chart point collection.</param>
        public SensorSignalChartViewModel(Tuple<int, double>[] aSensorData)
        {
            this.SensorData = new RadObservableCollection<Tuple<int, double>>(aSensorData);
        }

        #endregion

        #region Properties

        /// <summary>
        /// Gets or sets ultrasonic sensor signal chart point collection.
        /// </summary>
        public RadObservableCollection<Tuple<int, double>> SensorData
        {
            get { return this._sensorData; }
            set { this.SetProperty(ref this._sensorData, value); }
        }

        /// <summary>
        /// Gets or sets data missing message.
        /// </summary>
        public object ChartEmptyContent
        {
            get { return this._chartEmptyContent; }
            set { this.SetProperty(ref this._chartEmptyContent, value); }
        }

        /// <summary>
        /// Gets or sets chart header.
        /// </summary>
        public string ChartCaption
        {
            get { return this._caption; }
            set { this.SetProperty(ref this._caption, value); }
        }

        #endregion
    }
}

As you can see above, RadCartesianChart in "ContentTemplate" DataTemplate is bound to this ViewModel. And there is another ViewModel called UltrasonicSensorsViewModel which contain RadObservableCollection of SensorSignalChartViewModel. Please see it below:

/// <summary>
/// ViewModel of charts of ultrasonic sensors signals.
/// </summary>
public class UltrasonicSensorsViewModel : BindableBase, IConfirmNavigationRequest
{
    #region Fields

    #region Constant Fields

    /// <summary>
    ///  Data missing message.
    /// </summary>
    private const string NO_DATA_FOR_CHART = "Нет данных для построения графика";
    /// <summary>
    /// Number of points in each signal chart.
    /// </summary>
    private const int CHART_POINTS_QUANTITY = 180;

    #endregion

    #region Common Variable Fields

    /// <summary>
    /// Ultrasonic sensors quantity.
    /// </summary>
    private int _sensorsQuantity;
    /// <summary>
    /// Collection of sensorSignalChartViewModel instances.
    /// </summary>
    private RadObservableCollection<SensorSignalChartViewModel> _sensorSignalCharts;
    /// <summary>
    /// Sensors polling timer.
    /// </summary>
    private Timer _sensorsPollingTimer;
    /// <summary>
    /// Timer period in millisecond.
    /// </summary>
    private long _pollingPeriod = 500;

    #endregion

    #endregion

    #region Constructors

    public UltrasonicSensorsViewModel()
    {
        // This is dummy data  to simulate (imitate) each chart.
        byte[] aDummyData = { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x01,
            0x01, 0x00, 0x00, 0xFE, 0xFE, 0xFF, 0x00, 0x01, 0x03, 0x02, 0x01, 0x00, 0xFD, 0xFC, 0xFD, 0x00, 0x04, 0x06, 0x07, 0x03, 0xFD, 0xF7, 0xF3, 0xF6,
            0x00, 0x0B, 0x14, 0x15, 0x0C, 0xFC, 0xEA, 0xDF, 0xE2, 0xF4, 0x0E, 0x26, 0x2F, 0x24, 0x07, 0xE4, 0xCA, 0xC6, 0xDB, 0x01, 0x2B, 0x44, 0x41, 0x22,
            0xF3, 0xC8, 0xB4, 0xBF, 0xE6, 0x18, 0x41, 0x4E, 0x3B, 0x10, 0xE0, 0xBE, 0xB8, 0xCF, 0xF9, 0x23, 0x3E, 0x3E, 0x26, 0x01, 0xDF, 0xCD, 0xCF, 0xE5,
            0x01, 0x1A, 0x27, 0x23, 0x13, 0x00, 0xEF, 0xE7, 0xE9, 0xF2, 0xFE, 0x08, 0x0D, 0x0E, 0x0B, 0x06, 0x01, 0xFD, 0xF9, 0xF6, 0xF6, 0xF8, 0xFD, 0x03,
            0x0A, 0x0E, 0x0D, 0x07, 0xFF, 0xF5, 0xF0, 0xF0, 0xF7, 0x00, 0x0A, 0x10, 0x0E, 0x98, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
            0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
            0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00};

        this.SensorSignalCharts = new RadObservableCollection<SensorSignalChartViewModel>();
        Tuple<int, double>[] aSensorData = new Tuple<int, double>[CHART_POINTS_QUANTITY];

        // Create array of chart data (i==X, aDummyData[i] == Y)
        for (int i = 0; i < aDummyData.Length; i++)
            aSensorData[i] = new Tuple<int, double>(i, aDummyData[i]);
        // Create eight (8) RadTileViewItems. The content of each RadTileViewItem is a chart with simulating data
        SensorSignalChartViewModel sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от первого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от второго сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от третьего сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от четвёртого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от пятого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от шестого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от седьмого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        sscm = new SensorSignalChartViewModel(aSensorData);
        sscm.ChartCaption = "График сигнала от восмого сенсора";
        sscm.ChartEmptyContent = NO_DATA_FOR_CHART;
        this.SensorSignalCharts.Add(sscm);
        // Create timer but don't start yet.
        this._sensorsPollingTimer = new Timer(this.sensorsPollingTimerCallback, null, -1, this._pollingPeriod);
    }

    #endregion

    #region Properties

    /// <summary>
    /// Gets or sets collection of SensorSignalChartViewModel instances.
    /// </summary>
    public RadObservableCollection<SensorSignalChartViewModel> SensorSignalCharts
    {
        get { return this._sensorSignalCharts; }
        set { this.SetProperty(ref this._sensorSignalCharts, value); }
    }

    #endregion

    #region Methods

    /// <summary>
    /// Timer tick handler.
    /// </summary>
    /// <param name="state"></param>
    private void sensorsPollingTimerCallback(object state)
    {

    }

    #endregion

    #region IConfirmNavigationRequest Implementation

    void IConfirmNavigationRequest.ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
    {
        continuationCallback(true);
    }

    bool INavigationAware.IsNavigationTarget(NavigationContext navigationContext)
    {
        return true;
    }
    void INavigationAware.OnNavigatedFrom(NavigationContext navigationContext)
    {
        ;
    }

    void INavigationAware.OnNavigatedTo(NavigationContext navigationContext)
    {
        ;
    }

    #endregion
}

When I run my program I see no charts as you can see in EmptyCharts.PNG file attached. Why I see no charts? Please help me.

[Dmitry]

I'll be very thankful for your help.

[Dinko | Tech Support Engineer]

Hello Yaroslav,

Thank you for the provided code snippets.

Looking at the attached picture we can see that you are using NoXAML DLLs and you have specified a custom style to the SplineSeries. Keep in mind that when you are working with our NoXaml binaries in combination with Implicit Style your custom Styles that target our controls should be based on their default styles. You can do this by setting the BasedOn property of the custom Style. You can find more information in our Setting a Theme (Using Implicit Styles) help article in our documentation. In your case, you can just set the BasedOn="{StaticResource SplineSeriesStyle}" property of the custom style which targets the
Hope this information is helpful.

Regards,
Dinko
Telerik by Progress

[Dmitry]

Thank you, Dinko. You've helped me greatly.All charts are displayed now.

[Dmitry]

I apologize for the delay, but I was sick - was in the hospital. In this, I did not immediately respond.

[Dinko | Tech Support Engineer]

Hello Yaroslav,

I am sorry to hear that you were in a hospital. I hope you are feeling better now.

If you have any other questions regarding Telerik for WPF controls you can open a new ticket thread.

Regards,
Dinko
Telerik by Progress