Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
235
xamWebChart in TileView databinding
posted

Hi,

I have been trying to get a webchart I have placed in the UserTemplateMaximized template of a TileView to databind to some numeric properties of the data item being displayed.  How do I bind the datapoints to properties of the object being displayed in the pane?

I also have a DataForm in the UserTemplateMaximized template and was able to bind the current item by setting CurrentItem="{Binding}"

<dataFormToolkit:DataForm x:Name="employeeDetailsForm" Height="400" CurrentItem="{Binding}">          <dataFormToolkit:DataField Label="Vacation Accrual">
               <TextBlock Text="{Binding VacationAccrual}" />
          </dataFormToolkit:DataField>

 

I thought I could do the same for the bar chart but I am getting xaml parse exception.

xaml:

<DataTemplate x:Key="UserTemplateMaximized">
            <StackPanel>
                <igChart:XamWebChart Name="webChart" Width="300" Height="100" DataContext="{Binding}">
                    <igChart:XamWebChart.Legend>
                        <igChart:Legend Visibility="Collapsed" />
                    </igChart:XamWebChart.Legend>
                    <igChart:XamWebChart.Series>
                        <!--<igChart:SeriesCollection>-->
                            <igChart:Series ChartType="Column" DataPointColor="Different">
                                <igChart:Series.DataPoints>                              
                                    <igChart:DataPoint Label="Vacation Accrual" Value="{Binding Path=VacationAccrual, Converter={StaticResource DoubleConverter}}" />                                   
                                </igChart:Series.DataPoints>
                            </igChart:Series>
                        <!--</igChart:SeriesCollection>-->
                    </igChart:XamWebChart.Series>
                </igChart:XamWebChart>

Thanks in advance for your help.

 

Parents
No Data
Reply
  • 30692
    Suggested Answer
    Offline posted

    Currently, you can't set properties on individual datapoints with a binding in xamWebChart, so this line is your problem:

    <igChart:Series.DataPoints>                              

       <igChart:DataPoint Label="Vacation Accrual" Value="{Binding Path=VacationAccrual, Converter={StaticResource DoubleConverter}}" />                                    

    </igChart:Series.DataPoints>

    Since DataPoint derives directly from DependencyObect, you can't set bindings on it from Xaml in the current version of Silverlight.

    I've created a sample with a workaround, however, based on what I think you are describing. The gist is that its binding against a collection and using DataMapping even though its just one data point.

    The Xaml:

    <UserControl

        xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" 

        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 

        x:Class="SilverlightApplication2.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:DesignWidth="640" d:DesignHeight="480"

        xmlns:igTileView="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.XamWebTileView.v9.2"

        xmlns:igChart="clr-namespace:Infragistics.Silverlight.Chart;assembly=Infragistics.Silverlight.DataVisualization.Chart.v9.2"

        >

        <UserControl.Resources>

            <DataTemplate x:Key="UserTemplateMaximized">

                <StackPanel>

                    <dataFormToolkit:DataForm x:Name="employeeDetailsForm" CurrentItem="{Binding}">

                        <dataFormToolkit:DataForm.ReadOnlyTemplate>

                            <DataTemplate>

                                <StackPanel>

                                    <dataFormToolkit:DataField Label="Name">

                                        <TextBlock Text="{Binding Name}" />

                                    </dataFormToolkit:DataField>

                                    <dataFormToolkit:DataField Label="Vacation Accrual">

                                        <TextBlock Text="{Binding VacationAccrual}" />

                                    </dataFormToolkit:DataField>

                                </StackPanel>

                            </DataTemplate>

                        </dataFormToolkit:DataForm.ReadOnlyTemplate>

                    </dataFormToolkit:DataForm>

     

                    <igChart:XamWebChart Name="webChart" Width="300" Height="200">

                        <igChart:XamWebChart.Legend>

                            <igChart:Legend Visibility="Collapsed" />

                        </igChart:XamWebChart.Legend>

                       

                        <igChart:XamWebChart.Series>

                            <igChart:Series ChartType="Column" DataPointColor="Different" DataSource="{Binding AsCollection}"

                                            DataMapping="Value = VacationAccrual; Label = VacationAccrualLabel">

                            </igChart:Series>

                        </igChart:XamWebChart.Series>

                    </igChart:XamWebChart>

                </StackPanel>

            </DataTemplate>

            <DataTemplate x:Key="UserTemplateNormal">

                <StackPanel>

                    <dataFormToolkit:DataForm x:Name="employeeDetailsForm" CurrentItem="{Binding}">

                        <dataFormToolkit:DataForm.ReadOnlyTemplate>

                            <DataTemplate>

                                <StackPanel>

                                    <dataFormToolkit:DataField Label="Name">

                                        <TextBlock Text="{Binding Name}" />

                                    </dataFormToolkit:DataField>

                                    <dataFormToolkit:DataField Label="Vacation Accrual">

                                        <TextBlock Text="{Binding VacationAccrual}" />

                                    </dataFormToolkit:DataField>

                                </StackPanel>

                            </DataTemplate>

                        </dataFormToolkit:DataForm.ReadOnlyTemplate>

                    </dataFormToolkit:DataForm>

                </StackPanel>

            </DataTemplate>

            <DataTemplate x:Key="UserTemplateMinimized">

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="Name: "/><TextBlock Text="{Binding Name}"/>

                </StackPanel>

            </DataTemplate>

           

            <DataTemplate x:Key="HeaderTemplate">

                <TextBlock Text="{Binding Name}"/>

            </DataTemplate>

        </UserControl.Resources>

        <Grid x:Name="LayoutRoot">

            <igTileView:XamWebTileView Name="xamWebTileView1"

                                       MaximizedStateChanging="XamWebTileView_MaximizedStateChanging"

                                       ItemsSource="{Binding EmployeeCollection}"

                                       TilePaneContentTemplate="{StaticResource UserTemplateNormal}"

                                       TilePaneHeaderTemplate="{StaticResource HeaderTemplate}"

                                       >

            </igTileView:XamWebTileView>

        </Grid>

    </UserControl>

    With code behind:

    public partial class MainPage : UserControl

        {

            public MainPage()

            {

                InitializeComponent();

     

                this.DataContext = this;

            }

     

            private void ChangeActiveTemplate(string templateName, UIElement element)

            {

                TilePane tile = element as TilePane;

                if (tile != null)

                {

                    tile.ContentTemplate = this.Resources[templateName] as DataTemplate;

                }

            }

     

            private void SetAllOthersTemplate(string templateName, UIElement element)

            {

                foreach (UIElement child in xamWebTileView1.Items)

                {

                    if (element != child)

                    {

                        ChangeActiveTemplate(templateName, child);

                    }

                }

            }

     

            private void XamWebTileView_MaximizedStateChanging(object sender, Infragistics.Silverlight.TileStateChangingEventArgs e)

            {

                TilePane tile = e.Element as TilePane;

                if (tile != null)

                {

                    if (e.NewState == Infragistics.Silverlight.TileState.Maximized)

                    {

                        SetAllOthersTemplate("UserTemplateMinimized", e.Element);

                        ChangeActiveTemplate("UserTemplateMaximized", e.Element);

                    }

                    else if (e.NewState == Infragistics.Silverlight.TileState.Normal)

                    {

                        SetAllOthersTemplate("UserTemplateNormal", e.Element);

                        ChangeActiveTemplate("UserTemplateNormal", e.Element);

                    }

                    else

                    {

                        ChangeActiveTemplate("UserTemplateMinimized", e.Element);

                    }

                }

            }

     

            private EmployeeCollectionViewModel _employeeCollection;

     

            public EmployeeCollectionViewModel EmployeeCollection

            {

                get

                {

                    if (_employeeCollection == null)

                    {

                        _employeeCollection = new EmployeeCollectionViewModel();

     

      //test data

                        _employeeCollection.Add(new EmployeeViewModel() { Name = "Bob", VacationAccrual = 10 });

                        _employeeCollection.Add(new EmployeeViewModel() { Name = "Jessie", VacationAccrual = 10 });

                        _employeeCollection.Add(new EmployeeViewModel() { Name = "Jill", VacationAccrual = 4 });

                        _employeeCollection.Add(new EmployeeViewModel() { Name = "James", VacationAccrual = 13 });

                        _employeeCollection.Add(new EmployeeViewModel() { Name = "Brian", VacationAccrual = 20 });

                    }

                    return _employeeCollection;

                }

            }

        }

     

        public class EmployeeCollectionViewModel : ObservableCollection<EmployeeViewModel>, INotifyPropertyChanged

        {

            public EmployeeCollectionViewModel()

            {

            }

        }

     

        public class EmployeeViewModel

        {

            public string Name { get; set; }

            public double VacationAccrual { get; set; }

            public string VacationAccrualLabel { get { return "VacationAccrual"; } }

     

            public IEnumerable AsCollection

            {

                get

                {

                    return new List<EmployeeViewModel>() { this };

                }

            }

        }

    In particular, I'm not certain what you intended the UserTemplateMaximized for, from the information you provided, so I made an educated guess. Does this help?

    -Graham

     

     

     

     

Children
No Data