Switching to MVVM issue

Question

I am new at MVVM. Currently all my code is written in .cs file which linked to XAML. I want switch to MVVM but experiencing difficulties. I will try to explain why:

I have many different Chart controls and input data specified in .cs file in the way that I am accessing Chart object directly and using it's properties programaticaly to add points for my chart.

Example:

foreach (var group in qcv.Groups)
{
    AreaSeries areaSeries = new AreaSeries();
    areaSeries.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Stack;
    areaSeries.ValueBinding = new PropertyNameDataPointBinding("Rev");
    areaSeries.CategoryBinding = new PropertyNameDataPointBinding("Date");
    areaSeries.ItemsSource = group as IEnumerable;
    RadChart1.Series.Add(areaSeries);
}

But as long as I switch to MVVM RadChart1 objects gets inaccessible in ViewModel file. How can I make it visible in ViewModel class or maybe you can suggest better approach how I can get that object and provide input for my chart without changing my code behind?

My XAML File:

<UserControl x:Class="FrontEnd.RevenueChart"
             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" 
             xmlns:local="clr-namespace:FrontEnd"
             mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" HorizontalAlignment="Stretch" >

    <UserControl.DataContext>
        <local:RevenueChartViewModel/>
    </UserControl.DataContext>
    <Grid>

        <telerik:RadCartesianChart HorizontalAlignment="Stretch" x:Name="RadChart1" Palette="Metro" Zoom="10,1">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior ZoomMode="Both">
                </telerik:ChartPanAndZoomBehavior>
            </telerik:RadCartesianChart.Behaviors>
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

Hi! I'm not able to put together an example right now, but have a look here: http://www.telerik.com/help/silverlight/radchart-how-to-mvvm-support.html , would that be helpful? Let me know if that works for you! MVVM is def. the way to go — Iris Classon, Feb 24 '13 at 02:02
Iris, thanks for your answer. I am looking into the example now, I will try to figure out what is going on there. Thanks! — Bill Gates, Feb 24 '13 at 02:54

score 0 · Accepted Answer · answered Feb 24 '13 at 02:24

Accessing view controls from the viewmodel is a big no-no in MVVM land. You have to invert your thinking: instead of adding stuff to Series, bind Series to stuff. Use SeriesMappings to get the chart control to convert your groups to series. Here's a bit of off-the-cuff code to get you started:

<telerik:RadCartesianChart HorizontalAlignment="Stretch"
  Palette="Metro" Zoom="10,1"
  Series="{Binding Groups}"><!-- <=== this is the important part -->

  <telerik:RadChart.SeriesMappings>
    <telerikCharting:SeriesMapping LegendLabel="Product Sales">
      <telerikCharting:SeriesMapping.SeriesDefinition>
        <telerikCharting:AreaSeriesDefinition/>
      </telerikCharting:SeriesMapping.SeriesDefinition>
      <telerikCharting:SeriesMapping.ItemMappings>
        <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="Date"/>
        <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Rev"/>
      </telerikCharting:SeriesMapping.ItemMappings>
    </telerikCharting:SeriesMapping>
  </telerik:RadChart.SeriesMappings>
  ...

Thanks Anton. Sounds good and makes sense that you are saying about bit no-no accessing controls in MVVM. But unfortunately I am new at UI design, could you please provide example how you bind and dynamically adding series to chart? Thanks again, Anton. — Bill Gates, Feb 24 '13 at 02:30
You don't add series to the chart in MVVM, you tell it where to get the series data from and how to present it. That's what my example snippet does. If you're new to this, I can't do better than the tutorials listed in question http://stackoverflow.com/questions/1405739/mvvm-tutorial-from-start-to-finish. — Anton Tykhyy, Feb 24 '13 at 10:48

Switching to MVVM issue

1 Answers1