Accessing single SeriesInfo for Custom Tooltip

I am trying to create a custom CursorModifier Tooltip. It works in that it shows both of my lines on the screen and all the data associated with the lines. But what I would like to do is only report information about the first line, as the second line is only there for visual purposes as default. Here is a sample of my code.

<ItemsControl Margin="6" ItemsSource="{Binding SeriesData.SeriesInfo}">
 <ItemsControl.ItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Vertical">
     <StackPanel Orientation ="Horizontal">
      <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="Available Imports:"></TextBlock>      <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat=\{0:###\,##0\}}" />
       </StackPanel>
      </StackPanel>
     </DataTemplate>
    </ItemsControl.ItemTemplate>
   </ItemsControl>

What I’ve tried to do is change the ItemsSource to SeriesData.SeriesInfo[0] which seems to get only the line I want, but then the Value bindings below no longer work.

WPF

Kohins asked 9 years ago

You must login to post comments

Answers (2)

Hmmm, ok so if you have a collection of SeriesInfo as a binding source (and the above works), you can always use indexing in the XAML to bind to the first element in the collection, e.g. your template for the Cursor will look like this


<StackPanel Orientation ="Horizontal" DataContext="{Binding SeriesData.SeriesInfo[0]}">
   <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="Available Imports:"></TextBlock>            
   <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat={0:###,##0}}" />
</StackPanel>

or … if that doesn’t work, this should


<StackPanel Orientation ="Horizontal">
   <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="Available Imports:"></TextBlock>            
   <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesData.SeriesInfo[0].Value, StringFormat={0:###,##0}}" />
</StackPanel>

Does this solve the problem?

Best regards,
Andrew

Andrew Burnett-Thompson answered 9 years ago

- Kohins
- 9 years ago
Thanks, looks like maybe it's more of a xaml problem than charting problem. Doesn't seem like either of these will allow me to access the single series I want even though my above code creates my custom tooltip with all my line data, instead of just a single line like I would want. Thanks for the help though.
- Andrew Burnett-Thompson
- 9 years ago
I would recommend using WPF Snoop to debug binding issues, or at the very least take a look in the Visual Studio output window for binding errors. That can give you a real hint of what's gone wrong! Best regards, Andrew

Kohins
9 years ago

I have tried looking for binding errors but it still seems like something is missing to access these chart series. I'm pretty sure this code is close if not exact to one of your sample projects. Now this is not the code I was working on before but if this problem is solved I'm sure I can use it on my other project. This code shows the data for the 3 lines but I would like to just show one. Like you suggested switching to {Binding SeriesData.SeriesInfo[0]} does not let you further access the data in the next bindings. I'd just like to know if you can access only a single series in any of your examples or code. That way I will know if it's just a problem on my end. Thank you.

<Window.Resources>
        <!-- Define a control template for the first series rollover marker -->
        <!-- Interally, this will be used to template a blank control which will be overlaid on -->
        <!-- the ChartModifierSurface (canvas) which exists over the SciChartSurface -->
        <ControlTemplate x:Key="FirstSeriesRolloverTemplate">
            <Ellipse Fill="Black" Stroke="Green" Width="11" Height="11" StrokeThickness="2"/>
        </ControlTemplate>

        <!-- Define a control template for the second series rollover marker -->
        <ControlTemplate x:Key="SecondSeriesRolloverTemplate">
            <Ellipse Fill="Black" Stroke="Yellow" Width="11" Height="11" StrokeThickness="2"/>
        </ControlTemplate>

        <ControlTemplate x:Key="ThirdSeriesRolloverTemplate">
            <Ellipse Fill="Black" Stroke="Cyan"  Width="11" Height="11" StrokeThickness="2"/>
        </ControlTemplate>

    </Window.Resources>

    <Grid>
        <SciChart:SciChartSurface x:Name="MainChart"  Margin="0,0,0,38" >
            
            <SciChart:SciChartSurface.RenderableSeries>
                <SciChart:FastLineRenderableSeries SeriesColor="Red" RolloverMarkerTemplate="{StaticResource FirstSeriesRolloverTemplate}"/>
                <SciChart:FastLineRenderableSeries SeriesColor="Blue" RolloverMarkerTemplate="{StaticResource SecondSeriesRolloverTemplate}"/>
                <SciChart:FastLineRenderableSeries SeriesColor="Purple" RolloverMarkerTemplate="{StaticResource ThirdSeriesRolloverTemplate}"/>
            </SciChart:SciChartSurface.RenderableSeries>
            
            <SciChart:SciChartSurface.ChartModifier>
                <SciChart:RolloverModifier/>
            </SciChart:SciChartSurface.ChartModifier>
            
            <SciChart:SciChartSurface.XAxis>
                <SciChart:NumericAxis>
                    <!--<SciChart:NumericAxis.VisibleRange>
                        <SciChart:DoubleRange Min="0" Max="1200"/>
                    </SciChart:NumericAxis.VisibleRange> -->
                    
                </SciChart:NumericAxis> 
            </SciChart:SciChartSurface.XAxis>

            <SciChart:SciChartSurface.YAxis>
                <SciChart:NumericAxis>
                    
                    <!--<SciChart:NumericAxis.GrowBy>
                        <SciChart:DoubleRange Min="0.1" Max="0.5"/>
                    </SciChart:NumericAxis.GrowBy> -->
                    
                </SciChart:NumericAxis>
            </SciChart:SciChartSurface.YAxis>

        </SciChart:SciChartSurface>

        <ItemsControl Grid.IsSharedSizeScope="True" Margin="23,23,0,0" Padding="5"
                      BorderBrush="#55000000"
                      BorderThickness="2"                      
                      VerticalAlignment="Top"
                      HorizontalAlignment="Left"
                      Background="#77978989"
                      DataContext="{Binding ElementName=MainChart, Path=ChartModifier}" 
                      ItemsSource="{Binding RolloverData.SeriesInfo}" Height="92" Width="236">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="SciChart:SeriesInfo">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="ColumnA"/>
                            <ColumnDefinition SharedSizeGroup="ColumnB"/>
                        </Grid.ColumnDefinitions>

                        <!-- Bind to the SeriesName using the SeriesColor as text foreground -->
                        <TextBlock Grid.Column="0" Text="{Binding SeriesName}" Margin="3,3,20,3" FontSize="13" FontWeight="Bold"
                                  Foreground="Black" />

                        <!-- Bind to the Series Value, using the SeriesColor as text foreground -->
                        <TextBlock Grid.Column="1" Text="{Binding Value, StringFormat={}{0:0.000}}" Margin="3,3,3,3" FontSize="13" FontWeight="Bold"
                                   Foreground="Black" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
</Grid>

You must login to post comments

Ok – its purely a binding / XAML issue, you just need to point to the first item in the SeriesInfo collection

I’ve taken the code in the RolloverFeedback demo (shipped with the trial) and modified it as follows. just use a Grid and bind directly to SeriesInfo[0] as datacontext. It works on my side:


       <Border Grid.Row="1"
                Margin="23,23"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Background="#77FFFFFF"
                BorderBrush="#55000000"
                BorderThickness="2"
                Padding="5">

            <!-- This new block binds to a specific SeriesInfo instance --> 
            <Grid DataContext="{Binding ElementName=rolloverModifier, Path=RolloverData.SeriesInfo[0]}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0"
                                       Margin="3,3,20,3"
                                       FontSize="13"
                                       FontWeight="Bold"
                                       Foreground="{Binding SeriesColor,
                                                            Converter={StaticResource ColorToBrushConverter}}"
                                       Text="{Binding SeriesName}" />
                <TextBlock Grid.Column="1"
                                       Margin="3,3,3,3"
                                       FontSize="13"
                                       FontWeight="Bold"
                                       Foreground="{Binding SeriesColor,
                                                            Converter={StaticResource ColorToBrushConverter}}"
                                       Text="{Binding Value}" />
            </Grid>
            
<!-- This is the ItemsControl in the Rollover Feedback demo which I have commented out -->
            
<!--            <ItemsControl DataContext="{Binding ElementName=rolloverModifier}" ItemsSource="{Binding RolloverData.SeriesInfo}">-->
<!--                <ItemsControl.ItemTemplate>-->
<!--                    <DataTemplate>-->
<!--                        <Grid>-->
<!--                            <Grid.ColumnDefinitions>-->
<!--                                <ColumnDefinition />-->
<!--                                <ColumnDefinition />-->
<!--                            </Grid.ColumnDefinitions>-->
<!---->
<!--                            <TextBlock Grid.Column="0"-->
<!--                                       Margin="3,3,20,3"-->
<!--                                       FontSize="13"-->
<!--                                       FontWeight="Bold"-->
<!--                                       Foreground="{Binding SeriesColor,-->
<!--                                                            Converter={StaticResource ColorToBrushConverter}}"-->
<!--                                       Text="{Binding SeriesName}" />-->
<!--                            <TextBlock Grid.Column="1"-->
<!--                                       Margin="3,3,3,3"-->
<!--                                       FontSize="13"-->
<!--                                       FontWeight="Bold"-->
<!--                                       Foreground="{Binding SeriesColor,-->
<!--                                                            Converter={StaticResource ColorToBrushConverter}}"-->
<!--                                       Text="{Binding Value}" />-->
<!--                        </Grid>-->
<!--                    </DataTemplate>-->
<!--                </ItemsControl.ItemTemplate>-->
<!--            </ItemsControl>-->
        </Border>

Andrew Burnett-Thompson answered 9 years ago

- Kohins
- 9 years ago
Thank you, that helped me.
- Andrew Burnett-Thompson
- 9 years ago
No problem at all, WPF is bit quirky sometimes! Andrew

You must login to post comments

Your Answer

Please login first to submit.