Forums Retired Products and Controls
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
Close
Gerald
285
Tooltip Template
posted

Hi,

I viewed a video on the Infragistics forum, that shows Templated Tooltip Controls on XamWebCharts:-

http://community.infragistics.com/silverlight/media/p/196770.aspx

I trawled through the LOB sample code and looked briefly through the forums for example code to do this. I assumed maybe it would be something in a loaded event like:

foreach (DataPoint l_oDataPoint in this.XamWebChart.Series[0].DataPoints)
        l_oDataPoint.ToolTip = new TextBlock() { Text = l_oDataPoint.Value.ToString() };

Although the Tooltip was set to null, everytime the Chart refreshed it's content. To provide a basic Tooltip, I added a Property to my OC that returns a String; then used the DataMapping property to bind to it in my series; which works okay.

Can you please provide me with a code behind example, of how to set the Tooltip on a Chart to a standard Control (exp TextBlock), that can contain bindable/updatable properties like in the Video example posted above. Thanks.

Parents
  • 30692
    Suggested Answer
    Offline posted

    Here's one way to do it:

    The xaml:

    <UserControl.Resources>
        <DataTemplate x:Key="ToolTipTemplate">
            <Border CornerRadius="5" 
                    Background="AliceBlue">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Label}" />
                    <TextBlock Text=":"/>
                    <TextBlock Text="{Binding Value}" />
                </StackPanel>
            </Border>

        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <igChart:XamWebChart>
            <igChart:XamWebChart.Series>
                <igChart:Series ChartType="Column" DataSource="{Binding}"
                                DataMapping="Label = Label; Value = Value; ToolTip = ToolTip"/>
            </igChart:XamWebChart.Series>
        </igChart:XamWebChart>
    </Grid>

     

    And the code behind:

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            DataContext = GetSampleData();
        }

        private ObservableCollection GetSampleData()
        {
            DataTemplate template = 
                (DataTemplate)this.Resources["ToolTipTemplate"];
            ObservableCollection data =
                new ObservableCollection()
                {
                    new TestDataItem(template)
                    {
                        Label = "Item A",
                        Value = 1
                    },
                    new TestDataItem(template)
                    {
                        Label = "Item B",
                        Value = 2
                    },
                    new TestDataItem(template)
                    {
                        Label = "Item C",
                        Value = 3
                    }
                };

            return data;
        }
    }

    public class TestDataItem
        : INotifyPropertyChanged
    {
        public TestDataItem(DataTemplate template)
        {
            toolControl = new ContentControl();
            toolControl.ContentTemplate = template;
            toolControl.Content = this;
        }

        private string label; 
        public string Label 
        {
            get
            {
                return label;
            }
            set
            {
                label = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(
                        this,
                        new PropertyChangedEventArgs("Label"));
                }
            }
        }
        private double value;
        public double Value
        {
            get
            {
                return this.value;
            }
            set
            {
                this.value = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(
                        this,
                        new PropertyChangedEventArgs("Value"));
                }
            }
        }
        
        private ContentControl toolControl;   
        public object ToolTip 
        {
            get
            {
                return toolControl;
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion
    }

     

    Notice the ToolTip for each item is object type, so you can bind whatever you want in. You could just have each item have a property that creates a control on the fly based on its values. Here I elected to use a content control and have the data template be defined in the xaml, for ease of editing. Does this help?

    -Graham

Reply Children