Razan Paul Blog

Emulating Synchronous Web Service Call in Silverlight 3

2010-01-14T19:10:00Z

As we know, only option for web service calling in Silverlight is asynchronous and Silverlight framework does not provide any API for synchronous call. In this post, i will show how we can emulate synchronous web service call using the default asynchronous web service call mechanism of Silverlight.

One simple idea to solve this problem is sleeping UI thread after web service call until result back. But it will block UI thread. So Dispatcher will be blocked and UI will be freeze. No interaction will be possible with the Silverlight UI. So blocking the UI thread is not the Solution.

To solve this problem, i have performed asynchronous service calling in a worker thread and blocked the worker thread until result is retrieved. Result is send to the UI thread using Dispatcher.invoke to Update UI. To block the worker thread until the result is retrieved from the web service, I have used thread synchronization mechanism AutoResetEvent. For emulating synchronous web service call, the following code has been used.

        1: public partial class MainPage : UserControl

       2:    {

       3:        private  AutoResetEvent autoResetEvent = new AutoResetEvent(false);

       4:        public MainPage()

       5:        {

       6:            InitializeComponent();

       7:            StartServerTimeUpdatingSyncronosly();

       8:        }

       9:        private void StartServerTimeUpdatingSyncronosly()

       {

           try

           {

               Thread thread = new Thread(new ThreadStart(UpdateTimeSyncronosly));

               thread.Start();

           }

           catch (Exception ex)

           {

               MessageBox.Show(ex.Message, "SynchronousWebServiceCalling", MessageBoxButton.OK);

           }

       }     

       private void UpdateTimeSyncronosly()

       {

           SynchronousWebServiceCalling.ContentServiceReference.ContentServiceClient contentServiceClient = new SynchronousWebServiceCalling.ContentServiceReference.ContentServiceClient();

           contentServiceClient.ReturnServerTimeCompleted += new EventHandler<SynchronousWebServiceCalling.ContentServiceReference.ReturnServerTimeCompletedEventArgs>(ReturnServerTimeCompleted);

           string message = "Retrieving new server time...";

           while (true)

           {

               this.Dispatcher.BeginInvoke(new Action<string>(DisplayBusyMessage), message);

               contentServiceClient.ReturnServerTimeAsync();

               autoResetEvent.WaitOne();

           }

       }

       void ReturnServerTimeCompleted(object sender, SynchronousWebServiceCalling.ContentServiceReference.ReturnServerTimeCompletedEventArgs e)

       {

           this.Dispatcher.BeginInvoke(new Action<string>(DisplayTime), e.Result);         

           string message = "New server time is retrieved";

           this.Dispatcher.BeginInvoke(new Action<string>(DisplayBusyMessage), message);

           System.Threading.Thread.Sleep(5000);

           autoResetEvent.Set();

       }

       private void DisplayTime(string time)

       {

           tblTime.Text = time;

       }

       private void DisplayBusyMessage(string message)

       {

           StatusLabel.Text = message;

       }

   }

Here AutoResetEvent plays an important role to implement this. It has a method WaitOne. According to MSDN, WaitOne blocks the current thread until the current instance receives a signal. So in the worker thread, we call WaitOne() after calling the web service method to block the worker thread until the result of web service operation is received. When the result of web service operation is received in ReturnServerTimeCompleted method, Set() method of AutoResetEvent is used to signal the worker thread so that next consecutive web service call can be made.

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

A simple Text Marquee Control in Silverlight

2010-01-14T18:18:00Z

A Silverlight text marquee is a scrolling piece of text displayed either horizontally across or vertically down your container. Here i will describe how I came up to make a marquee text control using Canvas and TextBlock. This marquee text control scrolls text in Left to right, right to left, top to bottom and bottom to top. 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.

Clip Geometry: In WPF, if you set the value of the ClipToBounds property of canvas to true, Canvas will clip its children when they go outside of Canvas.But there is no ClipToBounds property of canvas.Every UIelement has a Property named clip, which is Geometry type. You can set any geometry used to define the outline of the contents of an element. Only the area that is within the region of the geometry will be visible. Portion of UIelement outside the geometry will be visually clipped in the rendered layout. To clip the marquee when they go outside of Canvas (container), I have used rectangle geometry as clip geometry of the Canvas.

Changing Position of UIelement continuously: By changing continuously any of the canvas positioning property Left and Top, we can get moving text. Here marquee text control is a user control consists of TextBlock and canvas.

The XAML of marquee text control is in the following:

        1: <UserControl x:Class="SilverlightMarqueeText.MarqueeText"

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

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

       4:     <Canvas Name="canMain" >

       5:         <TextBlock Name="tbmarquee"> </TextBlock>

       6:     </Canvas>

       7: </UserControl>

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

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 negative left property of canvas is applied to any UIelement like TextBlock, 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, i have set a rectangle geometry with same size of Canvas as clip geometry of the Canvas. 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: private void LeftToRightMarquee()

       2:      {

       3:          RectangleGeometry rectangleGeometry = new RectangleGeometry();

       4:          rectangleGeometry.Rect = new Rect(new Point(0, 0), new Size(canMain.Width, canMain.Height));

       5:          canMain.Clip = rectangleGeometry;

       6:          double height = canMain.Height - tbmarquee.ActualHeight;

       7:          tbmarquee.Margin = new Thickness(0, height / 2, 0, 0);

       8:          DoubleAnimation doubleAnimation = new DoubleAnimation();

       9:          doubleAnimation.From = -tbmarquee.ActualWidth;

      10:          doubleAnimation.To = canMain.Width;

      11:          doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

      12:          doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

      13:          Storyboard storyboard = new Storyboard();

      14:          storyboard.Children.Add(doubleAnimation);

      15:          Storyboard.SetTarget(doubleAnimation, tbmarquee);

      16:          Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));

      17:          storyboard.Begin();

      18:      }

How is right to left marquee text implemented in this control?

As we know, a canvas is used as the container of marquee text. Here marquee text is moved outside of canvas area equal to marquee text width and it is moved equal to canvas width using double animation. To move the text outside of canvas in the right direction, the value of left property of canvas is set equal to the width of the canvas. By this way, marquee text will go outside of its parent container but will remain visible outside of the parent container. To make marquee text invisible outside of canvas, i have set rectangle geometry with same size of Canvas as clip geometry of the Canvas. 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: private void RightToLeftMarquee()

       2: {

       3:     RectangleGeometry rectangleGeometry = new RectangleGeometry();

       4:     rectangleGeometry.Rect = new Rect(new Point(0, 0), new Size(canMain.Width, canMain.Height));

       5:     canMain.Clip = rectangleGeometry;

       6:     double height = canMain.Height - tbmarquee.ActualHeight;

       7:     tbmarquee.Margin = new Thickness(0, height / 2, 0, 0);

       8:     DoubleAnimation doubleAnimation = new DoubleAnimation();

       9:     doubleAnimation.From = canMain.Width;

      10:     doubleAnimation.To = -tbmarquee.ActualWidth;

      11:     doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

      12:     doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

      13:     Storyboard storyboard = new Storyboard();

      14:     storyboard.Children.Add(doubleAnimation);

      15:     Storyboard.SetTarget(doubleAnimation, tbmarquee);

      16:     Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));

      17:     storyboard.Begin();

      18: }

How is top to bottom marquee text implemented in this control?

Here marquee text is moved outside of canvas area equal to marquee text height and to behave like scrolling text, it is moved equal to canvas height using double animation. To move the text outside of canvas in the top direction, negative top property of canvas is used. However, if someone uses negative top property of canvas, it will go outside of its parent container but will remain visible outside of the parent container. To make marquee text invisible outside of canvas, i have set rectangle geometry with same size of Canvas as clip geometry of the Canvas. Then using double animation top property of canvas for that element is being changed continuously to get moving text in the top to bottom direction. The whole thing is done using the following code.

       1: private void TopToBottomMarquee()

       2: {

       3:     RectangleGeometry rectangleGeometry = new RectangleGeometry();

       4:     rectangleGeometry.Rect = new Rect(new Point(0, 0), new Size(canMain.Width, canMain.Height));

       5:     canMain.Clip = rectangleGeometry;

       6:     double width = canMain.Width - tbmarquee.ActualWidth;

       7:     tbmarquee.Margin = new Thickness(width / 2, 0, 0, 0);

       8:     DoubleAnimation doubleAnimation = new DoubleAnimation();

       9:     doubleAnimation.From = -tbmarquee.ActualHeight;

      10:     doubleAnimation.To = canMain.Height;

      11:     doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

      12:     doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

      13:     Storyboard storyboard = new Storyboard();

      14:     storyboard.Children.Add(doubleAnimation);

      15:     Storyboard.SetTarget(doubleAnimation, tbmarquee);

      16:     Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

      17:     storyboard.Begin();

      18: }

How is bottom to top marquee text implemented in this control?

To behave like each character coming out at a time, marquee text is placed outside of canvas area equal to marquee text height. To behave like scrolling text, it is moved equal to canvas height using double animation in the bottom to top direction. To place the text outside of canvas in the bottom direction, the value of top property of canvas is set equal to the height of the Canvas. To make marquee text invisible outside of canvas, i have set rectangle geometry with same size of Canvas as clip geometry of the Canvas. Then using double animation on top property of canvas for that element is being changed continuously to get moving text in the top to bottom direction. The whole thing is done using the following code.

       1: private void BottomToTopMarquee()

       2: {

       3:     RectangleGeometry rectangleGeometry = new RectangleGeometry();

       4:     rectangleGeometry.Rect = new Rect(new Point(0, 0), new Size(canMain.Width, canMain.Height));

       5:     canMain.Clip = rectangleGeometry;

       6:     double width = canMain.Width - tbmarquee.ActualWidth;

       7:     tbmarquee.Margin = new Thickness(width / 2, 0, 0, 0);

       8:     DoubleAnimation doubleAnimation = new DoubleAnimation();

       9:     doubleAnimation.From = canMain.Height;

      10:     doubleAnimation.To = -tbmarquee.ActualHeight;

      11:     doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

      12:     doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

      13:     Storyboard storyboard = new Storyboard();

      14:     storyboard.Children.Add(doubleAnimation);

      15:     Storyboard.SetTarget(doubleAnimation, tbmarquee);

      16:     Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

      17:     storyboard.Begin();

      18: }

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

CodeProject MVP for 2010

2010-01-12T13:54:00Z

I have been awarded a CodeProject MVP for the articles I wrote in 2009. Thanks Codeproject for this recognition, which will encourage me to keep my passion on writing article.

I love CodeProject.

Thanks All.

Razan

My CodeProject Profile

Exploring Clip Property of UIelement to Make Animation in WPF

2009-12-31T15:43:00Z

Every UIelement has a Property named clip, which is Geometry type. You can set any geometry used to define the outline of the contents of an element. Only the area that is within the region of the geometry will be visible. Portion of UIelement outside the geometry will be visually clipped in the rendered layout. Using Clip property of UIelement in WPF, you can do lots of animation. I think it is a powerful way of doing animation. Possibilities are endless. You can do most geometrical type of animation in 2D using this technique. I have just published an article about this technique.

Here it is:

http://www.codeproject.com/KB/WPF/ClipBasedAnimationWPF.aspx

Making a Simple Marquee Text Control, Drip Animation and Roll Animation in WPF

2009-12-31T15:40:00Z

An animation consists of a series of frames. To perform the animation, these frames are shown one after the other at a regular time interval. I have just published an article about how i came up with marquee text control, Drip animation, and Roll animation.

Here it is:

http://www.codeproject.com/KB/WPF/WPFAnimation1.aspx

A simple snapshot taker application in WPF

2009-11-21T17:10:00Z

The simple application is implemented using media player in WPF. You can also use this code to make preview of video in WPF. Here MediaPlayer is used to play video instead of MediaElement. There is nothing ground breaking here. The overall idea is: as we are playing video in content control which is a visual and we know, we can make image from any visual, so we are just making image from the video content control. The simple snapshot taker application looks like the following:

Here an openfiledialog is used to open video file. If you select non-video file, the application will give you the message “invalid file”. Process.Start(filename) starts a viewer by specifying a file name. It is similar to typing the information in the run dialog box of the Windows Start menu. The used c# code for this is in the following:

        1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Text;

       5: using System.Windows;

       6: using System.Windows.Media;

       7: using System.Windows.Controls;

       8: using System.Windows.Media.Imaging;

       9: using System.Windows.Shapes;

using System.IO;

  

namespace SnapShotUsingMediaPlayer

{

    public class MediaPlayerControl : ContentControl

    {      

        MediaPlayer _MediaPlayer;

        private Uri _Source = null;

        public Uri Source

        {

            get { return _Source; }

            set

            {

                _Source = value;

                Play(value);

            }

        }

  

        public void Play(Uri source)

        {

            if (_MediaPlayer == null)

            {

                _MediaPlayer = new MediaPlayer();

  

            }

            _MediaPlayer.MediaFailed += new EventHandler<ExceptionEventArgs>(_MediaPlayer_MediaFailed);           

            _MediaPlayer.MediaOpened += new EventHandler(_MediaPlayer_MediaOpened);

            _MediaPlayer.Open(source);     

        }

  

        void _MediaPlayer_MediaOpened(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(1000);

            VideoDrawing videoDrawing = new VideoDrawing();

            videoDrawing.Player = _MediaPlayer;

            videoDrawing.Rect = new Rect(0, 0, _MediaPlayer.NaturalVideoWidth, _MediaPlayer.NaturalVideoHeight);

            Rectangle rectangle = new Rectangle();

            rectangle.Height = this.Height;

            rectangle.Width = this.Width;

            Brush brush = new DrawingBrush(videoDrawing);

            rectangle.Fill = brush;

            this.Content = rectangle;

            _MediaPlayer.Play();           

        }

  

        void _MediaPlayer_MediaFailed(object sender, ExceptionEventArgs e)

        {

            MessageBox.Show("Invalid File");

        }

  

        public string Takesnapshot()

        {            

            RenderTargetBitmap renderBitmap = new RenderTargetBitmap(300, 300, 96, 96, PixelFormats.Pbgra32);

            renderBitmap.Render(this);

            string filename = "Temp" + ".gif";

            FileStream fs = new FileStream(filename, FileMode.Create);

            BitmapEncoder encoder = new GifBitmapEncoder();

            encoder.Frames.Add(BitmapFrame.Create(renderBitmap));

            encoder.Save(fs);

            fs.Close();

            return filename;

        }

    }

}

VideoDrawing draws video to the specified rectangle. Here we have used fixed size rectangle with size 300*300 to show the video from VideoDrawing. We have made drawing brush from video drwaing and used this video drwaing to fill the rectangle. As we have not made VideoDrawing freeze, so it will change its content with time when media player is playing. RenderTargetBitmap Class is used to convert the video container element into a bitmap. Then GifBitmapEncoder is used to encode the bitmap into gif format and then the gif file is saved as temp.gif.

The used XAML for this is in the following:

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

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

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

       4:         xmlns:local ="clr-namespace:SnapShotUsingMediaPlayer"

       5:     Title="Window1" Height="500" Width="500">

       6:     <StackPanel>

       7:         <Button FontSize="20"  Margin="0,5,0,0"  HorizontalAlignment="Center" Width="Auto" Name="btnOpenFile" Click="btnOpenFile_Click"  Content="Open Video File"/>

       8:         <Border BorderThickness="2" Margin="0,10,0,0" Height="300" Width="300" BorderBrush="Black">

       9:             <local:MediaPlayerControl x:Name="player" Background="Black"  Width="300" Height="300"  />

      10:             </Border>

      11:         <StackPanel Margin="0,5,0,0"  Orientation="Horizontal" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" >

      12:             <Button FontSize="20" Name="btnTakeSnapShot" Click="btnTakeSnapShot_Click"  Content="Take SnapShot"/>

      13:         </StackPanel>

      14:     </StackPanel>

      15: </Window>

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

Internationalization in the web service method of Asp.net

2009-11-01T17:04:00Z

Asp.net internationalization facilitates to adapt an asp.net web site to different languages and regional differences. If we use browser’s language/ culture for internationalization, we only need to set the following line in web.config under system.web : <globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>.

If we use user-preferred language/ culture for internationalization, we have to do more work. As we know, to support Internationalization in an asp.net page, we can override InitializeCulture method. In the override InitializeCulture method, we can change both the Culture and UI culture. However, in the web service method call of asp.net, asp.net does not provide any functionality to override this method or this type of functionality. Another point is we can change the both culture and UI culture when the web service method is invoked but it does not have an effect on the internationalization.

As we know, on every web service call or asp.net page request, BeginRequest event of global.asax is fired before any specific processing. If we change the Culture and UIculture of current thread in the BeginRequest event of global.asax, it affects the Internationalization both in web service method and asp.net page and we can get the desired result. We can write the following code to implement so in global.asax:

        1: void Application_BeginRequest(Object Sender, EventArgs e)

       2:   {

       3:       string culture= string.Empty;

       4:       if (HttpContext.Current.Request.Cookies["language"] != null)

       5:       {

       6:           culture = Request.Cookies.Get("language").Value.ToString();

       7:       }

       8:       else

       9:       {

      10:           culture = "en-US";

      11:       }

      12:       System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(culture);

      13:       System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(culture);

      14:   }

Changing the CurrentCulture of current thread based on the cookie value will change the number formats, date format according to user-selected culture. As we know, a new resource file is created for each language/culture that the website supports. Then culture wise strings are retrieved by name. Changing the CurrentUICulture of current thread based on the cookie value will select proper resource file according to user-selected culture.

Now the question is how we can get the current culture to set in the BeginRequest event of global.asax. A cookie is a small text that associated with every http request for a particular domain. We can set cookie from both the server side and client side. In the client side, we can keep the culture setting in cookie using JavaScript code and retrieve it from the request object in the BeginRequest event of global.asax. Moreover, When BeginRequest method is invoked, the session object is not initialized that time for this request. Therefore, we cannot keep the culture setting in the session. In client side, you can set the cookie using the following Jquery code: $.cookie('language', prefLanguage). In server side, you can use the following code to set the cookie:

       1: System.Web.HttpCookie aCookie = new System.Web.HttpCookie("language");

       2: aCookie.Value = prefLanguage.ToString();

       3: System.Web.HttpContext.Current.Response.Cookies.Add(aCookie);

Hope this will save some of your time.

Implementation of Auto Logoff based on User Inactivity in WPF Application

2009-10-09T17:04:00Z

In some applications, we need to implement Auto logoff feature for security reason. In auto log off feature, the application redirects the user into login window, if the user remains inactive for a certain amount of time. I have just published how I came up with implementing auto logoff feature based on user inactivity in WPF application.

Here it is:

http://www.codeproject.com/KB/WPF/AutologoffWPF.aspx

Making a Drop Down Style Custom Color Picker in WPF

2009-10-09T16:55:46Z

Although WPF provides quite a rich collection of UI controls and components for development, a particular control has been missing. That is a color-picker control. I have just published how I came up with making a drop down style custom color picker in WPF.

Here it is:

http://www.codeproject.com/KB/WPF/WPFDropDownColorPicker.aspx

Perspective camera animation on a cube in WPF 3D

2009-10-01T11:30:00Z

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

        1: public partial class Window1 : Window

       2:   {

       3:       DispatcherTimer _timer = null;

       4:       PerspectiveCamera _perspectiveCamera = null;

       5:       double _angle = 0;        

       6:  

       7:       public Window1()

       8:       {

       9:           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:

       1: <Window

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

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

       4:     x:Class="Fun.Window1"

       5:     x:Name="Window"

       6:     Title="Fun"

       7:     Height="400" Width="400">

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

       9: </Window>

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

Creating a Roll animation effect in WPF

2009-10-01T11:20:00Z

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

        1: public partial class Window1 : Window

       2:    {

       3:        DispatcherTimer _timer = null;

       4:        double _rollTopLeft = 0;

       5:        double _imageWidth = 400;

       6:        double _imageHeight = 300;

       7:        double _offset = 3;

       8:        double _3DSize = 50;

       9:        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

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

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

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

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

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

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

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

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

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

      10:                     <Line.BitmapEffect>

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

      12:                     </Line.BitmapEffect>

      13:                 </Line>

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

      15:                     <Line.BitmapEffect>

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

      17:                     </Line.BitmapEffect>

      18:                 </Line>

      19:             </Canvas>

      20:         </Canvas>

      21:     </Canvas>

      22: </Window>

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

Wheel Clockwise animation in WPF

2009-10-01T10:54:00Z

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:

        1: public partial class Window1 : Window

       2:     {

       3:         DispatcherTimer _timer = null;

       4:         Ellipse _grdMain = null;

       5:         ContentPresenter _circleContentPresenter = null;

       6:         LineSegment LineSegment2 = null;

       7:         PathFigure PathFigure1 = null;

       8:         bool ISIncrementdirectionX = true;

       9:         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

       1: <Window x:Class="WheelClockwise.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="400" Width="400">

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

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

       7:     </Canvas>

       8: </Window>

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

Making circle animation in WPF

2009-10-01T06:40:00Z

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.

Creating marquee/scrolling text in WPF

2009-10-01T06:13:00Z

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.

Some thoughts about how we can make a thread safe class library

2009-09-25T15:42:00Z

What is Thread safety?

Thread safety is making sure that shared data (Global/static) of a program is modified by only one thread at a time without any deadlock, starvation, race condition so that program behaves correctly when its methods are called from multiple threads.

What is thread safe class library?

A class library consists of classes with some other stuff. Each class has one or more methods which can be called form different threads concurrently. A class library is called thread safe if every class of it is tread-safe. To be a class thread-safe it has to behave correctly when its methods are called from multiple threads.

To make a class library thread safe, you have to ensure the following two things for every class:

Make sure that shared data (Global/static) is not modified by more than one thread concurrently.
Ensure that there is no possibility of deadlock, Inconsistency, starvation, race condition.

Implementation Strategy 1(synchronized mechanism):

To implement requirement 1, every concurrent thread has to use some synchronized mechanism like locking when they are executing critical section of code. To ensure requirement 2, you have to make the design carefully. Implementation in this way still has problem because you have to ensure that there is no possibility of deadlock, Inconsistency, starvation, race condition.

Implementation Strategy 2(TLS):

If shared data (Global/static) doesn't need to be share between threads, you can use this strategy. In this strategy you don’t need to worry about deadlock, starvation, race condition. Thread-local storage (TLS) is a concurrent design pattern which ensures shared data (Global/static) are allocated such that there is one instance of shared data (Global/static) per thread.

Using System.Threading namespace one can use TLS to store data that is unique to each thread in multi-threaded applications. According to MSDN the common language runtime allocates a multi-slot data store array to each process when it is created. Thread’s local storage is unique per thread and one’s thread local storage is not available to other threads. Multiple threads can use same named slot (TLS) to store their data without any conflict. Use the AllocateNamedDataSlot method to allocate a named data slot. A static variable tagged with ThreadStaticAttribute is not shared between threads .Thread static members has per-thread storage rather than per AppDomain like normal static members. Thread-relative static fields provide much better performance than data slots, and enable compile-time type checking.