Click here to Skip to main content
15,896,154 members
Articles / Desktop Programming / WPF

A WPF Pie Chart with Data Binding Support

Rate me:
Please Sign up or sign in to vote.
4.96/5 (86 votes)
24 Jul 2008CPOL14 min read 442.6K   13.8K   241  
This article describes the development of an interactive pie chart which uses data binding.
<UserControl x:Class="ScottLogic.Controls.PieChart.PiePlotter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:b="clr-namespace:ScottLogic.Shapes"
    xmlns:p="clr-namespace:ScottLogic.Controls.PieChart"
    xmlns:util="clr-namespace:ScottLogic.Util">
    <UserControl.Resources>
        <util:FormattingConverter x:Key="formatter" />

        <Style TargetType="{x:Type b:PiePiece}">
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="StrokeThickness" Value="1"/>
        </Style>

        <Style TargetType="{x:Type ToolTip}">
            <Setter Property="Opacity" Value=".95" />
            <Setter Property="Template">
                <Setter.Value>
                    <!-- modify the tooltip control template to add a drop shadow-->
                    <ControlTemplate TargetType="{x:Type ToolTip}">
                        <Grid Background="Transparent" Margin="5" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">                            
                            <Rectangle Fill="White" Height="{TemplateBinding Height}" RadiusX="7.5" RadiusY="7.5">
                                <Rectangle.BitmapEffect>
                                    <DropShadowBitmapEffect ShadowDepth="3"/>
                                </Rectangle.BitmapEffect>
                            </Rectangle>
                            <ContentPresenter Margin="5"  HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <!-- bind the stack panel datacontext to the tooltip data context -->
                        <StackPanel Orientation="Horizontal"
                                DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}">
                            
                            <!-- navigate to the pie piece (which is the placement target of the tooltip) and obtain the percentage -->
                            <TextBlock FontSize="30" FontWeight="Bold" Margin="0,0,5,0"                        
                                    DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"
                                    Text="{Binding Path=Percentage, Converter={StaticResource formatter}, ConverterParameter='\{0:0%\}'}"/>
                    
                            <StackPanel Orientation="Vertical">                                  
                                <TextBlock FontWeight="Bold"  Text="{Binding Path=Class}"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Fund"/>                               
                                    <TextBlock Text=": "/>
                                    <TextBlock Text="{Binding Path=Fund}"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Benchmark"/>                               
                                    <TextBlock Text=": "/>
                                    <TextBlock Text="{Binding Path=Benchmark}"/>
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!-- http://forums.msdn.microsoft.com/en-US/wpf/thread/4fbf876e-15a9-4581-badc-0277d873366a -->
        <!-- http://blogs.msdn.com/tom_mathews/archive/2006/11/06/binding-a-tooltip-in-xaml.aspx -->
        <!-- http://joshsmithonwpf.wordpress.com/2008/07/22/enable-elementname-bindings-with-elementspy/ -->
       
        
    </UserControl.Resources>
    <Grid>
        <Canvas Name="canvas" VerticalAlignment="Top" />
    </Grid>

</UserControl>

    

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Scott Logic
United Kingdom United Kingdom
I am CTO at ShinobiControls, a team of iOS developers who are carefully crafting iOS charts, grids and controls for making your applications awesome.

I am a Technical Architect for Visiblox which have developed the world's fastest WPF / Silverlight and WP7 charts.

I am also a Technical Evangelist at Scott Logic, a provider of bespoke financial software and consultancy for the retail and investment banking, stockbroking, asset management and hedge fund communities.

Visit my blog - Colin Eberhardt's Adventures in .NET.

Follow me on Twitter - @ColinEberhardt

-

Comments and Discussions