If you work in XAML pages, sometime you might noticed that the XAML page freezes for sometime while opening the page in design view. This is very annoying and many time it is responsible to crash the Visual Studio IDE. So what to do?

 

If you use Expression Blend to design the XAML page or don't want to open the XAML in design view, this small tip will help you to improve the performance of the IDE. Read more to know.

Many time we need to change the layout type of any panel present inside the page. This is mainly a designers job but sometime developers need to change them on their requirement. In that case, people need to find out the start and end tag of the panel and change them accordingly. This is little bit a tricky process.

 

In this post, I am going to share you the easy process to switch between different layout types. If you are a designer or using Expression Blend, you are already familiar with it. But for a newbie, I think it will be a great help.

Last Wednesday (July 6th 2011) we explored a way to create a Circular loader using XAML without writing any line in the code behind file. Lot of you gave a good feedback and discussed various findings on the same.

 

I did some more investigation to create a different type of circular loader which you can include in your Silverlight, WPF and Windows Phone 7 applications where you are using XAML code. In this article, I will be guiding to create similar kind of Circular loader as shown above. This will be more simple than the previous one. Let's start our discussion and create one loader like this.

If you are a XAML designer and creating controls for Silverlight, Windows Phone 7 or WPF, you may come in some situation that the custom properties for the controls are not properly organized by the developers. If you come into such situation forward this link to the developers and they may find it useful.

 

In this article, we will learn how to well organize the custom properties of your control so that, designers can easily search in appropriate location. Read to know more about it.

Sometime we need to show a circular loader in WPF and/or Silverlight. We may need it in Windows Phone 7 too. In simple statement, we need to show a circular loader in various XAML applications like Silverlight, WP7 and WPF.

 

In this article, we will learn how to create a Circular Loader as shown in the screenshot. I will not use a single line of C# code to create this loader. Everything will be in the XAML file itself to keep the code behind file clean. Read to know more about it step-by-step and after reading this article, you will be able to create and use a circular loader like this. Source code is also available for download at the end of the page. Feel free to use it.

In this post, I am going to give a Tip of using Expression Blend to create a Gradient color from any color pattern. Sometime, you might have a color pattern that you have to use in your UI and don't know how to pick the exact color to your UI. This simple post will help you to understand it properly.

After reading this post, you will be able to pick any gradient color from a pattern and use as easily as 1-2-3. Hope, this will help you. Feedbacks are always appreciable.

In this post, I will share you some important Shortcut keys of Microsoft Expression Blend 4. If you are working with Expression Blend 4, this will definitely help you to improve your daily productivity work. Keep the list with you always to best use of the Shortcut keys in Blend 4 while designing your XAML page.

 

If you have more shortcuts, please share those to me and I will include them here as the key resource. Thanks for your support.

You all might know about ReSharper tool. The current stable version of ReSharper is v5. The ReSharper team is currently working on their development to release the next version of ReSharper i.e. v6.

The new version of ReSharper has some cool new features like JavaScript, CSS and XAML support. It is currently in the early development stage and user has right to try out the new features and give feedbacks to improve them.

Yesterday I installed the new EAP release and tried out some cool feature. Among them one is: "Color support in XAML page". In this post, I am going to describe it to you. Read out the full post to learn about it.

In my earlier post “How to Reposition a Silverlight Child Window?”, I demonstrated you how to reposition a Silverlight Child Window into the screen. I tried the same with the WPF Modal Window too. But was not able to make it.

 

Later Thomas Claudiush gave me a cool sample where he did it very easily. In this post, I am going to share that code for you so that, if in near future you need the same behavior, you don’t have to research for it again.

MVVM, which is an abbreviated form of (M)odel-(V)iew-(V)iew(M)odel is not new to you all. But there are someone who don’t know about it. If you are a Core ASP.Net developer you may know about MVC & MVP, may also know about MVVM which mainly used in WPF/Silverlight. For them, it is tough to remember about its concept.

 

In general in any of my discussions or presentations, I used to describe MVVM in a way which is very easier to understand and easy to recall. Hence thought, why shouldn’t I share this to you? That’s why writing this post. Read it. I hope that, you will enjoy it much while reading it fully.

Microsoft launched their Expression Studio 4 today (7 June 2010), as expected. It includes Sketch Flow, Expression Encoder, Expression Web and Expression Design. This release comes with the Upgrade version. If you already have the licensed copy of Expression Studio 3, it will auto update to Expression 4 and you need no new license.

You can download it from Microsoft Expression Studio site.

Please note that, if you are developing in Silverlight for Windows Phone 7 and want to use Expression Blend, don’t install this version of Expression Studio. Continue working with the Expression Blend 4 Beta and the Windows Phone 7 CTP Tools for developers. Once the Windows Phone SDK releases, there will be service pack for Expression Studio.

Sometimes we write the following code while working with EventHandler and that may create some problems. I will discuss this later on. Let us see the code:


                private void RaiseOperationComplete(EventArgs e)
                {
                    if(OperationComplete != null)
                    {
                        OperationComplete(this, e);
                    }
                }


In the above case, suppose two thread subscribed to the same OperationComplete handler and one unsubscribed the event. In such scenario the OperationComplete event will become null and for the next thread due to the event is null it will not execute. This happens mainly in multithreaded applications but you can't guarantee for single threaded application too.

So what to do? How can we make sure that our application will not come into such situation and work properly?

	Today morning I came across one news that, one of my another article on “Tips & Tricks: Customizing Visual Studio 2010 Start Page” came as “Articles of the Day” in Microsoft’s official WPF site: WindowsClient.net. I am really thankful to the entire team who gave my articles such honour.
	Read the Original Article @ DotNetSpark.com.

It’s another great day when one of my other article on “Windows 7 Multi-touch Application Development” has been selected in Microsoft official WPF site: WindowsClient.net. It’s a great pleasure for me. Thanks to DotNetFunda Team for the honour.

Read the Original Article @ DotNetFunda.com

Today morning when I checked my mail, I saw one mail regarding “Article of the day” from DotNetFunda.com mentioning one of my article titled “Windows 7 Multitouch Application Development (Part – I)” has been selected as “Article of the day” in Microsoft WPF site WindowsClient.Net.

Thank you DotNetFunda team.

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

While working in Windows you have seen that, while focusing on any TextBox the entire text inside it has been selected. This is a default behaviour of Windows, but in WPF this behaviour is not present. For this you have to write code.

If you want to add the same behaviour in your WPF application then you have to register the TextBox.GotFocus event for each textbox inside your Window and in that event implementation you have to write the code to select all the text inside the focused TextBox, right? If you do like this, then you have to write so many event registration for each one of the TextBox.

 

 

Lets say, you have a single Window with 100 TextBoxs in it. In this case though you can write the event definition inside a single implementation but you have to register the event for 100 times. Now imagine the same behaviour for 10 Windows inside the same application. Here you have to write the event implementation for each and every Window & register the event for each TextBox. This will definately clutter your code.

So, how can you get the said behaviour in your WPF application? It is a simple trick inside your App.xaml.cs file. This will be a global event handler for any TextBox in your application. If you open your App.xaml.cs you will find a overridable method named "OnStartUp". Inside this register the TextBox.GotFocus event for every TextBox before calling the OnStartup method for the base class. After doing this trick, your OnStartup method will look like this:

 

 

Here, the EventManager class will be responsible to register the event handler for all TextBox. So simple right? Now add the event handler implementation for the TextBox in the same class. This will look like this: Now run your application with multiple Windows having multiple TextBox on them. Focus on any TextBox having some texts inside it. You will see the same behaviour has been added to all of your TextBox.
codeproject

MoXAML is an AddIn for Visual Studio to make your coding more productive for WPF and Silverlight Applications. By using this great power toy, you can code without giving more efforts. It has lots of features like beautifying the XAML code, Keyword Lookup, better comment support for XAML, automated Dependency Property creation and more.

You can also explore the features of XAML Power Toys. This will give you a extended power to design your XAML. This is really a good AddIn not only for the designers but also for the developers. You can create your ViewModel class, create ListView or Form for selected class, extract properties to style, option to generate x:Name for controls, grouping controls inside GroupBox and lots of other goodies. Check out the site for the latest features.

Mole is a tool that integrates with Visual Studio which lets you inspect the Visual Tree of your application, view and edit properties or data, view the XAML for selected elements and more. It allows unlimited drilling to objects and sub objects.

Snoop is a tool which you can use to hook to your running WPF application and browse the Visual Tree of the application. You can also inspect and edit the properties, inspect routed events and magnify sections in the UI and also debug binding errors.

Crack.Net is a runtime debugging tool for .Net desktop applications (both WPF & WinForms) just like Mole & Snoop. It allows you to go thru the managed heap of another .Net application, view all kinds of values on different objects and also manipulate them easily. You can also read the Crack.Net article.

Here are some good blog posts for those people who are currently doing experiments in Multitouch Applications on Windows 7:

Experimenting with Multi-Touch on Windows 7 ( Part 1 )
Experimenting with Multi-Touch on Windows 7 ( Part 2 )
Experimenting with Multi-Touch on Windows 7 ( Part 3 )
Experimenting with Multi-Touch on Windows 7 ( Part 4 )