Click here to Skip to main content
15,886,055 members
Articles / Desktop Programming / WPF

Interactive 3D bar chart custom control in WPF with rotation, touch-sense display, and databinding support

Rate me:
Please Sign up or sign in to vote.
4.69/5 (37 votes)
29 Mar 2009CPOL10 min read 248.1K   8.1K   73  
Create a WPF 3D Bar chart in your .NET application easily. You can create interactive 3D bar charts in seconds using this WPF 3D bar chart custom control. You can even databind your input to see the '3D chart bar change live as you enter your input' effect.
<Window x:Class="Test3DChart.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF 3D Chart Demo" Height="496" Width="1198" xmlns:my="clr-namespace:Wpf3DChartTutorial;assembly=Wpf3DChartTutorial" WindowState="Maximized" WindowStartupLocation="CenterScreen" ResizeMode="CanResize" HorizontalAlignment="Left">
    <Grid Height="719" Name="grid1" Width="1187" HorizontalAlignment="Left" VerticalAlignment="Top" ClipToBounds="True" FlowDirection="LeftToRight">
        <Grid.RowDefinitions>
            <RowDefinition Height="412*" />
            <RowDefinition Height="307*" />
        </Grid.RowDefinitions>
        <Canvas Height="99.081" Margin="-2,1,538.951,0" Name="canvas2" VerticalAlignment="Top">
           <Label Canvas.Left="1" Canvas.Top="-1" Height="29" Name="label5" Width="99" FontSize="14">Instructions:</Label>
            <Label Canvas.Left="0" Canvas.Top="22" Height="27" Name="label6" Width="571" FontSize="14">1. Click left mouse button on the chart and gently move the mouse to rotate/spin the chart</Label>
            <Label Canvas.Left="2" Canvas.Top="43" Height="29" Name="label7" Width="571" FontSize="14">2. Hover the mouse on any bar to see its value(s)</Label>
            <Label Canvas.Left="2" Canvas.Top="65" Height="28" Name="label8" Width="571" FontSize="14">3. WPF Databinding: You may enter new X,Y, Z values, modify Bar Color,Chart title etc..</Label>
            <UniformGrid Name="uniformGrid1" IsItemsHost="False" ClipToBounds="True" Canvas.Left="452" Canvas.Top="103" Height="291" Width="577">
                <my:WPF3DChart ClipToBounds="True" VerticalAlignment="Top" Height="240.737" Name="wPF3DChart1" Width="469"></my:WPF3DChart>
            </UniformGrid>
            <Frame Height="8" Name="frame1" Canvas.Left="5" Canvas.Top="95" Width="645.049" Background="Gray" BorderBrush="Goldenrod" />
        </Canvas>
        <Canvas Name="canvas3" Margin="3,104,0,265" Grid.RowSpan="2" HorizontalAlignment="Left" Width="339">
            <Label Height="28" Name="label9" FontSize="12" Width="71" Canvas.Left="10" Canvas.Top="210">Colors :</Label>
            <TextBox Height="23" Name="textBox5" Width="199" TabIndex="5" FontSize="12" Canvas.Left="92" Canvas.Top="210" />
            <TextBox Height="23" Name="textBox4" Width="202" TabIndex="1" FontSize="12" Canvas.Left="89" Canvas.Top="52" />
            <Label Height="28" Name="label4" FontSize="12" Width="76" Canvas.Left="10" Canvas.Top="47">Chart Title:</Label>
            <Label Height="28" Name="label10" FontSize="12" Width="80" Canvas.Left="10" Canvas.Top="239">X Axis Color :</Label>
            <TextBox Height="25" Name="textBox6" Width="198" TabIndex="6" FontSize="12" Canvas.Left="92" Canvas.Top="239" />
            <TextBox Height="23" Name="textBox7" Width="198" TabIndex="7" IsTabStop="True" FontSize="12" Canvas.Left="92" Canvas.Top="274" />
            <Label Height="28" Name="label11" Width="87" Canvas.Left="10" Canvas.Top="272" FontSize="12">Y Axis Color :</Label>
            <Label Name="label1" FontSize="12" Height="23" Width="71" Canvas.Left="15" Canvas.Top="85.737">X Values :</Label>
            <Label Height="28" Name="label3" FontSize="12" Width="71" Canvas.Left="15" Canvas.Top="150.737">Z Values :</Label>
            <TextBox Name="textBox1" Width="202" TabIndex="2" FontSize="12" Height="23" Canvas.Left="89" Canvas.Top="85.737" />
            <TextBox Name="textBox2" Width="201" TabIndex="3" FontSize="12" Height="23" Canvas.Left="90" Canvas.Top="118.737" />
            <TextBox Height="23" Name="textBox3" Width="200" TabIndex="4" FontSize="12" Canvas.Left="91" Canvas.Top="152.737" />
            <Slider Height="21" Name="slider1" Width="86" Canvas.Left="156.608" Canvas.Top="308" />
            <Label Height="30" Name="label12" Width="107" Canvas.Left="15" Canvas.Top="307" FontSize="12">Mouse Sensitivity:</Label>
            <Label Canvas.Left="17" Canvas.Top="113.737" Height="28" Name="label13" Width="69" FontSize="12">Y Values :</Label>
            <Label Canvas.Left="119" Canvas.Top="307" Height="30" Name="label2" Width="47">(High)</Label>
            <Label Canvas.Left="249" Canvas.Top="307" Height="28" Name="label14" Width="41">(Low)</Label>
            <Label Canvas.Left="15" Canvas.Top="180.737" Height="28" Name="label15" Width="80">Chart Status:</Label>
            <RadioButton Canvas.Left="94" Canvas.Top="185.737" Height="18" Name="radioButton1" Width="79">Hide chart</RadioButton>
            <RadioButton Canvas.Left="179" Canvas.Top="185.737" Height="18" Name="radioButton2" Width="79">Show chart</RadioButton>
            <Label Canvas.Left="0" Canvas.Top="13" Height="28" Name="label16" Width="339" FontSize="12" FontWeight="Bold">WPF 3D chart Databind (two-way) properties demo.</Label>
        </Canvas>
    </Grid>
</Window>

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
Software Developer (Senior)
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions