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.



About these ads