In my previous posts I discussed about “How to work with Notification API?” & “How to Capture Video from Default Webcam?”. In this post I will describe about the another cool new feature (“How to use the all new Right Click Context Menu?”) of Silverlight 4.

Silverlight 4 has now support for right click. You can now register the event “MouseRightButtonDown” & “MouseRightButtonUp” to any FrameworkElement. Hence, no need to use JavaScript to disable the right click option. If you want to disable the right click option then just implement those events with:

e.Handled = true;

Now if you want to implement a Context Menu on right click, create the Popup Context menu & position it to proper location. The following code will create the context menu:

private Popup CreateContextMenu(Point currentMousePosition)
{
    Popup popup = new Popup();
    Grid popupGrid = new Grid();
    Canvas popupCanvas = new Canvas();

    popup.Child = popupGrid;
    popupCanvas.MouseLeftButtonDown += (sender, e) => { HidePopup(); };
    popupCanvas.MouseRightButtonDown += (sender, e) => { e.Handled = true; HidePopup(); };
    popupCanvas.Background = new SolidColorBrush(Colors.Transparent);
    popupGrid.Children.Add(popupCanvas);
    popupGrid.Children.Add(CreateContextMenuItems(currentMousePosition));

    popupGrid.Width = Application.Current.Host.Content.ActualWidth;
    popupGrid.Height = Application.Current.Host.Content.ActualHeight;
    popupCanvas.Width = popupGrid.Width;
    popupCanvas.Height = popupGrid.Height;

    return popup;
}

CreateContextMenuItems() will add some context menu items, on click it will show which menu item has been cllicked by you. Upto this I only talked about the creation of the customized context menu. Now we have to show it on right click inside the Silverlight application. In my example, I added a Border control which has the right click event registered. Now check the below implemented code which will be responsible for showing the context menu:

void brdRightClickZone_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    txbMessage.Text = "Right Clicked";
    Point currentMousePosition = e.GetPosition(LayoutRoot);
    ShowPopup(currentMousePosition);
}

private void btnRightClick_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    e.Handled = true;
}

On right mouse down, I am setting the e.Handled = true. This ensures that, this will not show up the default Silverlight context menu & the right mouse up implementation will popup the customized context menu at the current mouse position.

What next? Download the sample application created by me & implement your own logic to create the customized context menu which will open on right click on your silverlight application.

Download Sample Application:  Silverlight 4 Right Click Context Menu Demo

codeproject

Silverlight Notification API is a new feature introduced in Silverlight 4 Beta 1. If you are developing your application using Silverlight & want to show some notification message like Outlook to the user, then you can use this. Remember that, this feature only works out of browser.

To develop Silverlight 4 application you must need Visual Studio 2010 Beta 2 which you can download from the Microsoft site. If you are using Visual Studio 2008 then you can install Visual Studio 2010 side by side too. After you installed the studio, just go with the installation of the “Silverlight 4 Tools for Visual Studio 2010”.

After you setup your development environment create a new Silverlight 4 application using Visual Studio 2010. This will automatically create a page “MainPage.xaml” for you. Add two buttons in your XAML. One is to install the Silverlight application as out of browser & another is to show the notification.

<Button x:Name="btnInstall" Width="150" Height="20" Content="Install OOB" Margin="5"/>
<Button x:Name="btnShowNotification" Width="150" Height="20" Content="Show Notification" Margin="5"/>

For implementing the Silverlight out of browser feature follow my earlier post: “How can you implement Silverlight 3 Out-Of-Browser feature?” Now go to the code behind file “MainPage.xaml.cs” & implement the click event for those. On page load, if it is running out of browser then create the notification window instance:

// Initialize a new instance of Notification Window
notificationWindow = new NotificationWindow();
notificationWindow.Height = 50.0;
notificationWindow.Width = 300.0;

Create your custom notification panel either using XAML or code behind. You can go for a nice looking UserControl. Here for example I will use a TextBlock inside a Border to show a simple message.

Border border = new Border()
{
    Background = new SolidColorBrush(Colors.Gray),
    Height = notificationWindow.Height,
    Width = notificationWindow.Width,
    Child = new TextBlock()
    {
        Text = "This is a Custom Notification from Silverlight 4",
        Foreground = new SolidColorBrush(Colors.White)
    }
};

Now, on “Show Notification” button click event check for whether it is running out of browser. If so, assign the notification panel you created to the content of the notification window instance & call the show method of the notification window. Here you have to pass the duration of the visibility of the notification in milliseconds.

notificationWindow.Content = border; // add the custom notification panel
notificationWindow.Show(2000); // show the notification

Now run your application & click on the “Install OOB” button. This will install the Silverlight application and open the desktop version of it. Click the “Show Notification” button to show the notification at the right bottom corner of your desktop.

Download Sample Solution:   Silverlight 4 Notification API Demo

codeproject

Silverlight 4 Beta 1 has been released by Microsoft on 18th November 2009. There are lots of goodies came up with the release of the new version. Among them, most of all are requested by the developers & users of Silverlight. In this post I will demonstrate one of the new feature “Accessing Default Webcam using Silverlight 4”.

To create a Silverlight 4 application you need “Visual Studio 2010 Beta 2”. Download it from the Microsoft site. Then install the “Silverlight Tools 4 for Visual Studio 2010 Beta 2”. After successful installation, create a Silverlight 4 Application project.

Once you done with the project creation, Visual Studio will open the MainPage.xaml for you. Add a Rectangle & three Buttons inside the Grid. The Rectangle will responsible for the Video output from your VideoCaptureDevice & buttons will be responsible for the interaction with the device. After adding the same your XAML will look like this:

   <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel HorizontalAlignment="Center">
            <Rectangle x:Name="rectWebCamView" Width="500" Height="400"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button x:Name="btnCaptureDevice" Content="Capture Device" Margin="5"/>
                <Button x:Name="btnPlayCapture" Content="Start Capture" Margin="5"/>
                <Button x:Name="btnStopCapture" Content="Stop Capture" Margin="5"/>
            </StackPanel>
        </StackPanel>
    </Grid>

Now, go to the code behind file (MainPage.xaml.cs) & create an instance of CaptureSource. Then call TryCaptureDevice() to initiate the Video Capture. This first get the default Video Capture device & assign it to the VideoBrush instance of the rectangle. Remember that, this will ask the user to grant permission to the user device & upon successful only it will start the device.

        private void TryCaptureDevice()
        {
            // Get the default video capture device
            VideoCaptureDevice videoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

            if (videoCaptureDevice == null)
            {
                // Default video capture device is not setup
                btnPlayCapture.IsEnabled = false;
                btnStopCapture.IsEnabled = false;
                btnCaptureDevice.IsEnabled = true;

                MessageBox.Show("You don't have any default capture device");
            }
            else
            {
                btnPlayCapture.IsEnabled = false;
                btnStopCapture.IsEnabled = false;

                // Set the Capture Source to the VideoBrush of the rectangle
                VideoBrush videoBrush = new VideoBrush();
                videoBrush.SetSource(captureSource);
                rectWebCamView.Fill = videoBrush;

                // Check if the Silverlight has already access to the device or grant access from the user
                if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
                {
                    btnPlayCapture.IsEnabled = true;
                    btnStopCapture.IsEnabled = false;
                    btnCaptureDevice.IsEnabled = false;
                }
            }
        }

Download Sample Solution:   Silverlight 4 Webcam Demo

codeproject

Microsoft released the first beta version of Silverlight 4 on 18th November 2009 at PDC in Los Angels. This version has been released for the developers only to have a look on what they are actually featuring on Silverlight 4 final release. As it’s not a Go-Live version hence you can’t develop commercial application using it. The Silverlight 4 runtime is not available for the end user till now.

Silverlight 4 Beta 1 comes up with a lot of powerful capabilities as already requested by the developers. Microsoft shipped it with almost 90% of requested features. You can see the list of new features in “What's new in Silverlight 4?”

To develop Silverlight 4 application you will need Visual Studio 2010 beta 2 which you can download it from “Get Tools” section. All necessary links are available on that page. Microsoft also released the new Expression Blend & the new Silverlight Toolkit for Silverlight 4 Beta 1. You can download them from the same location.

Have a look into Tim Heuer's Blog for more details.

Silverlight 3 came up with Out Of Browser support. Using that feature one can install the application just like a standalone windows application. Hence no need to open the browser to run the Silverlight application. Today for the first time I gone thru the APIs & created a sample application. Here I will discuss about the same to give you a demonstration. It is quite easy to implement.

Create a Silverlight application using Visual Studio 2008. This will automatically create “MainPage.xaml”. Now open the MainPage.xaml & add the following lines inside the LayoutRoot Grid:

<StackPanel Margin="20" HorizontalAlignment="Center">
    <TextBlock Text="Silverlight Out Of Browser Demo Application" 
               FontSize="20" HorizontalAlignment="Center"/>
    <Button x:Name="btnInstall" Content="Install as Out Of Browser Application" 
            Width="300" Height="20" Margin="20"/>
</StackPanel>

Read the Complete Article @ DotNetFunda.com

Microsoft released their all new Operating System as expected. From now onwards it is available for the general public i.e. you can purchase a new PC/Laptop with Windows 7 preloaded. Not only this, those who recently purchased PC/Laptop with Windows Vista they are able to upgrade to Windows 7 free of charge. So, grab your copy now & enjoy the real experience with Windows 7.

For last couple of months I am using the trial edition of Windows 7. According to me, it is a great operating system Microsoft had ever launched with lots of goodies. My special thanks to Microsoft & Windows 7 team for their excellent work.

No doubt this is really a great Microsoft Operating System with a huge performance boost, a great UI, new taskbar & multi-touch function. Here are the list of things I liked more in Windows 7:

• A great new Graphical User Interface
• The all new Taskbar & Taskbar thumbnails panel
• The new Taskbar Jump List
• A huge performance boost than the earlier operating systems
• Multi-touch capability
• The latest User Account Control, which is now a great experience rather than Vista
• Scheduled Desktop Wallpaper changer & Theme support
• New kernel dumping methods which actually improved the performance
• The new control panel, device manager & user libraries
• And more…

It’s definitely a great ERA in the computing world.

It’s a great day in the Microsoft era. They are going to launch the official release of Windows 7 today. From now onwards, this will be available to purchase all over the world.

You can view the Windows 7 Launch celebration here directly from New York city, which will be hosted by Steve Ballmer. This will start at 8 AM (Pacific) / 11 AM (Eastern).

Microsoft has just released it’s October 2009 release of Silverlight 3 Toolkit. You can download it from: Silverlight 3 Toolkit October 2009 Installer. Also have a look into the sample application at: Silverlight 3 Toolkit Sample Application

Silverlight 3 Toolkit has now full design time supports for Visual Studio 2010. Charting tool has been changed. They now introduced ISeries interface as the base interface for all the Series & StylePalette now renamed to Palette. So, those who are using StylePalette just make those changes in your code. You can now customize the LegendItem very easily. Silverlight team now added the support to Themes for Accordion, DataForm, DataPager, GridSplitter & ChildWindow. Added support for Drag & Drop functionality for some common items like ListBox, TreeView, DataGrid and Charting tools. Moreover the mousewheel support has been now added to navigate the GlobalCalendar & TimePicker controls.

Have a look into those latest features of Silverlight 3 Toolkit. In real scenarios those are really very awesome features. Though it is their 5th release of Silverlight Toolkit, hope they will come up with lots of required controls in the future versions.

In my last post Windows 7 Multitouch Application Development (Part - I), I described about how to handle multitouch image manipulation in Windows 7 which gives a very basic idea on the multitouch development. That code uses multitouch manipulation for the entire screen. If there are multiple images in the screen this will raise event for all.

In this post, I will show you how to manage multitouch events for all the images separately. See one of such kind of image manipulation demo here.

For this we have to assign a unique touch-id for each finger on the screen. As long as the finger touches the screen the associated touch-id will remain same for that particular finger. If the user releases his finger the system will release the touch-id & that can be again assign by the system automatically on next touch. So, how can we get the touch-id? You can get the same from the StylusEventArgs (i.e. args.StylusDevice.Id). The stylus device will automatically generate this ID for each touch, only thing is you have to assign it with the respective finger touch.

First of all, we will create an UserControl which will consist of a single Image & XAML code for it’s RenderTransform. The same thing we did in the previous post which was inside the Window, but here it will be inside the UserControl (Picture class). Create a DependencyProperty to assign the ImageLocation dynamically.

<UserControl x:Class="Windows7MultitouchDemo.Picture"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Source="{Binding Path=ImageLocation}" Stretch="Fill" Width="Auto"
           Height="Auto"  RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <RotateTransform x:Name="trRotate"/>
                <ScaleTransform x:Name="trScale"/>
                <TranslateTransform x:Name="trTranslate"/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</UserControl>

To track the multi-touch simultaneously for the above “Picture” usercontrol, you can use the PictureTracker class which comes with the Windows 7 Training Kit. You can download it from Microsoft Site. It looks similar to this:

/// <summary>
/// Track a single picture
/// </summary>
public class PictureTracker
{
       private Point _prevLocation;
       public Picture Picture { get; set; }
       public void ProcessDown(Point location)
       {
           _prevLocation = location;
       }
       public void ProcessMove(Point location)
       {
           Picture.X += location.X - _prevLocation.X;
           Picture.Y += location.Y - _prevLocation.Y;
           _prevLocation = location;
       }
       public void ProcessUp(Point location)
       {
           //Do Nothing, We might have another touch-id that is
           //still down
       }
}

Now, we have to store all the active touch-ids associated with the PictureTracker class. So, we will use a dictionary for that. We will use the same PictureTrackerManager class which again comes with the Windows 7 Training Kit.

private readonly Dictionary<int, PictureTracker> _pictureTrackerMap;

Create an instance of the PictureTrackerManager class inside your Window1.xaml.cs & register the stylus events with the PictureTrackerManager events. So now whenever a touch occurs on the Picture, the PictureTrackerManager will first find the associated touch-id for the respective instance and raise event to process the same.

//Register for stylus (touch) events
StylusDown += _pictureTrackerManager.ProcessDown;
StylusUp += _pictureTrackerManager.ProcessUp;
StylusMove += _pictureTrackerManager.ProcessMove;

Reference:  Windows 7 Training Kit
Download Sample Application

codeproject

Microsoft is going to launch the new Windows 7 operating system in October 2009. Currently the RC version is available online. As you know, Windows 7 came up with lots of goodies including better resource management, better performance, jumplist management, multitouch functionality & many more. Here I will discuss on developing a simple multitouch application using .Net 3.5 SP1.

Before doing anything you have to download the Windows 7 Multitouch API. You can download it from here. Extract the downloaded zip file to your local hard drive. Be sure that, you are using Windows 7 & you have a multitouch enabled screen to test it out.

Create a WPF application using Visual Studio 2008. This will automatically add a XAML file named Window1.xaml for you. Now add an image to your solution directory & insert it in the XAML. Now your Window1.xaml will look something like this:

<Grid>
    <Image Source="images/Hydrangeas.jpg"/>
</Grid>

Add RenderTransform to the image so that, we can scale or rotate the image properly. This will produce XAML similar to this:

<Grid>
    <Image Source="images/Hydrangeas.jpg" RenderTransformOrigin="0.5,0.5" Width="400">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="trScale" ScaleX="1" ScaleY="1"/>
                <RotateTransform x:Name="trRotate" Angle="0"/>
                <TranslateTransform x:Name="trTranslate" X="0" Y="0"/>
                <SkewTransform AngleX="0" AngleY="0"/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Grid>

Use proper names when you are adding different types of transform to the transform group. It will be easier for you to handle it from the code behind file. Run your application. This will open up your Window with an image inside it. If you want to drag or rotate the image this will not work because we haven’t integrated the functionality yet. Add two project references i.e. “Windows7.Multitouch” & “Windows7.Multitouch.WPF” from the extracted zip folder to your solution. These are the managed API codes for multitouch application development. Go to your Window1.xaml.cs & be sure that following namespaces are already included. You may have to add some of them.

using System; 
using System.Windows; 
using Windows7.Multitouch; 
using Windows7.Multitouch.Manipulation; 
using Windows7.Multitouch.WPF; 

Create two private members inside your partial class:

// object of a .Net Wrapper class for processing multitouch manipulation 
private ManipulationProcessor manipulationProcessor = new ManipulationProcessor(ProcessorManipulations.ALL);

// boolean value to check whether you have a multitouch enabled screen 
private static bool IsMultitouchEnabled = TouchHandler.DigitizerCapabilities.IsMultiTouchReady;

Now inside the Window Loaded event write the following lines of code:

// check to see whether multitouch is enabled 
if (IsMultitouchEnabled) 
{ 
    // enables stylus events for processor manipulation 
    Factory.EnableStylusEvents(this); 

    // add the stylus events 
    StylusDown += (s, e) => 
    { 
        manipulationProcessor.ProcessDown((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF()); 
    }; 
    StylusUp += (s, e) => 
    { 
        manipulationProcessor.ProcessUp((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF()); 
    }; 
    StylusMove += (s, e) => 
    { 
        manipulationProcessor.ProcessMove((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF()); 
    }; 

    // register the ManipulationDelta event with the manipulation processor 
    manipulationProcessor.ManipulationDelta += ProcessManipulationDelta; 

    // set the rotation angle for single finger manipulation 
    manipulationProcessor.PivotRadius = 2; 
}

Write your logic inside the manipulation event handler implementation block. Here I will do rotation, scaling & positioning of the image. Here is my code:

private void ProcessManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    trTranslate.X += e.TranslationDelta.Width;
    trTranslate.Y += e.TranslationDelta.Height;

    trRotate.Angle += e.RotationDelta * 180 / Math.PI;

    trScale.ScaleX *= e.ScaleDelta;
    trScale.ScaleY *= e.ScaleDelta;
}

From the ManipulationDeltaEventArgs you can get various values & depending upon them you can implement your functionality in this block. TranslateTransform will position the image, RotateTransform will do the rotation & the ScaleTransform will resize the image. Run your project to test your first multitouch application.
Download Sample Application
codeproject