none
Binding External TextBlock Content to Chart ContentControl in WPF RRS feed

  • Question

  • Situation:

    I am creating two identical charting applications: one in WPF and another in SilverLight. I needed to set custom ToolTips on LineSeries points and managed to do this for a SilverLight application as shown in a previous post I created at:

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/71de6f54-4fd5-435c-92ee-63360a3b29fd/how-is-code-behind-used-to-set-custom-tooltip-for-lineseries?forum=wpf

    The Problem:

    To my surprise, the approach shown in the code below yields correctly populated ToolTips when the chart is created in SilverLight but yields blank ToolTips when the identical chart is created in WPF. What changes should be made to these Setter properties or elsewhere in the code in order to make the TextBlock string appear in the ToolTip in the WPF chart?

    The XAML Code:

    .
    .
    .
    <TextBlock x:Name="TextBlockChartFirstPoint"></TextBlock>
    .
    .
    .
    <Style TargetType="chartingToolkit:DataPoint">
    <Setter Property="Background" Value="Red" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="5" />
    <Setter Property="Width" Value="12" />
    <Setter Property="Height" Value="12" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
    <Grid x:Name="firstLineSeriesRoot" Opacity="1">
    <ToolTipService.ToolTip>
    <ToolTip>
    <StackPanel>
    <ContentControl>
    <TextBlock Text="{Binding ElementName=TextBlockChartFirstPoint, Path=Text, StringFormat='\{0\}'}">
    </TextBlock>
    </ContentControl>
    </StackPanel>
    </ToolTip>
    </ToolTipService.ToolTip>
    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    The Code Behind:

    namespace MyChart
    {
        public partial class MainWindow : Window
        {
    .
    .
    .

    public class MyStrObject
    {
    public string myStr { get; set; }
    }

    MyStrObject stringInstanceFirstPoint = new MyStrObject();

    private void btnCreateChart_Click(object sender, RoutedEventArgs e)
    {
    GetChartCoordinates();
    string strFirst = MyComplexToMyString(5.3,8.9); // some test values
    stringInstanceFirstPoint.myStr = strFirst;
    BindObjToTxtBlk(stringInstanceFirstPoint, TextBlockChartFirstPoint);
    }

    private void GetChartCoordinates()
    {
    ((LineSeries)myLineChart.Series[0]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (6.4, 7.8)};
    ((LineSeries)myLineChart.Series[1]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (5.9, 2.3)};
    ((LineSeries)myLineChart.Series[2]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (8.1, 4.7)};
    }

    public string MyComplexToMyString(double myXAxisReal, double myYAxisImaginary)
    {
    // ... do math and convert the x-axis and y-axis coordinates to a magnitude and an angle
    // I simplify things for explanation purposes here
    double x = myXAxisReal + myYAxisImaginary;
    string y = x.ToString();
    return y;
    }

    private void BindObjToTxtBlk(MyStrObject theStr, TextBlock theTxtBlk)
    {
    // create object
    Binding myBind = new Binding();

    // set properties
    myBind.Path = new PropertyPath("myStr");
    myBind.Mode = BindingMode.OneTime;

    // set source
    myBind.Source = theStr;

    // attach binding
    theTxtBlk.SetBinding(TextBlock.TextProperty, myBind);
    }
    .
    .
    .
    }
    }


    Tuesday, April 22, 2014 3:45 PM

All replies

  • Hi,

    AFAIK, if we want to use Binding with ElementName in the ControlTemplate, only this scenario can work:

    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
             <Grid x:Name="Root" Opacity="1" >
                        <ToolTipService.ToolTip >
                                  <StackPanel Margin="10,2,10,2" >
                                          <ContentControl>
                                                 <TextBlock x:Name="txb1" Text="Balabala" />
                                                 <TextBlock Text="{Binding ElementName=txb1, Path=Text, StringFormat='\{0\}'}" />
                                          </ContentControl>
                                  </StackPanel>
                         </ToolTipService.ToolTip>
             </Grid>
    </ControlTemplate>

    For your requirement, a separate DataContext and Relative Source Binding for each point may be necessary:

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/d3c939ae-d5a2-442c-906b-5fd53043566e/help-with-data-binding-in-a-controltemplate-please?forum=wpf
    http://druss.pp.ua/2013/10/wpf-binding-examples/


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, April 23, 2014 6:50 AM
    Moderator
  • I have tested the proposed solution above before and it does not work. You get an error saying the ContentControl element content has been set more than once.
    Wednesday, April 23, 2014 3:52 PM
  • I have tested the proposed solution above before and it does not work. You get an error saying the ContentControl element content has been set more than once.

    Sorry, should be like this:

    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
             <Grid x:Name="Root" Opacity="1" >
                        <ToolTipService.ToolTip >
                                  <StackPanel Margin="10,2,10,2" >
                                          <TextBlock x:Name="txb1" Text="Balabala" />
    
                                          <ContentControl>
                                                 <TextBlock Text="{Binding ElementName=txb1, Path=Text, StringFormat='\{0\}'}" />
                                          </ContentControl>
                                  </StackPanel>
                         </ToolTipService.ToolTip>
             </Grid>
    </ControlTemplate>

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, April 24, 2014 1:28 AM
    Moderator
  • Hi,

    Based on my test, I think this is the issue of Toolkit Chart control.

    I create a ControlTemplate for WPF Button:

    <ControlTemplate x:Key="template"  TargetType="{x:Type Button}">
                <StackPanel Margin="10,2,10,2" >
                    <TextBlock Background="Red" x:Name="txb1" Text="Balabala" />
                    <TextBlock Background="Yellow" Text="{Binding ElementName=TextBlockChartFirstPoint, Path=Text, StringFormat='\{0\}'}" />
                </StackPanel>
            </ControlTemplate>

    The above worked well, but for DataPoint, unfortunately, no:(


    I suggest you reporting this issue in their official site: https://wpf.codeplex.com/workitem/list/basic


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, April 24, 2014 2:13 AM
    Moderator
  • Thank you for confirming my observation. I am curious why the text appears when hovering over the LineDataPoint element in SilverLight but not the LineDataPoint element in WPF. I think there is a better way to bind TextBlock/TextBox or other element's text to a LineDataPoint ToolTip in WPF. I hope there is a WPF expert out there that will offer a working alternative.
    • Edited by maporojo Thursday, April 24, 2014 4:33 PM Clarification
    Thursday, April 24, 2014 3:24 AM
  • Thank you for confirming my observation. I am curious why the text appears when hovering over the LineDataPoint element in SilverLight but not the LineDataPoint element in WPF. I think there is a better way to bind TextBlock/TextBox or other element's text to a LineDataPoint ToolTip in WPF. I hope there is a WPF expert out there that will offer a working alternative.

    Hi,

    I also try to use some tools, like Snoop, to figure out the inner principle, but failed, as I suggested, we'd better refer to this forum for better answer: https://wpf.codeplex.com/workitem/list/basic


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, April 25, 2014 7:47 AM
    Moderator