WPF Cover Flow Tutorial : Part 5

After Part 4, we will partly refactor the code to build a custom component.

We define a new assembly called FlowComponent where we will move most of the code. First, the c# code will be part of a new class called FlowControl. This class herits from UserControl :

view plainprint?

1. using[...]  
2. namespace Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent  
3. {  
4.     public partial class FlowControl : UserControl  
5.     {  
6.         #region Fields  
7.         private int index;  
8.         private readonly List<Cover> coverList = new List<Cover>();  
9.         #endregion  
10.         #region Private stuff  
11.         private void RotateCover(int pos)[...]  
12.         private void UpdateIndex(int newIndex)[...]  
13.         private void viewPort_MouseDown(object sender, MouseButtonEventArgs e)[...]  
14.         #endregion  
15.         public FlowControl()  
16.         {  
17.             InitializeComponent();  
18.         }  
19.         public void Load(string imagePath)  
20.         {  
21.             coverList.Clear();  
22.             var imageDir = new DirectoryInfo(imagePath);  
23.             int doneImages = 0;  
24.             foreach (FileInfo image in imageDir.GetFiles("*.jpg"))  
25.             {  
26.                 var cover = new Cover(image.FullName, doneImages++);  
27.                 coverList.Add(cover);  
28.                 visualModel.Children.Add(cover);  
29.             }  
30.         }  
31.         public void GoToNext()  
32.         {  
33.             if (index < coverList.Count - 1)  
34.                 UpdateIndex(index + 1);  
35.         }  
36.         public void GoToPrevious()  
37.         {  
38.             if (index > 0)  
39.                 UpdateIndex(index - 1);  
40.         }  
41.     }  
42. }  

using[...]
namespace Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent
{
    public partial class FlowControl : UserControl
    {
        #region Fields
        private int index;
        private readonly List<Cover> coverList = new List<Cover>();
        #endregion
        #region Private stuff
        private void RotateCover(int pos)[...]
        private void UpdateIndex(int newIndex)[...]
        private void viewPort_MouseDown(object sender, MouseButtonEventArgs e)[...]
        #endregion
        public FlowControl()
        {
            InitializeComponent();
        }
        public void Load(string imagePath)
        {
            coverList.Clear();
            var imageDir = new DirectoryInfo(imagePath);
            int doneImages = 0;
            foreach (FileInfo image in imageDir.GetFiles("*.jpg"))
            {
                var cover = new Cover(image.FullName, doneImages++);
                coverList.Add(cover);
                visualModel.Children.Add(cover);
            }
        }
        public void GoToNext()
        {
            if (index < coverList.Count - 1)
                UpdateIndex(index + 1);
        }
        public void GoToPrevious()
        {
            if (index > 0)
                UpdateIndex(index - 1);
        }
    }
}

The code from the TestWindow constructor is included in a new method called Load. It will build covers with the images from one directory. We also provide two new methods GoToNext and GoToPrevious to navigate between covers.

This is the same in the xaml code : we migrate the Grid (its background) and the Viewport3D to our custom UserControl :

view plainprint?

1. <UserControl x:Class="Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent.FlowControl"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Height="282" Width="490">  
5.   <Grid ClipToBounds="True">  
6.     <Grid.Background[...]>  
7.     <Viewport3D x:Name="viewPort" Grid.Column="0" Grid.Row="0" ClipToBounds="False" MouseDown="viewPort_MouseDown">  
8.       <Viewport3D.Camera[...]>  
9.       <Viewport3D.Children[...]>  
10.     </Viewport3D>  
11.   </Grid>  
12. </UserControl>  

<UserControl x:Class="Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent.FlowControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="282" Width="490">
  <Grid ClipToBounds="True">
    <Grid.Background[...]>
    <Viewport3D x:Name="viewPort" Grid.Column="0" Grid.Row="0" ClipToBounds="False" MouseDown="viewPort_MouseDown">
      <Viewport3D.Camera[...]>
      <Viewport3D.Children[...]>
    </Viewport3D>
  </Grid>
</UserControl>

We can set the size we want. It will be overriden in the owner component. We set the ClipToBounds property to True to avoid covers from exceeding the bounds of our component.

The Cover class is also moved to the FlowComponent assembly.

As we are creating a CoverFlow component, it is a good idea to deal with rectangle images. We update the Point3D coordinates with the ImageSource size. The ImageSource will be stored as a class attribute.

view plainprint?

1. private readonly ImageSource imageSource;  
2. private double RectangleDx()  
3. {  
4.     if (imageSource.Width > imageSource.Height)  
5.         return 0;  
6.     else  
7.         return 1 - imageSource.Width / imageSource.Height;  
8. }  
9. private double RectangleDy()  
10. {  
11.     if (imageSource.Width > imageSource.Height)  
12.         return 1 - imageSource.Height / imageSource.Width;  
13.     else  
14.         return 0;  
15. }  
16. private Geometry3D Tessellate()  
17. {  
18.     double dx = RectangleDx();  
19.     double dy = RectangleDy();  
20.     var p0 = new Point3D(-1 + dx, -1 + dy, 0);  
21.     var p1 = new Point3D(1 - dx, -1 + dy, 0);  
22.     var p2 = new Point3D(1 - dx, 1 - dy, 0);  
23.     var p3 = new Point3D(-1 + dx, 1 - dy, 0);  
24.     ...  
25. }  
26. private Geometry3D TessellateMirror()  
27. {  
28.     double dx = RectangleDx();  
29.     double dy = RectangleDy();  
30.     var p0 = new Point3D(-1 + dx, -3 + 3 * dy, 0);  
31.     var p1 = new Point3D(1 - dx, -3 + 3 * dy, 0);  
32.     var p2 = new Point3D(1 - dx, -1 + dy, 0);  
33.     var p3 = new Point3D(-1 + dx, -1 + dy, 0);  
34.     ...  
35. }  
36. public Cover(string imagePath, int pos)  
37. {  
38.     ...  
39.     imageSource = LoadImageSource(imagePath);  
40.     ...  
41. }  

private readonly ImageSource imageSource;
private double RectangleDx()
{
    if (imageSource.Width > imageSource.Height)
        return 0;
    else
        return 1 - imageSource.Width / imageSource.Height;
}
private double RectangleDy()
{
    if (imageSource.Width > imageSource.Height)
        return 1 - imageSource.Height / imageSource.Width;
    else
        return 0;
}
private Geometry3D Tessellate()
{
    double dx = RectangleDx();
    double dy = RectangleDy();
    var p0 = new Point3D(-1 + dx, -1 + dy, 0);
    var p1 = new Point3D(1 - dx, -1 + dy, 0);
    var p2 = new Point3D(1 - dx, 1 - dy, 0);
    var p3 = new Point3D(-1 + dx, 1 - dy, 0);
    ...
}
private Geometry3D TessellateMirror()
{
    double dx = RectangleDx();
    double dy = RectangleDy();
    var p0 = new Point3D(-1 + dx, -3 + 3 * dy, 0);
    var p1 = new Point3D(1 - dx, -3 + 3 * dy, 0);
    var p2 = new Point3D(1 - dx, -1 + dy, 0);
    var p3 = new Point3D(-1 + dx, -1 + dy, 0);
    ...
}
public Cover(string imagePath, int pos)
{
    ...
    imageSource = LoadImageSource(imagePath);
    ...
}

With this new improvement, it is possible to use the component to browse photos :
There is nothing much left in the TestWindow class. In the xaml code, after we've referenced our component assembly, we just use our FlowControl as main Content :

view plainprint?

1. <Window x:Class="Ded.Tutorial.Wpf.CoverFlow.Part5.TestWindow"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="WPF Coverflow" Width="512" Height="320" KeyDown="Window_KeyDown"  
5.     xmlns:flow="clr-namespace:Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent;assembly=Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent">  
6.   <flow:FlowControl x:Name="flow" Margin="0"></flow:FlowControl>  
7. </Window>  

<Window x:Class="Ded.Tutorial.Wpf.CoverFlow.Part5.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Coverflow" Width="512" Height="320" KeyDown="Window_KeyDown"
    xmlns:flow="clr-namespace:Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent;assembly=Ded.Tutorial.Wpf.CoverFlow.Part5.FlowComponent">
  <flow:FlowControl x:Name="flow" Margin="0"></flow:FlowControl>
</Window>

In the C# code, we just keep the Window_KeyDown method and the constructor :

view plainprint?

1. using System.Windows;  
2. using System.Windows.Input;  
3. namespace Ded.Tutorial.Wpf.CoverFlow.Part5  
4. {  
5.     public partial class TestWindow : Window  
6.     {  
7.         #region Private stuff  
8.         private void Window_KeyDown(object sender, KeyEventArgs e)  
9.         {  
10.             switch (e.Key)  
11.             {  
12.                 case Key.Right:  
13.                     flow.GoToNext();  
14.                     break;  
15.                 case Key.Left:  
16.                     flow.GoToPrevious();  
17.                     break;  
18.             }  
19.         }  
20.         #endregion  
21.         public TestWindow()  
22.         {  
23.             InitializeComponent();  
24.             flow.Load(@"c:\_covers");  
25.         }  
26.     }  
27. }  

using System.Windows;
using System.Windows.Input;
namespace Ded.Tutorial.Wpf.CoverFlow.Part5
{
    public partial class TestWindow : Window
    {
        #region Private stuff
        private void Window_KeyDown(object sender, KeyEventArgs e)
        {
            switch (e.Key)
            {
                case Key.Right:
                    flow.GoToNext();
                    break;
                case Key.Left:
                    flow.GoToPrevious();
                    break;
            }
        }
        #endregion
        public TestWindow()
        {
            InitializeComponent();
            flow.Load(@"c:\_covers");
        }
    }
}

That's it ! We've built a CoverFlow component reusable in other WPF applications. But this component needs improvements. We will add virtualization in the next part...
Continue with Part 6.
Edit 2014-02-23 : Code has moved to github.