Posted by: Zeeshan Amjad | March 17, 2010

Using Canvas as a ItemPanel Template in ListBox


We have already saw few examples of ItemPanel Template in ListBox when creating horizontal list box here. We also saw couple of examples of using Radial Panel here and here.  Now we are going to use the Canvas as a panel. Here is simple piece of XAML code to define canvas.

  1: <ListBox.ItemsPanel>
  2: 	<ItemsPanelTemplate>
  3: 		<Canvas/>
  4: 	</ItemsPanelTemplate>
  5: </ListBox.ItemsPanel>
  6: 

But using Canvas is not very useful if we cant place the items in different locations in Canvas. But if we try to set the listboxitem placement inside the item panel template. But we can set it using the style and items container style. Here is a piece of code to define the X and Y cordinate of list box item inside the canvas.

  1: <Style x:Key="myStyle" TargetType="ListBoxItem">
  2: 	<Setter Property="Canvas.Left" Value="{Binding X}"/>
  3: 	<Setter Property="Canvas.Top" Value="{Binding Y}"/>
  4: </Style>
  5: 

Now we are going to make one Data Point class to store the color name, x value and y value. Here is our class.

  1: public class DataPoint
  2: {
  3:     public DataPoint(String name, Double x, Double y)
  4:     {
  5:         Name = name;
  6:         X = x;
  7:         Y = y;
  8:     }
  9: 
 10:     public String Name
 11:     { get; set; }
 12: 
 13:     public Double X
 14:     { get; set; }
 15: 
 16:     public Double Y
 17:     { get; set; }
 18: }
 19: 

We are going to display one small rectangle with the color specified in the object of this class. Here is a data template to display the of list box item.

  1: <DataTemplate>
  2: 	<Rectangle Width="10" Height="10" Fill="{Binding Name}"/>
  3: </DataTemplate>
  4: 

Here is complete XAML code of the 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:     Title="Canvas" Height="300" Width="300">
  5:     <Window.Resources>
  6:         <Style x:Key="myStyle" TargetType="ListBoxItem">
  7:             <Setter Property="Canvas.Left" Value="{Binding X}"/>
  8:             <Setter Property="Canvas.Top" Value="{Binding Y}"/>
  9:         </Style>
 10:     </Window.Resources>
 11:     <Grid>
 12:         <ListBox Name="list" Margin="5" ItemContainerStyle="{StaticResource myStyle}">
 13:             <ListBox.ItemsPanel>
 14:                 <ItemsPanelTemplate>
 15:                     <Canvas/>
 16:                 </ItemsPanelTemplate>
 17:             </ListBox.ItemsPanel>
 18:             <ListBox.ItemTemplate>
 19:                 <DataTemplate>
 20:                     <Rectangle Width="10" Height="10" Fill="{Binding Name}"/>
 21:                 </DataTemplate>
 22:             </ListBox.ItemTemplate>
 23:         </ListBox>
 24:     </Grid>
 25: </Window>
 26: 

And here is complet 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: 
 15: namespace WpfCanvas
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<DataPoint> test = new List<DataPoint>();
 27: 
 28:             test.Add(new DataPoint("Black", 10, 10));
 29:             test.Add(new DataPoint("Red", 40, 40));
 30:             test.Add(new DataPoint("Blue", 70, 70));
 31:             test.Add(new DataPoint("Green", 100, 100));
 32:             test.Add(new DataPoint("Yellow", 130, 130));
 33: 
 34:             list.ItemsSource = test;
 35:         }
 36:     }
 37: 
 38:     public class DataPoint
 39:     {
 40:         public DataPoint(String name, Double x, Double y)
 41:         {
 42:             Name = name;
 43:             X = x;
 44:             Y = y;
 45:         }
 46: 
 47:         public String Name
 48:         { get; set; }
 49: 
 50:         public Double X
 51:         { get; set; }
 52: 
 53:         public Double Y
 54:         { get; set; }
 55:     }
 56: }
 57: 


This is the output of this program.

CanvasListBoxOutput

Advertisements

Responses

  1. […] List Box We just saw how to use canvas in the list box to display items wherever we want here. Now we are going to use this and create a bar graph using list box. We are using rectangle to […]

  2. […] Using Canvas as a ItemPanelTemplate in TabControl We already saw how to use different item panel template here. Now we are going to use Canvas as a item panel template. We already did the similar thing in ListBox here. […]

  3. Just the code that I needed – thanks!

    • Thanks to like it.

  4. Thank you very much!!!
    It was helpful 🙂


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: