Recibí una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los datos de un DataGrid. La respuesta es ¡Con DataBinding!

Muchas gracias.

Ok ok, la explicación larga. Primero vamos a hacer un modelo para datos de prueba:

using System.ComponentModel;

namespace SilverlightApplication3
{
    public class SampleData : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            { 
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }

        private double _value;
        public double Value
        {
            get { return _value; }
            set 
            {
                _value = value;
                NotifyPropertyChanged("Value");
            }
        }

        public SampleData() {  }

        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Este modelo cuenta con dos propiedades (Name y Value) e implementa INotifyPropertyChanged para poder manejar el Binding de forma correcta.

Ahora creamos el ViewModel. En una aplicación real deberías obtener dichos valores desde un webservice en tu servidor, pero para efectos prácticos, aquí inicializo una lista de objetos SampleData (nuestro modelo) en el constructor del ViewModel.

using System.Collections.Generic;

namespace SilverlightApplication3
{
    public class ViewModel
    {
        public string Title { get; set; }
        public List<SampleData> Samples { get; set; } 

        public ViewModel()
        {
            Title = "Probando graficas";
            Samples = new List<SampleData>();
            Samples.Add(new SampleData() { Name = "Nombre 1", Value = 1 });
            Samples.Add(new SampleData() { Name = "Nombre 2", Value = 4 });
            Samples.Add(new SampleData() { Name = "Nombre 3", Value = 3 });
            Samples.Add(new SampleData() { Name = "Nombre 4", Value = 2 });
            Samples.Add(new SampleData() { Name = "Nombre 5", Value = 5 });
        }
    }
}

Finalmente creamos nuestra vista en XAML:

<UserControl x:Class="SilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="390"
             d:DesignWidth="638"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:me="clr-namespace:SilverlightApplication3"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
    <UserControl.Resources>
        <me:ViewModel x:Key="model" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          Background="White"
          DataContext="{Binding Source={StaticResource model}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="237" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel>
            <TextBlock Text="{Binding Title}"
                       FontWeight="Bold"
                       Margin="0,10"
                       HorizontalAlignment="Center" />
            <sdk:DataGrid AutoGenerateColumns="False"
                          x:Name="dataGrid1"
                          VerticalAlignment="Top"
                          ItemsSource="{Binding Samples, Mode=TwoWay}"
                          Margin="10,0">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Nombre"
                                            Binding="{Binding Name}" />
                    <sdk:DataGridTemplateColumn Header="Valor"
                                                Width="150">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Slider Value="{Binding Value, Mode=TwoWay}"
                                            Maximum="5"
                                            Minimum="0"
                                            Width="100" />
                                    <TextBlock Text="{Binding Value, StringFormat={0:F4} }" />
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </StackPanel>
        <Grid Grid.Column="1">
            <toolkit:Chart Margin="10">
                <toolkit:ColumnSeries x:Name="columnSeries1"
                                      ItemsSource="{Binding Samples, Mode=TwoWay}"
                                      IndependentValuePath="Name"
                                      DependentValuePath="Value">
                    <toolkit:ColumnSeries.DependentRangeAxis>
                        <toolkit:LinearAxis Orientation="Y"
                                            Minimum="0"
                                            Maximum="5.5" />
                    </toolkit:ColumnSeries.DependentRangeAxis>
                </toolkit:ColumnSeries>
            </toolkit:Chart>
        </Grid>
    </Grid>
</UserControl>

En la línea 13 creamos una instancia de nuestro ViewModel y la agregamos a nuestros recursos locales. Después, en la línea 17 asignamos dicho recurso al DataContext de nuestro LayoutRoot (en este caso el Grid que contiene todos los elementos de la vista). En la línea 30 definimos la propiedad Samples de nuestro ViewModel como la fuente de datos del DataGrid. En la línea 40 definimos el binding a la propiedad Value con un slider para modificar los datos fácilmente. Las líneas 55 y 57 se encargan de hacer lo mismo para la gráfica de barras.

Nótese como los bindings se definien con el Mode=TwoWay para actualizar el ViewModel “de ida y vuelta”, es decir, que los cambios en la vista se reflejan en el ViewModel y viceversa.

Puedes ver el ejemplo corriendo aquí. Y puedes descargar el código aquí.

UPDATE: De pura casualidad encontré mi compañera Araceli Medina encontró un bug en el Silverlight Toolkit mientras jugaba con el demo. Estaba jugando con mover sliders y cambiar el tamaño de la ventana cuando noté que esto pasaba:

El borde inferior de los rectangulos no se quedaba en la parte de abajo de la gráfica. No estoy seguro a qué se deba esto pero si se vuelve a cambiar el tamaño de la ventana el problema se corrije. El bug fue dado de alta en codeplex.