Professional, Software

Using Stack3D + DataBinding

In the previous post about Stack3DPanel, I mentioned that one of the reason why I wanted to build it panel so that I can use it with Databinding. Since the whole point of this panel is to visualize a collection of UIElements. It makes sense that somebody might want to databind that collection. In this post, I am using the panel that I built in the last post with ItemsControl.

Before we dive into the code here are few of the concepts that I used…

  1. Here is the link to the basic databinding documentation.
  2. ItemsControl is the base class for collection type of control such as ListBox
  3. It has a concept of DataTemplate, which basically is the template for visualizing each item in the collection.
  4. ItemsSource is the property that lets you set the collection for the item control
  5. ItemsPanel is the property that lets you set the panel in which data item will be laid out using datatemplate. By default this is a stack panel, that stack vertically but you could change it to any panel you want.

In this sample I am going to use all of these to visualize a collection of image urls and lay it out in the Stack3D Panel that I build.


To get around some of the type converter issues, I have built a user control that has property of type string. The only thing that this user control does it sets the string property to be the source of image element.  This control is built on the app side because STack3D panel does not need to know anything about this. Here is the code for that user control.


<UserControl x:Class="ControlHost.ImageControl"
    <Grid x:Name="LayoutRoot" Background="White">
        <Image Name="image"/>


Code here is very simple. Only thing to understand here is that I have declared a dependency property of type string. Since I wanted this property to be a target of databinding, I have created it to be a DP.

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Controls;
   4: using System.Windows.Media.Imaging;
   6: namespace ControlHost
   7: {
   8:     public partial class ImageControl : UserControl
   9:     {
  10:         public ImageControl()
  11:         {
  12:             InitializeComponent();
  13:         }
  15:         public string Source
  16:         {
  17:             get { return this.GetValue(ImageControl.SourceProperty).ToString(); }
  18:             set { SetValue(ImageControl.SourceProperty, value); }
  19:         }
  22:         public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(string), typeof(ImageControl), new PropertyChangedCallback(OnSourcePropertyChanged));
  24:         private static void OnSourcePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
  25:         {
  26:             ImageControl customimage = (ImageControl)obj;
  27:             if (customimage.Source != null)
  28:             {
  29:                 customimage.image.Source = new BitmapImage(new Uri(args.NewValue as string, UriKind.RelativeOrAbsolute));
  30:             }
  32:         }
  33:     }
  34: }


Here is now application code. I used ItemsControl and then I am binding the items control to a collection of url (string). I have set the panel for the items control to be the Stack3D panel and it just works.


<UserControl x:Class="ControlHost.Page"
    <ItemsControl Name ="itemcontrol" ItemsSource="{Binding}">
                <control:Stack3DPanel FrameCount="5" 
                         MouseLeftButtonDown="Stack3DPanel_MouseLeftButtonDown" />
                <app:ImageControl Source="{Binding}"/>


Page Code

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Windows;
   5: using System.Windows.Controls;
   6: using System.Windows.Documents;
   7: using System.Windows.Input;
   8: using System.Windows.Media;
   9: using System.Windows.Media.Animation;
  10: using System.Windows.Shapes;
  11: using System.Collections.ObjectModel;
  13: namespace ControlHost
  14: {
  15:     public partial class Page : UserControl
  16:     {
  17:         ObservableCollection<string> _imageuris;
  18:         public Page()
  19:         {
  20:             InitializeComponent();
  21:             _imageuris = new ObservableCollection<string>();
  22:             _imageuris.Add("Resources/Lion.jpg");
  23:             _imageuris.Add("Resources/Oregon.jpg");
  24:             _imageuris.Add("Resources/Picture1.jpg");
  25:             _imageuris.Add("Resources/Picture2.jpg");
  26:             _imageuris.Add("Resources/Picture3.jpg");
  27:             _imageuris.Add("Resources/Picture4.jpg");
  28:             _imageuris.Add("Resources/Picture5.jpg");
  29:             _imageuris.Add("Resources/Picture7.jpg");
  30:             _imageuris.Add("Resources/AlkiBeach.jpg");
  32:             itemcontrol.DataContext = _imageuris;
  33:         }
  37:         private void Stack3DPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  38:         {
  39:             (sender as MyControls.Stack3DPanel).MoveNext();
  40:         }
  41:     }
  42: }


here is the update project to download


Leave a Reply

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

You are commenting using your 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