Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Creating Music Video Box Using Windows Presentation Foundation(WPF)

By BalaMurali Balaji
Posted On Sep 01,2009
Article Rating:
Average Rating: 5
No of Ratings: 1
No of Comments: 5
Category: WPF
Print this article.

Creating Music Video Box Using Windows Presentation Foundation(WPF)


This article explains the creation of a Music Video Box using Windows Presentation Foundation 3D Geometry and Media classes to play music albums as chosen by the user.




This Music Video Box is designed in a way that it stores music tracks of three different albums and user can select an album and the track he wants to play. While the list of albums appears on the left side panel, the tracks for each album are represented as pictures on the sides of a 3D cube that rotates for easier selection of the track the user prefers to.

Initially, the screen looks like this:


Playing Music Video in WPF


The epicentre of this application is the 3D cube that displays pictures of the tracks of the current album and it rotates in clockwise direction.


Upon selection of an album (e.g.: Hindu Devotional), the cube takes a different look with pictures representing the tracks in the album as below.


Playing Music Video in WPF


Upon clicking the picture, another window opens up that plays the corresponding video for you as below.


Playing Music Video in WPF


WPF – 3D Geometry and Material


The sides of the cubes are created separately using the MeshGeometry3D class that builds a 3D shape. It allows us to specify position, normal, and texture coordinate information.



<MeshGeometry3D x:Key="CubeSide01"

      TriangleIndices="0,1,2 3,4,5"

      Normals="-1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 "

      TextureCoordinates="0,1 0,0 1,0 1,0 1,1 0,1 "

      Positions="-0.5,0.5,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5 " />



The sides of the cube compose of a Material, DiffuseMaterial in this case that allows the application of a 2-D brush, like a SolidColorBrush or TileBrush, to a diffusely-lit 3-D model. For the album selected in the list, this Material is applied on the sides dynamically, ImageBrush for the albums(Devotional and Taare Zameen Par) that contains video tracks and LinearGradientBrush for no selection or album(Pop/Rock) that has only one video.



<MaterialGroup x:Key="TaareMaterial1">



                <ImageBrush Stretch="Fill" ImageSource="images\Taare\Taare1.jpg" TileMode="None" ViewportUnits="Absolute" Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />






Both the Geometry and Material specifics are coded as Application Resources in app.xaml.


XAML for 3D Graphics



<Viewport3D  MouseDown="myViewport_MouseDown" ClipToBounds="True" Width="600" Height="400" Name="myViewport" Focusable="True" >


           <PerspectiveCamera x:Name="myPerspectiveCamera"

            FarPlaneDistance="15" LookDirection="0,0,1" UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,-3" FieldOfView="50" />


      <ModelVisual3D x:Name="topModelVisual3D">






      <ModelVisual3D x:Name="side1ModelVisual">


                   <GeometryModel3D x:Name="side1GeometryModel3D" Geometry="{StaticResource CubeSide01}" Material="{StaticResource InitMaterial1}" BackMaterial="{StaticResource InsideMaterial}"/>








The HitTest is the action that is taken when the user clicks on a side of the 3D cube. This is implemented in the ChooseTrack method wherein the mouseposition parameters are retrieved from the MouseButtonEventArgs and test for a result in the ViewPort3D.



public void ChooseTrack(object sender, System.Windows.Input.MouseButtonEventArgs args)


    if (listboxAlbum.SelectedIndex <= 0)


    Point mouseposition = args.GetPosition(myViewport);

    PointHitTestParameters pointparams = new PointHitTestParameters(mouseposition);


   //test for a result in the Viewport3D

   VisualTreeHelper.HitTest(myViewport, null, HTResult, pointparams);



The HitTest method takes the ViewPort object as parameter along with a callback method HTResult and the position parameters. It is in the callback method HTResult, we use the RayMeshGeometry3DHitTestResult object and calls the ModelHit to get the GeometryModel3D object for the 3Dimensional shape where the user hit the mouse.



public HitTestResultBehavior HTResult(System.Windows.Media.HitTestResult rawresult)


      RayHitTestResult rayResult = rawresult as RayHitTestResult;

      if (rayResult != null)


          RayMeshGeometry3DHitTestResult rayMeshResult = rayResult as RayMeshGeometry3DHitTestResult;

          if (rayMeshResult != null)


              GeometryModel3D hitgeo = rayMeshResult.ModelHit as GeometryModel3D;






      return HitTestResultBehavior.Stop;




There are two helper methods SetTrack to select the track and PlayTrack to open the mediaElement in a window to play the video. In the SetTrack method, MusicPlayer instance is created and the properties CurrentAlbum and CurrentTrackPath are set by calling the FindAlbum and FindTrack methods respectively.



public void SetTrack(GeometryModel3D hitgeo)


  mplayer = new MusicPlayer();

  mplayer.currentAlbum = AvailTracks.FindAlbum(listboxAlbum.SelectedIndex - 1);

  // For pop/rock, only one video is placed. On clicking any picture on any of the 6 sides, the same video plays.

  if (listboxAlbum.SelectedIndex == 2)


    mplayer.currtrapath = AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 0);



  if (hitgeo.Geometry==MeshGeometry3D)Application.Current.Resources["CubeSide01"])


     mplayer.currtrapath =AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 0);


  else if    (hitgeo.Geometry==(MeshGeometry3D)Application.Current.Resources["CubeSide02"])


    mplayer.currtrapath =AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 1);


  else if (hitgeo.Geometry == (MeshGeometry3D)Application.Current.Resources["CubeSide03"])


    mplayer.currtrapath = AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 2);


  else if (hitgeo.Geometry == (MeshGeometry3D)Application.Current.Resources["CubeSide04"])


    mplayer.currtrapath = AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 3);


  else if (hitgeo.Geometry == (MeshGeometry3D)Application.Current.Resources["CubeSide05"])


    mplayer.currtrapath = AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 4);


  else if (hitgeo.Geometry == (MeshGeometry3D)Application.Current.Resources["CubeSide06"])


    mplayer.currtrapath = AvailTracks.FindTrack(listboxAlbum.SelectedIndex - 1, 5);




In the PlayTrack method, the MusicPlayer is shown as dialog as coded below.


public void PlayTrack()






On selecting an album, the pictures of the sides of the cube changes and the method SetMaterial is used for this purpose. For example, calling this method as below




would apply the corresponding material resource defined in App.xaml for each side of the cube.



  public void setSideMaterial(string materialKey)


        side1GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"1"];

        side2GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"2"];

         side3GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"3"];

         side4GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"4"];

         side5GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"5"];

         side6GeometryModel3D.Material = (MaterialGroup) Application.Current.Resources[materialKey+"6"];




Music Video Box’s Album class


The Music Videos supplied along with this application are stored in a sub-folder inside the application folder. The names of the video files are retrieved and are stored in the instances of the AlbumCollection class. The AlbumCollection class is a generic class of type Album that contains two properties namely AlbumName and TrackPath, an array of strings.



   public static class AlbumList


        public static AlbumCollection CreateAlbums()


            string[] Devotelist = System.IO.Directory.GetFiles(@"e:\bala\music video box\tracks\devotional", "*.wmv");

            string[] PopRocklist = System.IO.Directory.GetFiles(@"e:\bala\music video box\tracks\poprock", "*.wmv");

            string[] Taarelist = System.IO.Directory.GetFiles(@"e:\bala\music video box\tracks\taaree", "*.wmv");

            AlbumCollection ac = new AlbumCollection();

            ac.Add(new Album("Devotional", Devotelist));

            ac.Add(new Album("Pop/Rock", PopRocklist));

            ac.Add(new Album("Taare Zameen Par", Taarelist));

            return ac;




Download Source 



The Music Video Box with three albums is created using WPF’s 3D technologies. Readers may download the zip file that comes along with this article. Instructions to run the application are also mentioned in this article



Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
Walking in the prens
Walking in the prensece of giants here. Cool thinking all around! [url=]zqfmjmkwf[/url] [link=]exvyjwgze[/link]
Hats off to <a href=
Hats off to <a href="">whevoer</a> wrote this up and posted it.
I found just what I
I found just what I was needed, and it was eniteratning! [url=]qnxmjtdqws[/url] [link=]rqrwrg[/link]
Super <a href="http:
Super <a href="">exiectd</a> to see more of this kind of stuff online.
Reading posts like t
Reading posts like this make surfing such a pluresae