Why is RadCartesianChart not displayed in RadTileViewItem?

6 posts, 1 answers
  1. Yaroslav
    Yaroslav avatar
    144 posts
    Member since:
    Jan 2016

    Posted 12 Dec 2016 Link to this post

    Hello. I have the following XAML markup:

    <UserControl x:Class="UltrasonicSensors.Views.UltrasonicSensorsView"
                 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.

  2. Yaroslav
    Yaroslav avatar
    144 posts
    Member since:
    Jan 2016

    Posted 12 Dec 2016 in reply to Yaroslav Link to this post

    I'll be very thankful for your help.
  3. Answer
    Dinko
    Admin
    Dinko avatar
    276 posts

    Posted 15 Dec 2016 Link to this post

    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 "telerik:SplineSeries".

    Hope this information is helpful.

    Regards,
    Dinko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Yaroslav
    Yaroslav avatar
    144 posts
    Member since:
    Jan 2016

    Posted 21 Dec 2016 in reply to Dinko Link to this post

    Thank you, Dinko. You've helped me greatly.All charts are displayed now.
  5. Yaroslav
    Yaroslav avatar
    144 posts
    Member since:
    Jan 2016

    Posted 21 Dec 2016 in reply to Yaroslav Link to this post

    I apologize for the delay, but I was sick - was in the hospital. In this, I did not immediately respond.
  6. Dinko
    Admin
    Dinko avatar
    276 posts

    Posted 22 Dec 2016 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allows you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top