WPF

Showing posts with label WPF. Show all posts

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.

Published by on under CodeProject | ExpressionBlend

Circular Loader

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.

Published by on under CodeProject | Silverlight
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.
Published by on under CodeProject | ExpressionBlend

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.

Published by on under CodeProject | ExpressionBlend

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.
Published by on under CodeProject | ReSharper

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.

Published by on under Tips | WPF

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.

Published by on under .Net | MVVM
image 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.
Published by on under ExpressionBlend | ExpressionStudio
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?

Published by on under .Net | Silverlight
image

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.

Published by on under Achievements | News

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.

image 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

Published by on under .Net | Tips
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
Published by on under .Net | Tips
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:

 

 

protected override void OnStartup(StartupEventArgs e)
{
    EventManager.RegisterClassHandler(typeof(TextBox), TextBox.GotFocusEvent, new RoutedEventHandler(TextBox_GotFocus));
    base.OnStartup(e);
}

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:
private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
    TextBox tb = sender as TextBox;
    tb.Focus();
    tb.SelectAll();
}  
             
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.
Published by on under Tips | WPF
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.
Published by on under .Net | Silverlight

Recently, I was facing performance issue while working with huge data. I need to bind those data inside a panel as Custom User Control & want to change the properties multiple times in a second. When I used less no's of data it was working fine, but, when I tried with more no of data, my application starts crying. It was a real pain to the application to start while loading those records & unfortunately I didn’t get any solution to that.

After doing a lot of analysis with VirtualizingStackPanel concept that I shared in my previous post “What is Virtualizing StackPanel?” didn’t solve my problem which I was facing due to huge no of data.

Later, I found a very good post (“WPF: Adventures in Virtualization by Mike Taulty”) shared by Dr. WPF on implementing custom Virtual Panel, which actually resolved my problem.

Here you will find some very good articles on step-by-step implementation of Virtual Panel:

Those are very nice articles to implement the custom virtual panel step-by-step & after implementation of this panel, I noticed a huge performance improvement in my application. This really helped me while working with a huge records.

Now, come to the basic concept of this virtual panel. What it actually does. It loads all the records in a different thread & populate them in the UI as much as records that can be viewable in the screen. While scrolling, it actually creates new object of the elements by virtualizing the existing elements. So, only those objects will be in the memory which are available in the screen. The rest will go for a cleanup process. Hence, improving the performance more & more…. depending on the visible UI elements.

See a nice example in this location: http://blogs.msdn.com/jgoldb/attachment/8116217.ashx

Published by on under .Net | Tips

Virtualizing StackPanel generates container items when needed & throws them from memory when they are no longer in the view. When the panel has huge number of items, at that time there is no need to keep the extra items in memory which are not in view. This solves the memory problem.

If you are populating a huge number of items in any panel, then it is a better idea to use the Virtualization. But, due to throwing away of the extra items & recreating them when in view, costs some extra processing power when the Virtualizing StackPanel uses the default Standard Mode. To solve this issue, just change the virtualization mode to "Recycling". This is called as Container Recycling, which introduced in .Net 3.5 SP1 as a new feature.

By default, this recycling mode is turned off. To enable the container recycling, first turn on the Virtualizing StackPanel with “VirtualizationModeProperty” as “Recycling”.

<WrapPanel x:Name="wrpPanel" VirtualizingStackPanel.IsVirtualizing="true" VirtualizingStackPanel.VirtualizationMode="Recycling" />

You can also use GetVirtualizationMode() & SetVirtualizationMode() to get or set the current mode.

Published by on under .Net | SilverlightTips

DependencyProperty is set to enable declarative code to alter the properties of an object which reduces the data requirements by providing a more powerful notification system regarding the change of data in a very specific way. In .NET, there are two types of properties. One is the normal property & another is the DependencyProperty which has added functionality over the normal property.

Now, let us discuss on how to implement such DependencyProperty to give a powerful notification on data change:

First of all, implement the UserControl class from INotifyPropertyChanged interface:

public partial class MyUserControl : UserControl, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Create your own normal Property, lets say the name of the property is “Caption”.

public string Caption

    get { return GetValue(CaptionProperty).ToString(); } 
    set { SetValue(CaptionProperty, value); }
}

Now, register the DependencyProperty to the CLR by calling the Register method by passing the property field that you used to store the data in earlier step:

public static readonly DependencyProperty CaptionProperty = DependencyProperty.Register("Caption", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty, OnCaptionPropertyChanged));

The name of the identifier field of the DependencyProperty will be same as you used in the property after appending “Property” at the end. In this example, our Property name is “Caption”, hence our identifier field name is “CaptionProperty”. Add the PropertyMetaData with default value & callback event handler within the Register method as mentioned in the above code. Mark the identifier as static & readonly so that this will be unique to the CLR.

Now, implement the OnCaptionPropertyChanged event handler:

private static void OnCaptionPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)

    MyUserControl myUserControl = dependencyObject as MyUserControl; 
    myUserControl.OnPropertyChanged("Caption"); 
    myUserControl.OnCaptionPropertyChanged(e);
}

private void OnCaptionPropertyChanged(DependencyPropertyChangedEventArgs e)
{
    txbCaption.Text = Caption;
}

The implementation of the DependencyProperty is complete. You can either call it from XAML:

<local:MyUserControl Caption="My First Dependency Property Example" />

or from Code behind:

MyUserControl myUserControl = new MyUserControl();
myUserControl.SetValue(MyUserControl.CaptionProperty, "My First Dependency Property Example");

Published by on under .Net | Silverlight