Nested Collections in XAML / Colors & MVVM in general

[Tobias Rodewi]

I'm currently evaluating if the jump from using SL Toolkit to RadControls would be beneficial and worth the money for us. There are a few things I would want from the chart controls for me to be confident that this would be the case, namely:

1) I need to be able to bind the chart colors (the colors of the pie-slices and bars) through MVVM. I've seen this being done on the bars, but not on pie-slices. I read on another forum post that there would be some new feature in SP1 that would allow simpler customization of the colors, but I haven't been able to find any documentation on this or how to use it, not even sure this new feature implements what I'm asking for?

EDIT: I'll give a scenario just to add a bit more info to this request. I have a pie chart and column-chart(s) set up as sort of master-detail charts, showing certain consumptions. Now what I'm aiming for is to have the charts fetch the color of the bars/slices from the data bound objects. That way, the pie slices would automatically have the same color as the corresponding column chart. I.e. I have a pie chart showing 3 different consumptions, clicking one if these slices, a column chart loads up detailed information about the selected slice and the color of the bars should now match the color of the selected slice.

2) I would really want to be able to bind my charts to Nested Collections directly in XAML, without having to work in code-behind, I'm following the MVVM pattern throughout the application and would prefer if I could keep the lines of code-behind-code to a minimum..

Best reagards,

Tobias

[Velin]

Hello Tobias Lolax,

Here are the answers of your questions:

1. The RadChart control supports custom colors provided by the data bound objects. You can review this help article for more information about this. You can also easily manipulate the colors of your visual series by adding brushes to the RadChart.PaletteBrushes property or using the RadChart.CreateItemStyleDelegate for more sophisticated scenarios.
2. The RadChart control supports data binding to nested collections as shown in this help article. And although the article is written with code behind the same can be achieved in xaml. 

You can also review our online examples.

All the best,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Tobias Rodewi]

To give an answer to my own question: since the number of nested collections change at runtime, I made a property in my viewmode that dynamically creates a SeriesMappingCollection. Not sure how this is to be done in XAML. The way this was done can be found in the following thread: link. Do note that I've encountered another issue doing it this way. An issue conserning having data bound this way and use a binding for the axis labelformat.

The colors of the pie slices got sorted using PaletteBrushes, since the slices never change (always the same amount of bound dataitems, I could statically set the colors and the items would always have the correct colors)

[Alvaro]

Hi, I have a problem in binding the data item's color to the ModelObject, which contains the color I want to use. It happens in the ItemSource's DataTemplate. I can't show the correct color (from the ModelObject)

<UserControl.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="DataTemplate">
                <Grid x:Name="GridTemplate">
                    <Controls:RadChart  ItemsSource="{Binding Valores}" Margin="10,37,10,10"x:Name="chartHorizontal" Width="200" telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True"HorizontalAlignment="Center"  BorderBrush="Black" Background="White" AxisElementBrush="Black">
                        <Controls:RadChart.SeriesMappings>
                            <telerik:SeriesMapping>
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:HorizontalBarSeriesDefinition SeriesItemLabelStyle="{StaticResource CustomLabelStyle}">
                                        <telerik:HorizontalBarSeriesDefinition.Appearance>
                                            <telerik:SeriesAppearanceSettings>
                                                <telerik:SeriesAppearanceSettings.Fill>
                                                    <SolidColorBrush Color="{Binding DataItem.Color}" />
                                                </telerik:SeriesAppearanceSettings.Fill>
                                            </telerik:SeriesAppearanceSettings>
                                        </telerik:HorizontalBarSeriesDefinition.Appearance>
                                        <telerik:HorizontalBarSeriesDefinition.LabelSettings>
                                            <telerik:BarLabelSettingsLabelDisplayMode="MidPoint" />
                                        </telerik:HorizontalBarSeriesDefinition.LabelSettings>
                                    </telerik:HorizontalBarSeriesDefinition>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:SeriesMapping.ItemMappings>
                                    <telerik:ItemMapping  FieldName="ValorIndice"DataPointMember="YValue" />
                                    <!--<telerik:ItemMapping  FieldName="Valor" DataPointMember="XCategory"/>-->
                                </telerik:SeriesMapping.ItemMappings>
                            </telerik:SeriesMapping>
                        </Controls:RadChart.SeriesMappings>
                        <Controls:RadChart.DefaultView>
                            <telerik:ChartDefaultView>
                                <telerik:ChartDefaultView.ChartLegend>
                                    <telerik:ChartLegend Visibility="Collapsed">
                                    </telerik:ChartLegend>
                                </telerik:ChartDefaultView.ChartLegend>
                                <telerik:ChartDefaultView.ChartArea>
                                    <telerik:ChartArea  Margin="0,7,0,0" Height="591"VerticalAlignment="Top" BorderThickness="0" BorderBrush="#FF3D2C2C" ItemWidthPercent="76"PaletteBrushesRepeat="False">
                                        <telerik:ChartArea.PaletteBrushes>
                                            <SolidColorBrush Color="#FD9505"/>
                                            <SolidColorBrush Color="#FF3605"/>
                                            <SolidColorBrush Color="#A1E005"/>
                                        </telerik:ChartArea.PaletteBrushes>

                                        <telerik:ChartArea.Annotations>
                                            <telerik:CustomGridLineForeground="#FFDE3333" Stroke="#FFF92020"/>
                                        </telerik:ChartArea.Annotations>
                                        <telerik:ChartArea.AxisX>
                                            <telerik:AxisX AutoRange="True"MajorGridLinesVisibility="Visible" StripLinesVisibility="Collapsed" MinorTicksVisibility="Collapsed">
                                                <telerik:AxisX.AxisStyles>
                                                    <telerik:AxisStyles>
                                                        <telerik:AxisStyles.ItemLabelStyle>
                                                            <StyleTargetType="TextBlock">
                                                                <SetterProperty="Visibility" Value="Collapsed"></Setter>
                                                            </Style>
                                                        </telerik:AxisStyles.ItemLabelStyle>
                                                        <telerik:AxisStyles.TickLineStyle>
                                                            <StyleTargetType="Line">
                                                                <SetterProperty="Visibility" Value="Collapsed"></Setter>
                                                            </Style>
                                                        </telerik:AxisStyles.TickLineStyle>
                                                    </telerik:AxisStyles>
                                                </telerik:AxisX.AxisStyles>
                                            </telerik:AxisX>
                                        </telerik:ChartArea.AxisX>

                                        <telerik:ChartArea.AxisY>
                                            <telerik:AxisYStripLinesVisibility="Collapsed" MajorGridLinesVisibility="Visible"   MinorTicksVisibility="Collapsed" AutoRange="False" Step="10" MinValue="50" MaxValue="100">

                                            </telerik:AxisY>
                                        </telerik:ChartArea.AxisY>
                                    </telerik:ChartArea>
                                </telerik:ChartDefaultView.ChartArea>
                            </telerik:ChartDefaultView>
                        </Controls:RadChart.DefaultView>
                    </Controls:RadChart>
                    <StackPanel Height="20" VerticalAlignment="Top" Background="#FF1C2640"Margin="10,10,10,5">
                        <TextBlock Height="20" TextWrapping="Wrap" Text="{Binding NombreSerie}"FontFamily="Arial Unicode MS" FontSize="16" FontWeight="Bold" Foreground="White" Margin="0"TextAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
            <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
            <DataTemplate x:Key="SeriesNameItem">
                <Grid Width="96" HorizontalAlignment="Left" Margin="0,15,0,0">
                    <TextBlock TextWrapping="Wrap" Text="{Binding NombreSerie}"HorizontalAlignment="Left" Width="96"/>
                </Grid>
            </DataTemplate>
            <ItemsPanelTemplate x:Key="SeriesNameDataTemplate">
                <Grid>
                    </Grid>
            </ItemsPanelTemplate>
            <DataTemplate x:Key="DataTemplateTitulos">
                <Grid Background="#FF3F0606">
                    <TextBlock Margin="0" TextWrapping="Wrap" Text="{Binding}"Foreground="#FFAD2B2B" Width="200"/>
                </Grid>
            </DataTemplate>
            <ControlTemplate x:Key="ItemsControlControlTemplate1" TargetType="ItemsControl">
<Grid>
                        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.185*"/>
                <ColumnDefinition Width="0.815*"/>
            </Grid.ColumnDefinitions>
            <ItemsControl Grid.Column="0" ItemsSource="{Binding DataContext.NombresSeries, ElementName=LayoutRoot}" ItemTemplate="{StaticResource DataTemplateTitulos}" Margin="0,39,0,0"VerticalAlignment="Top" Background="#FFE24040" />
                <ItemsPresenter Grid.Column="1"VerticalAlignment="Top"/>
                    </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
            <ItemsControl ItemsSource="{Binding Datos}" ItemTemplate="{StaticResource DataTemplate}"ItemsPanel="{StaticResource ItemsPanelTemplate}" Template="{StaticResource ItemsControlControlTemplate1}" >
                </ItemsControl>
            <!--<Grid x:Name="Titulos" UseLayoutRounding="False" />-->
            </Grid>
</UserControl>

the ModelObject's :

public class CGValor

    {

        #region Miembros de Clase

        #region Objetos

        #endregion Objetos

        #region Constructores

        public CGValor()

        {

        }

        public CGValor(CGItem prmItem, object prmValorIndice, SolidColorBrush prmColor)

        {

            Item = prmItem;

            ValorIndice = prmValorIndice;

            Color = prmColor;

        }

        public CGValor(CGItem prmItem, object prmValorIndice)

        {

            Item = prmItem;            

            ValorIndice = prmValorIndice;

        }

        #endregion Constructores

        #endregion Miembros de Clase

        #region Métodos

        #region Privados

        #endregion Privados

        #region Públicos

        #endregion Públicos

        #endregion Métodos

        #region Propiedades

        public CGItem Item { get; set; }

        public object NombreIndice { get; set; }

        public object ValorIndice { get; set; }

        public SolidColorBrush Color { get; set; }

        #endregion Propiedades

    }

public class CGValor
    {
          public CGItem Item { get; set; }
        public object NombreIndice { get; set; } //ValueName
        public object ValorIndice { get; set; }
        public SolidColorBrush Color { get; set; }
    }

public class CGSerie
    {
        public string NombreSerie { get; set; }  //SerieName
        public Brush Color { get; set; }
        public IList<CGValor> Valores { get; set; }       //Values
    }

public class CGItem

    {

        #region Miembros de Clase

        #region Objetos

        #endregion Objetos

        #region Constructores

        public CGItem()

        {

            //Valores = new List<CGValor>();

        }

        public CGItem(string prmNombreItem, IList<CGValor> prmValores)

        {

            Valor = prmNombreItem;

        }

        #endregion Constructores

        #endregion Miembros de Clase

        #region Métodos

        #region Privados

        #endregion Privados

        #region Públicos

        #endregion Públicos

        #endregion Métodos

        #region Propiedades

        

        public object Valor { get; set; }

        //public IList<CGValor> Valores { get; set; }

        #endregion Propiedades

    }

public class CGItem
    {
       public object Valor { get; set; }
    }

Fill the Data:

var oSerie1 = new CSerieModel { NombreSerie = "Indice1", Color = CColorUtils.CrearPaleta("#FFFD9505") };

 

var oLima1 = new CItemModel { NombreItem = "Lima1" };

oLima1.Valores.Add(new CIndiceModel(oSerie1, 68));

oLima1.Valores.Add(new CIndiceModel(oSerie2, 98));

m_Datos.Add(oLima1);

m_Series.Add(oSerie1);

[Velin]

Hi Alvaro,

Please, have a look at this example that demonstrates how to use the MVVM approach with bar series (the same will work for horizontal bar). The DataItem property is valid only in the scope of the bar items and not the series definition. Here is how it is done in the example:

<Style x:Key="CustomStyle" TargetType="telerik:Bar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Bar">
                <Canvas>
                    <Rectangle x:Name="PART_DefiningGeometry"
                           Height="{TemplateBinding ItemActualHeight}"
                           Width="{TemplateBinding ItemActualWidth}"
                           Fill="{Binding DataItem.PopulationColor}" />
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Best wishes,
Ryan
the Telerik team