Posted by: Zeeshan Amjad | May 4, 2010

Creating Bar Graph with List Box revisited


We have already seen an example of creating bar graph with list box here. Now we are going to extend that example and include the label along with the bar graph.

We already have a name property in our data point. We used the color name for this purpose. For our example we are going to use the same property, but it is true for any other property too. Here is our data point class.

  1: public class DataPoint
  2: {
  3:     public DataPoint(String name, Double counter,  Double value)
  4:     {
  5:         Name = name;
  6:         Counter = counter;
  7:         Value = value;
  8:     }
  9: 
 10:     public String Name
 11:     { get; set; }
 12: 
 13:     public Double Counter
 14:     { get; set; }
 15: 
 16:     public Double Value
 17:     { get; set; }
 18: }

Now we are going to add one text block along with rectangle in XAML to display the text in our list box item template. We have to introduce some panel to display more than one control and in our example we are going to use stack panel. In addition we rotate the text to 270 degree to give a better look.

  1: <ListBox.ItemTemplate>
  2: 	<DataTemplate>
  3: 		<StackPanel>
  4: 			<Rectangle Width="15" Height="{Binding Value}" Fill="{Binding Name}"/>
  5: 			<TextBlock Margin="5" Text="{Binding Name}" Width="50">
  6: 				<TextBlock.LayoutTransform>
  7: 					<RotateTransform Angle="270"/>
  8: 				</TextBlock.LayoutTransform>
  9: 			</TextBlock>
 10: 		</StackPanel>
 11: 	</DataTemplate>
 12: </ListBox.ItemTemplate>
 13: 

Also note that we fixed the width of text block to 50. We did it because we want to display all the rectangle from the same point. If we don’t do this, then our rectangles (to display the bar graph) will not be align.

Here is complete XAML code of our program.

  1: <Window x:Class="WpfCanvas.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfCanvas"
  5:     Title="Canvas" Height="300" Width="300">
  6:     <Window.Resources>
  7:         <local:CounterConverter x:Key="counterConverterObj"/>
  8:         <Style x:Key="myStyle" TargetType="ListBoxItem">
  9:             <Setter Property="Canvas.Left" 
 10:                     Value="{Binding Path=Counter, 
 11:                     Converter={StaticResource counterConverterObj}}"/>
 12:             <Setter Property="Canvas.Bottom" Value="50"/>
 13:         </Style>
 14:     </Window.Resources>
 15:     <Grid>
 16:         <ListBox Name="list" Margin="5" ItemContainerStyle="{StaticResource myStyle}">
 17:             <ListBox.ItemsPanel>
 18:                 <ItemsPanelTemplate>
 19:                     <Canvas/>
 20:                 </ItemsPanelTemplate>
 21:             </ListBox.ItemsPanel>
 22:             <ListBox.ItemTemplate>
 23:                 <DataTemplate>
 24:                     <StackPanel>
 25:                         <Rectangle Width="15" Height="{Binding Value}" Fill="{Binding Name}"/>
 26:                         <TextBlock Margin="5" Text="{Binding Name}" Width="50">
 27:                             <TextBlock.LayoutTransform>
 28:                                 <RotateTransform Angle="270"/>
 29:                             </TextBlock.LayoutTransform>
 30:                         </TextBlock>
 31:                     </StackPanel>
 32:                 </DataTemplate>
 33:             </ListBox.ItemTemplate>
 34:         </ListBox>
 35:     </Grid>
 36: </Window>
 37: 

 

We didn’t change anything in our C# program. Here is our C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: using System.Globalization;
 15: 
 16: namespace WpfCanvas
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         public Window1()
 24:         {
 25:             InitializeComponent();
 26: 
 27:             List<DataPoint> test = new List<DataPoint>();
 28: 
 29:             test.Add(new DataPoint("Black", 1, 50));
 30:             test.Add(new DataPoint("Red", 2, 40));
 31:             test.Add(new DataPoint("Blue", 3, 20));
 32:             test.Add(new DataPoint("Green", 4, 125));
 33:             test.Add(new DataPoint("Yellow", 5, 65));
 34:             test.Add(new DataPoint("Violet", 6, 15));
 35:             test.Add(new DataPoint("Wheat", 7, 90));
 36:             test.Add(new DataPoint("Indigo", 8, 45));
 37:             test.Add(new DataPoint("Cyan", 9, 130));
 38:             test.Add(new DataPoint("Navy", 10, 75));
 39: 
 40:             list.ItemsSource = test;
 41:         }
 42:     }
 43: 
 44:     public class CounterConverter : IValueConverter
 45:     {
 46:         public object Convert(object value, Type targetType,
 47:             object parameter, CultureInfo cultureInfo)
 48:         {
 49:             double counter = (double)value;
 50: 
 51:             return counter * 20;
 52:         }
 53: 
 54:         public object ConvertBack(object value, Type targetType,
 55:             object parameter, CultureInfo cultureInfo)
 56:         {
 57:             throw new NotImplementedException();
 58:         }
 59:     }
 60: 
 61:     public class DataPoint
 62:     {
 63:         public DataPoint(String name, Double counter,  Double value)
 64:         {
 65:             Name = name;
 66:             Counter = counter;
 67:             Value = value;
 68:         }
 69: 
 70:         public String Name
 71:         { get; set; }
 72: 
 73:         public Double Counter
 74:         { get; set; }
 75: 
 76:         public Double Value
 77:         { get; set; }
 78:     }
 79: }
 80: 

 

This is the output of the program.

BarGraphListBox_02

Advertisements

Responses

  1. […] the low and high value of the stock. We already saw the example of creating the bar graph here and here. Now we are going to modify the program to display the high and low value of individual stock. […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: