1 Replies - 2330 Views - Last Post: 19 September 2011 - 05:53 AM Rate Topic: -----

#1 NotarySojac  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 53
  • View blog
  • Posts: 428
  • Joined: 30-September 10

Changing the tooltip on wpf charts (currency format)

Posted 01 April 2011 - 02:11 PM

I'm trying to figure out wpf charts, but being new to WPF, I'm floundering quite a bit.
How can I format the tooltip text to be in the currency format?

I have a project where I followed along with http://blogs.msdn.co...ls-for-wpf.aspx to build my project.

Right now my code is:


<Window x:Class="LearningChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="Window1" Height="314" Width="542">

    <Grid>
        <charting:Chart x:Name="chart" Width="350" Height="250">
            <charting:Chart.Series>
                <charting:PieSeries ItemsSource="{Binding}"
                    DependentValuePath="Value"
                    IndependentValuePath="Key"
                    Title="Pet Preference" IsSelectionEnabled="True" />
            </charting:Chart.Series>
        </charting:Chart>
    </Grid>
</Window>




I lob this into the project and make it run as the window initializes:

chart.DataContext = new KeyValuePair<string, int>[] {
                                    new KeyValuePair<string, int>("Dog", 30),
                                    new KeyValuePair<string, int>("Cat", 25),
                                    new KeyValuePair<string, int>("Rat", 5),
                                    new KeyValuePair<string, int>("Hampster", 8),
                                    new KeyValuePair<string, int>("Rabbit", 12) };





As you will notice at runtime, when you mouse over one of the pie slices, you will be shown (in tool-tip) the absolute value and the percentage. How can I make it say "Hello World:" + absoluteValue? And/Or how can I make it print the absolute value as a currency with a $ sign and commas?

Is This A Good Question/Topic? 0
  • +

Replies To: Changing the tooltip on wpf charts (currency format)

#2 ragingben  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 170
  • View blog
  • Posts: 637
  • Joined: 07-October 08

Re: Changing the tooltip on wpf charts (currency format)

Posted 19 September 2011 - 05:53 AM

The thing to do is to bind the tooltip for the chart to the value, and user a converter to convert the value you are binding to into the correct format. If the chart object does not have a tooltip property you could try overriding the style for tooltips so that you can tell it explicitly what to bind to, and again use a converter to format the displayed text. I have included an example to demonstarte what I mean below: The red border will show a standard tool tip, the yellow border will show you how to bind the tooltip property to a property of the border itself, and the green border shows how to create a style for the tooltip wich displays text using a binding to a property of the parent border. This should help you format the tooltip:
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Width="50" Height="50" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Background="Red" ToolTip="blah blah blah"></Border>
        <Border Width="50" Height="50" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Background="Yellow" Grid.Row="1">
            <Border.ToolTip>
                <Binding RelativeSource="{RelativeSource Self}" Path="Width" Mode="OneWay"/>
            </Border.ToolTip>
        </Border>
        <Border Width="50" Height="50" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Background="Green" ToolTip="blah blah blah" Grid.Row="2">
            <Border.Resources>
                <Style TargetType="{x:Type ToolTip}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToolTip">
                                <Border BorderBrush="Black" BorderThickness="1" Background="Red">
                                    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Border}}, Path=ActualWidth, Mode=OneWay}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Border.Resources>
        </Border>
    </Grid>
</Window>


Was This Post Helpful? 2
  • +
  • -

Page 1 of 1