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.
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>
<dataFormToolkit:DataField Label="Name">
<TextBlock Text="{Binding Name}" />
</dataFormToolkit:DataField>
<dataFormToolkit:DataField Label="Vacation Accrual">
<TextBlock Text="{Binding VacationAccrual}" />
</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>
<DataTemplate x:Key="UserTemplateNormal">
<DataTemplate x:Key="UserTemplateMinimized">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name: "/><TextBlock Text="{Binding Name}"/>
<DataTemplate x:Key="HeaderTemplate">
<TextBlock Text="{Binding Name}"/>
</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 (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
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