August 2009 - Posts

Perspective camera animation on a cube in WPF 3D

I have started WPF 3D at my work. Actually, i wanted to make roll animation effect using WPF 3D. After some R&D, I came up with roll animation using 2D animation, which I described in my previous blog post. At first, I tried to make roll animation using perspective camera rotation. For that, I have made a sample program, which I am discussing in this blog post. In this sample program, a 3D cube rotates along the y-axis. The animation looks like the following:

To rotate a 3D figure, you have to change the projection point. As camera is used for projection in WPF 3D, here a camera is being moved around the 3D figure to achieve rotate animation in y-direction.

How are images painted on cube surface?

You can make an image brush for any image and a visual brush from any visual. We have no special brushes for 3D graphics and we have to use two-dimensional brushes to paint the surfaces of three-dimensional figures. Material is created from brush. Texture coordinates are used to map which part of the material shows up on which part of the surfaces of three-dimensional figures.

Each GeometryModel3D consists of one MeshGeometry3D and one object of type Material, so we can use only one brush for one MeshGeometry3D figure. To use different brushes for different faces of cube, i have splited the figure into multiple GeometryModel3D objects.

The used c# code for this animation is in the following

public partial class Window1 : Window

  {

      DispatcherTimer _timer = null;

      PerspectiveCamera _perspectiveCamera = null;

      double _angle = 0;        

  

      public Window1()

      {

          this.InitializeComponent();

          this.Loaded += new RoutedEventHandler(Window1_Loaded);

      }

  

      void Window1_Loaded(object sender, RoutedEventArgs e)

      {

          GenerateViewPort();

      }       

  

      private void GenerateViewPort()

      {

          MakeCamera();

  

          Viewport3D Viewport3D1 = new Viewport3D();

          Viewport3D1.Camera = _perspectiveCamera;

          grdAniContainer.Children.Add(Viewport3D1);

          Viewport3D1.Loaded += new RoutedEventHandler(Viewport3D1_Loaded);

  

          ModelVisual3D ModelVisual3D1 = new ModelVisual3D();

          Viewport3D1.Children.Add(ModelVisual3D1);

  

  

          Model3DGroup Model3DGroup1 = new Model3DGroup();

          ModelVisual3D1.Content = Model3DGroup1;

  

          AmbientLight AmbientLight1 = new AmbientLight();

          AmbientLight1.Color = Colors.Gray;

          Model3DGroup1.Children.Add(AmbientLight1);

  

          DirectionalLight DirectionalLight1 = new DirectionalLight();

          DirectionalLight1.Color = Colors.Gray;

          DirectionalLight1.Direction = ((Vector3D)new Vector3DConverter().ConvertFromString("-1,-3,-2"));

          Model3DGroup1.Children.Add(DirectionalLight1);

  

          DirectionalLight1 = new DirectionalLight();

          DirectionalLight1.Color = Colors.Gray;

          DirectionalLight1.Direction = ((Vector3D)new Vector3DConverter().ConvertFromString("1,-2,3"));

          Model3DGroup1.Children.Add(DirectionalLight1);

  

          Model3DGroup Model3DGroup2 = new Model3DGroup();

          Model3DGroup1.Children.Add(Model3DGroup2);

  

          GeometryModel3D GeometryModel3D1 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D1);

  

  

          MeshGeometry3D MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("-1,-1,-1 1,-1,-1 1,-1,1 -1,-1,1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D1.Geometry = MeshGeometry3D1;

  

         

          DiffuseMaterial DiffuseMaterial1 = new DiffuseMaterial();

          GeometryModel3D1.Material = DiffuseMaterial1;

  

  

          ImageBrush ImageBrush1 = new ImageBrush();

          ImageBrush1.ImageSource = loadBitmap(Fun.Resource1.DSC06460);

          DiffuseMaterial1.Brush = ImageBrush1;

  

          GeometryModel3D GeometryModel3D2 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D2);

  

  

          MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("1,1,1 1,1,-1 -1,1,-1 -1,1,1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D2.Geometry = MeshGeometry3D1;

  

  

          DiffuseMaterial DiffuseMaterial2 = new DiffuseMaterial();

          GeometryModel3D2.Material = DiffuseMaterial2;

  

  

          ImageBrush1 = new ImageBrush();

          ImageBrush1.ImageSource = loadBitmap(Fun.Resource1.DSC06461);

          DiffuseMaterial2.Brush = ImageBrush1;

  

          GeometryModel3D GeometryModel3D3 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D3);

  

  

          MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("-1,1,-1 -1,-1,-1 -1,-1,1 -1,1,1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D3.Geometry = MeshGeometry3D1;

  

  

          DiffuseMaterial DiffuseMaterial3 = new DiffuseMaterial();

          GeometryModel3D3.Material = DiffuseMaterial3;

  

  

          ImageBrush1 = new ImageBrush();

          ImageBrush1.ImageSource = loadBitmap(Fun.Resource1.DSC06462);

          DiffuseMaterial3.Brush = ImageBrush1;

  

          GeometryModel3D GeometryModel3D4 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D4);

  

  

          MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("1,1,1 1,-1,1 1,-1,-1 1,1,-1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D4.Geometry = MeshGeometry3D1;

  

  

          DiffuseMaterial DiffuseMaterial4 = new DiffuseMaterial();

          GeometryModel3D4.Material = DiffuseMaterial4;

  

  

          ImageBrush1 = new ImageBrush();

          ImageBrush1.ImageSource = loadBitmap(Fun.Resource1.DSC06463);

          DiffuseMaterial4.Brush = ImageBrush1;

  

          GeometryModel3D GeometryModel3D5 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D5);

  

  

          MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D5.Geometry = MeshGeometry3D1;

  

  

          DiffuseMaterial DiffuseMaterial5 = new DiffuseMaterial();

          GeometryModel3D5.Material = DiffuseMaterial5;

  

  

          ImageBrush1 = new ImageBrush();

          ImageBrush1.ImageSource = loadBitmap(Fun.Resource1.DSC06460);

          DiffuseMaterial5.Brush = ImageBrush1;

  

          GeometryModel3D GeometryModel3D6 = new GeometryModel3D();

          Model3DGroup2.Children.Add(GeometryModel3D6);

  

  

          MeshGeometry3D1 = new MeshGeometry3D();

          MeshGeometry3D1.Positions = ((Point3DCollection)new Point3DCollectionConverter().ConvertFromString("-1,1,1 -1,-1,1 1,-1,1 1,1,1"));

          MeshGeometry3D1.TriangleIndices = ((Int32Collection)new Int32CollectionConverter().ConvertFromString("0,1,2 0,2,3"));

          MeshGeometry3D1.TextureCoordinates = ((PointCollection)new PointCollectionConverter().ConvertFromString("0,0 0,1 1,1 1,0"));

          GeometryModel3D6.Geometry = MeshGeometry3D1;

  

          DiffuseMaterial DiffuseMaterial6 = new DiffuseMaterial();

          GeometryModel3D6.Material = DiffuseMaterial6;           

  

          VisualBrush VisualBrush1 = new VisualBrush();

          DiffuseMaterial6.Brush = VisualBrush1;

          Label Label1 = new Label();

          Label1.Content = "Razan";

          Label1.Foreground = new SolidColorBrush(Colors.Orchid);

          Label1.Background = GetRectangleDrawingBrush();

          VisualBrush1.Visual = Label1;            

      }

  

      private void MakeCamera()

      {

          Transform3DGroup transform3DGroup = new Transform3DGroup();

          RotateTransform3D rotateTransform3D_1 = new RotateTransform3D();

          AxisAngleRotation3D axisAngleRotation3D_1 = new AxisAngleRotation3D(new Vector3D(0, 1, 0), 0);

  

  

          transform3DGroup.Children.Add(rotateTransform3D_1);

  

  

          _perspectiveCamera = new PerspectiveCamera();

          _perspectiveCamera.Position = new Point3D(0, 0, 5);

          _perspectiveCamera.LookDirection = new Vector3D(0, 0, -5);

          _perspectiveCamera.UpDirection = new Vector3D(0, 1, 0);

          _perspectiveCamera.FieldOfView = 45;

          _perspectiveCamera.Transform = transform3DGroup;

      }

      private DrawingBrush GetRectangleDrawingBrush()

      {         

  

          DrawingBrush DrawingBrush1 = new DrawingBrush();

          DrawingBrush1.Viewport = ((Rect)new RectConverter().ConvertFromString("0,0,0.25,0.25"));

          DrawingBrush1.TileMode = TileMode.Tile;

           

  

          DrawingGroup DrawingGroup1 = new DrawingGroup();

          DrawingBrush1.Drawing = DrawingGroup1;

  

          GeometryDrawing GeometryDrawing1 = new GeometryDrawing();

          GeometryDrawing1.Brush = ((Brush)new BrushConverter().ConvertFromString("White"));

          DrawingGroup1.Children.Add(GeometryDrawing1);

  

  

          RectangleGeometry RectangleGeometry1 = new RectangleGeometry();

          RectangleGeometry1.Rect = ((Rect)new RectConverter().ConvertFromString("0,0,100,100"));

          GeometryDrawing1.Geometry = RectangleGeometry1;

  

          GeometryDrawing GeometryDrawing2 = new GeometryDrawing();

          DrawingGroup1.Children.Add(GeometryDrawing2);

  

  

          GeometryGroup GeometryGroup1 = new GeometryGroup();

          GeometryDrawing2.Geometry = GeometryGroup1;

  

          RectangleGeometry1 = new RectangleGeometry();

          RectangleGeometry1.Rect = ((Rect)new RectConverter().ConvertFromString("0,0,50,50"));

          GeometryGroup1.Children.Add(RectangleGeometry1);

  

          RectangleGeometry1 = new RectangleGeometry();

          RectangleGeometry1.Rect = ((Rect)new RectConverter().ConvertFromString("50,50,50,50"));

          GeometryGroup1.Children.Add(RectangleGeometry1);

  

  

          LinearGradientBrush LinearGradientBrush1 = new LinearGradientBrush();

          GeometryDrawing2.Brush = LinearGradientBrush1;

  

          GradientStop GradientStop1 = new GradientStop();

          GradientStop1.Offset = 0.0;

          GradientStop1.Color = Colors.Black; 

          LinearGradientBrush1.GradientStops.Add(GradientStop1);

  

          GradientStop1 = new GradientStop();

          GradientStop1.Offset = 1.0;

          GradientStop1.Color = Colors.Gray; 

          LinearGradientBrush1.GradientStops.Add(GradientStop1);

  

          return DrawingBrush1;

  

      }

  

  

      void Viewport3D1_Loaded(object sender, RoutedEventArgs e)

      {

          _timer = new DispatcherTimer();

          _timer.Interval = TimeSpan.FromSeconds(.25);

          _timer.Tick += new EventHandler(_timer_Tick);

          _timer.IsEnabled = true;

      }

      

      void _timer_Tick(object sender, EventArgs e)

      {

          Transform3DGroup transform3DGroup = new Transform3DGroup();

          RotateTransform3D rotateTransform3D_1 = new RotateTransform3D();

          AxisAngleRotation3D axisAngleRotation3D_1 = new AxisAngleRotation3D(new Vector3D(0, 1, 0), _angle );

          rotateTransform3D_1.Rotation = axisAngleRotation3D_1;          

          transform3DGroup.Children.Add(rotateTransform3D_1);             

          _perspectiveCamera.Transform = transform3DGroup;

          _angle = _angle + 2;

      }

      public static BitmapSource loadBitmap(System.Drawing.Bitmap source)

      {

          return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(source.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty,

              System.Windows.Media.Imaging.BitmapSizeOptions.FromEmptyOptions());

      }

  }

How is this animation achieved?

Here we have used perspective camera for projection. To make this animation, I have rotated perspective camera in y direction. As we know second point of vector 3D indicates y coordinate. So AxisAngleRotation3D(new Vector3D(0, 1, 0), _angle ) directs to rotate the 3D object(here cube) to rotate _angle degree in y-axis. Here at each tick event, we have incremented the value of _angle, so it rotates in y direction. If you would like to rotate in x direction you can use AxisAngleRotation3D(new Vector3D(1, 0, 0), _angle ), then it will rotate in x-direction. Here visual brush is used to paint label UIelement, which contains "Razan".

The used XAML for this is in the following:

<Window

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="Fun.Window1"

    x:Name="Window"

    Title="Fun"

    Height="400" Width="400">

    <Grid Name="grdAniContainer"></Grid>

</Window>

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-20-2009 8:53 PM by Razan | with no comments

Filed under: WPF, c#, Animation, XAML, Visual Studio 2008, 3D

Creating a Roll animation effect in WPF

I know one picture can tell what the Roll animation looks like instead of writing many sentences. The animation looks like the following:

Opacity masks allow us to make portions of a UIelement or visual either transparent or partially transparent. To apply opacity mask, we can assign a brush to the Opacity Mask property of an element or Visual to provide a mask to the opacity. There is a variety of brushes in WPF: Solid Color Brush, Image Brush, Linear Gradient Brush, and Visual Brush. You can apply any of them you want. The regions, which are not covered by the mask, will remain transparent. The Alpha value of ARGB is used to specify the opacity of the color. An alpha value of 00 indicates completely transparent color and an alpha value of FF indicates fully opaque

How can we give an image 3D look in WPF?

We have used transparent Gradient Stop to give the image 3D look. We have made a Linear Gradient Brush with some gradient stops where centre, top, and bottom are transparent. Then we set the LinearGradientBrush as the opacity mask of Image.

How can we reverse the image?

To reverse the image here i have used scale transform. As we want to reverse the image in y Direction so the scale value for y-axis is -1 and scale value for x-axis is 1.

The used c# code for Roll animation is in the following

public partial class Window1 : Window

   {

       DispatcherTimer _timer = null;

       double _rollTopLeft = 0;

       double _imageWidth = 400;

       double _imageHeight = 300;

       double _offset = 3;

       double _3DSize = 50;

       public Window1()

       {

           InitializeComponent();

           this.Loaded += new RoutedEventHandler(Window1_Loaded);

       }

       void Window1_Loaded(object sender, RoutedEventArgs e)

       {      

           LinearGradientBrush maskBrush = new LinearGradientBrush();

           maskBrush.StartPoint = new Point(0, 0);

           maskBrush.EndPoint = new Point(0, 1);

  

           GradientStop BlackStop1 = new GradientStop(Color.FromArgb(30, 255, 255, 255), 0.0);

           GradientStop BlackStop3 = new GradientStop(Colors.Black, 0.0);

           GradientStop BlackStop4 = new GradientStop(Colors.Black, .9);

           GradientStop transparentStop = new GradientStop(Color.FromArgb(175, 255, 255, 255), .5);

           GradientStop BlackStop2 = new GradientStop(Color.FromArgb(100, 255, 255, 255), 1);

  

           maskBrush.GradientStops.Add(BlackStop1);

           maskBrush.GradientStops.Add(transparentStop);

           maskBrush.GradientStops.Add(BlackStop2);

           maskBrush.GradientStops.Add(BlackStop3);

           maskBrush.GradientStops.Add(BlackStop4);

  

           CanAni.OpacityMask = maskBrush;

         

           _timer = new DispatcherTimer();

           _timer.Interval = TimeSpan.FromSeconds(.1);

           _timer.Tick += new EventHandler(_timer_Tick);

           _timer.IsEnabled = true;

       }

  

       void _timer_Tick(object sender, EventArgs e)

       {

           Image im = new Image();

           im.Width = _imageWidth;

           im.Height = _imageHeight;

           im.Source = loadBitmap(RollAnimation.Properties.Resources.bedrijven3);    

           ScaleTransform scaleTransform = new ScaleTransform(1, -1, 0, 0);

           im.LayoutTransform = scaleTransform;

  

           _rollTopLeft = _rollTopLeft + _offset;

           image.Source = loadBitmap(RollAnimation.Properties.Resources.bedrijven3);

           image.Clip = new RectangleGeometry(new Rect(0, 0, _imageWidth, _rollTopLeft));

  

           double yPosition = _rollTopLeft + _3DSize;

           double height = _3DSize;

           if (Math.Abs((_imageHeight - _rollTopLeft)) < _3DSize)

           {

               height = Math.Abs(image.Height - _rollTopLeft);

               CanAni.Height = height;

               CanWrap.Height = height;

               yPosition = _rollTopLeft;

               Linetwo.Y1 = height;

               Linetwo.Y2 = height;

           }

           Lineone.Visibility = Visibility.Visible;

           Linetwo.Visibility = Visibility.Visible;

           if (_imageHeight == _rollTopLeft)

           {

               _timer.IsEnabled = false;

               Lineone.Visibility = Visibility.Collapsed;

               Linetwo.Visibility = Visibility.Collapsed;

           }

           im.Clip = new RectangleGeometry(new Rect(0, yPosition, _imageWidth, height));

           VisualBrush vb = new VisualBrush(im as Visual);

           CanAni.Background = vb;

           Canvas.SetTop(CanWrap, _rollTopLeft);

       }

       public static BitmapSource loadBitmap(System.Drawing.Bitmap source)

       {

           return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(source.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty,

               System.Windows.Media.Imaging.BitmapSizeOptions.FromEmptyOptions());

       }

   }

Here four canvases are used here. The outer canvas is the main container for this application. The second canvas is used to wrap necessary UIelements to achieve this animation. The third canvas is used to make transparent portions while the fourth canvas is used to achieve 3D look. I have set an image background to the fourth canvas clipping certain portion of the image. To make this canvas moving, I am changing the top position of the canvas continuously.

This trick is applicable to any UIelement type. Here I have taken image as the UIelement type to implement the Roll animation. I have calculated the height and width of the image and started animation from (0,0) point. Every WPF UIelement type has a clip property and you can set any geometry object to clip. However, for this animation, we have used Rectangle geometry as clip geometry.

As I am changing the brush of animated canvas at runtime, property based animation does not work here. For that reason, I have used dispatcher timer based animation. I am using here dispatcher timer instead of classic Timer as dispatcher timer runs in UI thread and I do not need to write thread switching code

The used XAML for this is in the following

<Window x:Class="RollAnimation.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Roll Animation" Height="600" Width="600">

    <Canvas  x:Name="CanOuter" Height="300" Width="400">

        <Image  Canvas.Left="0" Canvas.Top="0"  Height="300" Width="400" Stretch="Fill"  Name="image" />

        <Canvas Canvas.Left="0" x:Name="CanWrap" Canvas.Top="0" Background="White" Margin="0,0" Height="50" Width="400"  >

            <Canvas x:Name="CanAni"   Height="50" Width="400"  >

                <Line  Visibility="Collapsed"  X1="01" Y1="00" Name="Lineone" X2="400" Y2="0" Stroke="Black"    StrokeThickness="1">

                    <Line.BitmapEffect>

                        <BlurBitmapEffect Radius="1" KernelType="Box" />

                    </Line.BitmapEffect>

                </Line>

                <Line Visibility="Collapsed" X1="00" Y1="50" X2="400" Y2="50" Name="Linetwo" Stroke="Black" StrokeThickness="1">

                    <Line.BitmapEffect>

                        <BlurBitmapEffect Radius="1" KernelType="Box" />

                    </Line.BitmapEffect>

                </Line>

            </Canvas>

        </Canvas>

    </Canvas>

</Window>

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-18-2009 7:29 PM by Razan | with no comments

Filed under: WPF, c#, Animation, XAML, Visual Studio 2008

Wheel Clockwise animation in WPF

This animation is like the Wheel Clockwise, 1 spoke, animation of MS power point. Some people also call this animation as Radial animation. This animation starts from a line, which points from the centre to top middle, and then it rotates 360 degrees in clockwise direction and makes the underlying object visible. I know one picture can tell what is the animation looks like instead of writing many sentences. The animation looks like the following:

How this animation effect is achieved?

As we know, every WPF UIelement type has a clip property and you can set any geometry object to clip. I have used this clip property to make this animation. I have changed the geometry object with time so that it looks like a wheel animation. All the challenges to make this animation in this way is making the exact geometry object with time.

I am showing this animation for Image type, which is a Uielement type. However, this trick is applicable to any UIelement type. PathGeometry is used here as the geometry to clip the image. Line segments are added to the path geometry dynamically to make the visible region bigger with time. I have calculated the height and width of the image. Then set the first line segment from (width/2, height/2) to (Width/2, 0). Then added the other line segments when they are needed and also change their points. For this animation, i have used DispatcherTimer, which runs in UI thread instead of worker thread. The code for this is in the following:

public partial class Window1 : Window

    {

        DispatcherTimer _timer = null;

        Ellipse _grdMain = null;

        ContentPresenter _circleContentPresenter = null;

        LineSegment LineSegment2 = null;

        PathFigure PathFigure1 = null;

        bool ISIncrementdirectionX = true;

        bool IsIncrementX = true;

        bool IsIncrementY = true;

        LineSegment LineSegmentFirstcorner = null;

        LineSegment LineSegmentseconcorner = null;

        LineSegment LineSegmentThirdcorner = null;

        LineSegment LineSegmentFourthcorner = null;

        double _ofsetOfAnimation = 2;

  

        double _height = 0;

        double _width = 0;

  

        public Window1()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(Window1_Loaded);

        }

  

        void Window1_Loaded(object sender, RoutedEventArgs e)

        {

  

            image.Source = loadBitmap(WheelClockwise.Properties.Resources.images1);

            _height = image.Height;

            _width = image.Width;

            string topCentre = Convert.ToString(_width / 2) + ",0";

            string centre = Convert.ToString(_width / 2) + "," + Convert.ToString(_height / 2);        

  

            PathGeometry PathGeometry1 = new PathGeometry();      

            PathFigure1 = new PathFigure();

            PathFigure1.StartPoint = ((Point)new PointConverter().ConvertFromString(centre));

            PathGeometry1.Figures.Add(PathFigure1);

            LineSegment LineSegmentdummy = new LineSegment();

            LineSegmentdummy.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegmentdummy);

            LineSegmentseconcorner = new LineSegment();

            LineSegmentseconcorner.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegmentseconcorner);

            LineSegmentThirdcorner = new LineSegment();

            LineSegmentThirdcorner.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegmentThirdcorner);

            LineSegmentFourthcorner = new LineSegment();

            LineSegmentFourthcorner.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegmentFourthcorner);

            LineSegmentFirstcorner = new LineSegment();

            LineSegmentFirstcorner.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegmentFirstcorner);

            LineSegment2 = new LineSegment();

            LineSegment2.Point = ((Point)new PointConverter().ConvertFromString(topCentre));

            PathFigure1.Segments.Add(LineSegment2);

            image.Clip = PathGeometry1;

            _timer = new DispatcherTimer();

            _timer.Interval = TimeSpan.FromSeconds(0.01);

            _timer.Tick += new EventHandler(_timer_Tick);

            _timer.IsEnabled = true;

  

        }

        public static BitmapSource loadBitmap(System.Drawing.Bitmap source)

        {

            return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(source.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty,

                System.Windows.Media.Imaging.BitmapSizeOptions.FromEmptyOptions());

        }

  

        void _timer_Tick(object sender, EventArgs e)

        {

            if ((LineSegment2.Point.X <= 0) && (LineSegment2.Point.Y <= 0))

            {

  

                LineSegmentFirstcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                ISIncrementdirectionX = true;

                IsIncrementX = true;

            }

            else if (((LineSegment2.Point.X >= _width) && (LineSegment2.Point.Y <= 0)))

            {

                LineSegmentseconcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentThirdcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentFourthcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentFirstcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                ISIncrementdirectionX = false;

                IsIncrementY = true;

            }

  

            else if ((LineSegment2.Point.X >= _width) && (LineSegment2.Point.Y >= _height))

            {

                LineSegmentThirdcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentFourthcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentFirstcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                ISIncrementdirectionX = true;

                IsIncrementX = false;

            }

  

            else if ((LineSegment2.Point.X <= 0) && (LineSegment2.Point.Y >= _height))

            {

                LineSegmentFourthcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                LineSegmentFirstcorner.Point = new Point(LineSegment2.Point.X, LineSegment2.Point.Y);

                ISIncrementdirectionX = false;

                IsIncrementY = false;

            }

  

            double x = 0, y = 0;

  

            if (ISIncrementdirectionX == true)

            {

                if (IsIncrementX)

                {

                    x = LineSegment2.Point.X + _ofsetOfAnimation;

                    y = LineSegment2.Point.Y;

                }

                else

                {

                    x = LineSegment2.Point.X - _ofsetOfAnimation;

                    y = LineSegment2.Point.Y;

                }

            }

            else

            {

                if (IsIncrementY)

                {

                    x = LineSegment2.Point.X;

                    y = LineSegment2.Point.Y + _ofsetOfAnimation;

                }

                else

                {

                    x = LineSegment2.Point.X;

                    y = LineSegment2.Point.Y - _ofsetOfAnimation;

                }

  

            }

  

            LineSegment2.Point = new Point(x, y);

            if ((LineSegment2.Point.X == _width / 2) && (LineSegment2.Point.Y == 0)) _timer.IsEnabled = false;

  

        }

    }

The used XAML for this is in the following

<Window x:Class="WheelClockwise.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="400" Width="400">

    <Canvas Name="canMain"  Background="White"    Height="300" Width="300"  >  

        <Image Height="300" Width="300" Stretch="Fill"    Name="image" />

    </Canvas>

</Window>

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-05-2009 8:55 PM by Razan | with no comments

Filed under: WPF, c#, Animation, XAML, Visual Studio 2008

How to pick numbers at random from a given set of numbers in c#

The Random class defined in the .NET Framework provides functionality to generate pseudo-random number. According to MSDN, the current implementation of the Random class is based on Donald E. Knuth's subtractive random number generator algorithm. The random number generation starts from a seed value. If the same seed is used repeatedly, the same series of numbers is generated. One way to produce different sequences is to make the seed value time-dependent, thereby producing a different series with each new instance of Random.

However, current implementation does not provide the following two functionalities.

Picking random numbers from a given set of numbers: For example, you want random number from the given set of numbers. You have a set of numbers like (2, 4, 13, and 21).You would like to pick one number at a time at random from the list.
Picking random numbers from a range of numbers with no repetition: Current implementation return random numbers within a range with some duplicate number. For example, you want random number from a range of numbers like (4 to 21). You would like to pick one number at a time at random from that range without any repetition or duplicate

However, these two requirements are easy to implement by using the Random class of the .NET Framework. I needed these two functionalities for one of my project, so I wrote a class to implement these two features. I think that this is a trivial work but I am posting it because it can save some of your time. To implement these two functionalities following class named RandomNumberFromAGivenSetOfNumbers is written.

        1: class RandomNumberFromAGivenSetOfNumbers

       2:    {

       3:        List<int> _setOfNumbers = new List<int>();

       4:  

       5:        public List<int> SetOfNumbers

       6:        {

       7:            get { return _setOfNumbers; }

       8:            set { _setOfNumbers = value; }

       9:        }

       Random _random = new Random();

  

       public RandomNumberFromAGivenSetOfNumbers()

       {

  

       }

       public RandomNumberFromAGivenSetOfNumbers(int min, int max)

       {

           for (int i = min; i <= max; i++)

           {

               _setOfNumbers.Add(i);

           }

       }

  

       public int Next()

       {

           if (_setOfNumbers.Count > 0)

           {

               int nextNumberIndex = _random.Next(_setOfNumbers.Count);

               int val = _setOfNumbers[nextNumberIndex];

               _setOfNumbers.RemoveAt(nextNumberIndex);

               return val;

           }

           return -1;

       }

   }

The used code for testing these two features is in the following

       1: static void Main(string[] args)

       2:        {

       3:            Console.WriteLine("Picking random numbers from a range of numbers with no repetition(Range is 0-24)");

       4:            Console.WriteLine();

       5:            RandomNumberFromAGivenSetOfNumbers rdm = new RandomNumberFromAGivenSetOfNumbers(0, 24);

       6:            string str = string.Empty;

       7:            for (int i = 0; i < 25; i++)

       8:            {

       9:                str += rdm.Next().ToString() + " ";

           }

           Console.WriteLine(str);

           Console.WriteLine();

           Console.WriteLine();

  

  

           Console.WriteLine("Picking   random numbers from a given set of numbers( 2, 4, 13, and 21)");

           Console.WriteLine();

           RandomNumberFromAGivenSetOfNumbers rdm1 = new RandomNumberFromAGivenSetOfNumbers();

           rdm1.SetOfNumbers.Add(2);

           rdm1.SetOfNumbers.Add(4);

           rdm1.SetOfNumbers.Add(13);

           rdm1.SetOfNumbers.Add(21);

           string str1 = string.Empty;

           for (int i = 0; i < 4; i++)

           {

               str1 += rdm1.Next().ToString() + " ";

           }

           Console.WriteLine(str1);

  

           Console.ReadLine();

       }

The output of the program is in the following:

You can download the sample code from here. This is a very trivial work, but I hope this will save some of your time.

Posted: 08-04-2009 8:40 PM by Razan | with no comments

Filed under: c#, Random

Creating marquee/scrolling text in WPF

A WPF marquee is a scrolling piece of text displayed either horizontally across or vertically down your container. Here i show you how to make a scrolling marquee using Canvas and TextBlock. I will show only left to right in code. However, you can achieve right to left or vertical marquee text just by changing some portion of code using the same technique.

The following three techniques are used to achieve marquee animation:

Negative Positioning in canvas: If we set negative value to any of the positioning property of Canvas: Left, Right, Top and Bottom for an UIelement , Canvas draws that Uielement outside of Canvas area.
ClipToBounds property of canvas: if you set the value of the ClipToBounds property to true, Canvas will clip its children when they go outside of Canvas.
Changing Position of Uielement continuously: By changing continuously any of the canvas positioning property Left, right, Top, Bottom we can get moving text.

How is Left to right marquee text implemented in this sample?

Here a canvas is used as the container of marquee text. To move the text outside of canvas negative Left property of canvas is used. However, if someone uses negative left property of canvas, it will go outside of its parent container but will still remain visible outside of the parent container. To make marquee text invisible outside of canvas CliptoBound property is used. Then using double animation left property of canvas for that element is being changed continuously to get moving text. The whole thing is done using the following code.

        1: void Window1_Loaded(object sender, RoutedEventArgs e)

       2: {

       3:     DoubleAnimation doubleAnimation = new DoubleAnimation();

       4:     doubleAnimation.From = -tbmarquee.ActualWidth;

       5:     doubleAnimation.To = canMain.ActualWidth;

       6:     doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

       7:     doubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:10"));

       8:     tbmarquee.BeginAnimation(Canvas.LeftProperty, doubleAnimation);

       9: }

For Left to right marquee: use Left Property of Canvas

For right to left marquee: use Right Property of Canvas

For upward marquee: use Bottom Property of Canvas

For Downward marquee: use Top Property of Canvas

The used XAML for this is in the following

       1: <Window x:Class="MarqueText.Window1"

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     Title="Window1" Height="500" Width="700" >

       5:     <Canvas Background="White" >

       6:         <Canvas Margin="50" Canvas.Left="150" Canvas.Top="100" ClipToBounds="True" Name="canMain" Background="Red"   Height="100" Width="300"  >

       7:             <TextBlock Margin="0,40" FontSize="25" Name="tbmarquee">Bangladesh</TextBlock>

       8:         </Canvas>

       9:     </Canvas>

      10: </Window>

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-02-2009 4:25 AM by Razan | with no comments

Filed under: WPF, c#, Animation, XAML, Visual Studio 2008

Making circle animation in WPF

This animation is like the circle animation of MS power point. You can set any geometry like ellipse geometry to define the visible region of a WPF UIelement type. To make it possible every WPF UIelement type has a clip property and you can set any geometry object to clip. However, for circle animation, we need circle geometry but WPF does not have built-in circle geometry.

How we can make circle geometry in WPF from ellipse Geometry?

An Ellipse Geometry is defined by a center point, an x-radius and a y-radius. As we know an ellipse geometry has two radius: radiousx and radiousy. If we keep the value of these two radiuses same, it will behave as circle. Just we will keep Radiousx = Radiousy all the time.

How this animation effect is achieved?

This trick is applicable to any UIelement type. Here I have taken image as the Uielement type to implement the circle animation. I have calculated the height and width of the image. Then set the centre of circle as (width/2, height/2) to start the animation from centre point. At first we keep the radius of the circle is 0. Then increment the radius proportion to time. For animation, we use double animation. Next thing is how much we will increase the radius. I have just compared the height and width of UIelement and set the radious equal to bigger one divided by two.

        1: EllipseGeometry ellipseGeometry = new EllipseGeometry();     

       2: ellipseGeometry.RadiusX = 0;

       3: ellipseGeometry.RadiusY = 0;

       4: double centrex = image.Source.Width / 2;

       5: double centrey = image.Source.Height / 2;

       6: ellipseGeometry.Center = new Point(centrex, centrey);

       7:  

       8: image.Clip = ellipseGeometry; //The most important line

       9:  

      10: if (image.Source.Width > image.Source.Height)

      11:    animationLength = image.Source.Width / 2;

      12: else

      13:    animationLength = image.Source.Height / 2;

      14: DoubleAnimation a = new DoubleAnimation();

      15: a.From = 0;

      16: a.To = animationLength+50;

      17: a.Duration = new Duration(TimeSpan.Parse("0:0:10"));

      18: ellipseGeometry.BeginAnimation(EllipseGeometry.RadiusXProperty, a);

      19: ellipseGeometry.BeginAnimation(EllipseGeometry.RadiusYProperty, a);

The used XAML for this is in the following

       1: <Window x:Class="circle.Window1"

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     Title="Window1" Height="300" Width="300">

       5:     <Canvas Name="canMain"    Height="300" Width="300"  >            

       6:         <Image   Canvas.Left="100" Canvas.Top="60"  Name="image"/>   

       7:     </Canvas>

       8: </Window>

You can download the sample code from here. Hope this will save some of your time.

Posted: 08-01-2009 5:29 PM by Razan | with no comments

Filed under: WPF, c#, Animation

Paul blog

Recent Posts

Tags

News

Community

Email Notifications

Archives