Manipulate your ClientID in ASP.NET 4.0

Hi Guys,
While working with ASP.NET, it is a very common issue with the ClientID of each control which is rendered. ASP.NET has its unique logic to generate clientids. It is very hard to predict what client id the page is going to render when it is put in the client side. ASP.NET has an unique naming system, which generates the client ids and sends to the browser based on certain logic. With the introduction of ASP.NET 4.0, the work become very easier. Handling with the client ids are now very easy.


ASP.NET 4.0 comes with a new feature that allows you to specify the mode of the client id for each control. So you will get full control of what id to be rendered in the client side

Every Control of ASP.NET 4.0 comes with a new property called ClientIDMode. It determines how the ClientID will be rendered. Let us discuss about the different modes of ClientID rendering and see how you can use it :

ClientIDMode.Static

In this mode, the control will render the ID of the client side as it is defined in the server side. It comes handy when you dont want to change the id of the client side html controls. In this case, as ASP.NET doesn't takes care of the uniqueness of the control id rendered in the client side, it will be the responsibility of the programmer to uniquely identify each control it defines.

In the above example, I can use

<asp:label id="lblName" runat="server" text="Select Name : ">
<asp:textbox clientidmode="Static" id="txtName" runat="server">
</asp:textbox>
<asp:button onclick="Submit_Click" onclientclick="javascript:return validateName();" 
runat="server" text="PostPage"></asp:button>

In this case the client html will be as :

<input name="ctl00$MainContent$txtName" type="text" id="txtName" /><br/>
 <input type="submit" name="ctl00$MainContent$ctl00" value="PostPage" 
onclick="javascript:return validateName();" />

So I can now easily refer to the control in javascript only using txtName even from external javascript files. Ahh... The problem solved.
READ THE FULL ARTICLE

Fun with Borders - Brushes & Effects

In WPF borders play a vital role. Any design will not be possible without any border in it. WPF border is an Element which allows you to draw a border around an element. In my current application, I have been using lots of borders to adorn the User Interface. Starting from placing borders directly to the Window to putting borders in ControlTemplate of ListBoxItem, borders generally play a very important role in creating better look and feel for the application. In this application you will see how you can use Borders and most of the properties with ease.

Introduction to Borders

Everyone knows what exactly the Border is. It is a rectangular area used to decorate the UI elements. The main difference between a Rectangle and a Border is that Border allows you to add one single child element inside it. Border.Child allows you to include a child DependancyObject inside a Border. Let us see a sample Border:

<border height="50" width="50" x:name="brdElement">  <border.background>     <solidcolorbrush color="Bisque"></solidcolorbrush>  </border.background>  <border.effect >    <dropshadoweffect blurradius="10" color="Red" direction="235" opacity=".5" renderingbias="Quality" shadowdepth="10">  </dropshadoweffect></border.effect></border>

First of all, Width / Height determines the dimension of the Border element. Border.Background determines what will be the color of the Brush which will draw the inside of the Border. You can see the color is Bisque. You can define any type of Brush here. SolidColorBrush takes one Color element(which is here defined as Bisque) and fills the Border Background with that color. There are other properties too like CornerRadius, used to create RoundedCorner Border etc. I will discuss them later in the article.

READ THE FULL ARTICLE

Another Couple of Articles Published @WindowsClient.net

To all my followers. It is nice to see my articles again being selected to www.windowsclient.net again. This time 2 article for me. I am really thankful to the entire team of DotNetFunda.Com, for the honor.

The Articles which are selected :

1. WPF 4.0 : Change SelectionBrush and Carat Color

This article Describes the new addition to SelectionBrush property and allows you to customize it for your own application. The Carat color can also be modified just by disabling the Background color of TextBox and changing color then.

You can find the detailed description of these two properties introduced with WPF 4.0 with Sample Application to try.

READ THE COMPLETE ARTICLE


2. Understanding the Converter in DataBinding

The second article is regarding the Converter, which allows you to manipulate data of already bound properties just before it actually applies to it. Thus this might be used to change/increase/ decrease value of the actual bound property to have a customize DataBinding. Converters are created using IConverter interface, which allows you to pass value of the bound object with CoverterParameter. The return value of the interface will be set to the bound object.

See in this article I have described how you can easily change the value of Brush, TextSize, Border Size using simple demo applications. You can try out that to see the use.

READ THE FULL ARTICLE

Thank you for reading.

Create a Base Window / UserControl in WPF

Hi Guys,

While doing your program, you must have found problems creating a BaseWindow Class which we do very easily in our ASP.NET application. WPF throws a nasty error when we just modify the Base Class of a window in code behind to one which is created custom to us. Even I got the same few days back. Thank god I finally got it solved with some trick. But its very much required for our program, to make it cleaner and less laborious. In this article, I am going to share with you this little trick which might come very handy to anyone....

Download Sample Application

Article Selected @Windowsclient.net Again.

It is amazing to find articles selected in www.windowsclient.net. Today, I am very pleased that another article just been selected as Article of The Day in the site.

I must thank DotNetFunda, Mr Sheo Narayan (The Founder of dotnetfunda.com) for his support.
I hope you will find the article useful to you.

The article defines how you can use Converter in your Binding to allow / manipulate data before actually reflect to the UI. You can find few samples, probably one which changes the Brush of the Background in border, one for Text size ratio, and final for Border. You can try out the sample application and also read the article from the link below.

READ THE FULL ARTICLE

Resolution Independent Layout Fix in WPF

It is very important to keep track of Operating System Resolution while building one application. We do lots of things to make the application work the same way in various ranges of Operating System Resolutions. For WPF developers, it is quite obvious to miss out the Anchor and Dock properties, which is present in Windows Applications but quite annoyingly absent here. The result of this is, when we change the Resolution of the Display, the UI of the application gets waked up abruptly.


"Oh god, how can I solve the same problem once again" --- This is what I thought after I built a brand new application altogether tested it in various Resolutions that is supported in my machine, and saw that it just didn't worked in a machine of one of my colleague. Well, even I thought of changing the machine resolution to something that suits my application and revert it when application closes ( Just like what DirectX games does).

The idea was good, but this would slow down performance, and also make other programs running in the windows unusable. I was very worried for the last couple of days, until today, I found a way of eliminating the problem using ViewBox.

While development of UI, I always liked to avoid ViewBox, as ViewBox generally changes the normal behavior of the UI elements. But strangely enough, I found that is the only way to make the UI look the same in all other Resolution possible.

<viewbox stretch="Fill">  <grid width="600"> Height="800">  </grid></viewbox>

Using ViewBox makes it Resolution Independent

If you see this minutely, the UI is same as we do normally, but I just wrapped around the existing UI with a ViewBox with Stretch property is set to Fill. Thats all, you need.

You can check the UI in different Resolution, and I bet, it will look the same way in all.

Points to Remember

You should remember to create the UI with the resolution for which the chances of getting it is the most. Say you think you will have more customers using 1024 x 768 than 1400X900, then it is recommended to set the height and width of the Grid inside the viewbox with this. Actually, ViewBox stretches the existing UI to fill up the space. This might sometimes create the UI look hazy. So more and more dispersed Resolution than the mean, will lead to more and more unclear User Interface. As the ViewBox will stretch the existing UI from the original content, so it is always good to choose a resolution which is very common to users.

Another point is while using ScrollViewer inside your grid, please ensure you specify the Height of it. In fact if ViewBox finds a ScrollViewer inside it without height specified, it will shrink the existing control directly without scroll bar being generated. This would look weird, so please take care of it.

Try out the Sample Application

Download Source


READ THE FULL ARTICLE

How to use IValueConverter in Binding of WPF

 In this article I am going to discuss about how we can use Converter to evaluate the Binding of elements in WPF. All of us are well aware of superior Binding Capabilities that is supported with WPF. I found it very exciting when I saw it for the first time. It seemed to me a great way to define everything in XAML rather than handling events so much in Code-Behind. Right now, I try everything that regards to UI level changes, I always try to do it using XAML first.

XAML comes with lots of Markup Extensions. Anything that is placed within the curl braces ( { } ) are defined as Markup Extensions. They are derived from the Class MarupExtension, and the properties are defined directly for them within the brackets. Binding is also a Markup Extension for which ElementName, Path, etc are members. Among the members, Converter and ConverterParameter is what we are going to discuss here in this article.

IValueConverter

Converter is actually a property within the Binding Markup Extension. Its type is defined as IValueConverter. Every time the bound data elements refreshes its value it passes through a method Convert which is defined inside the object Converter (if found). Thus Converter acts as an interface to manipulate the actual data before passing it to the property.

public class MyConverter : IValueConverter
{
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double passedValue = (double)value;
            double parameterValue = (double) parameter;
            return passedValue - parameterValue;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            
            double passedValue = (double)value;
            double parameterValue = (double)parameter;
            return passedValue + parameterValue;
        }

        #endregion
}

Here in the code above I have defined a converter MyConverter, which does nothing but implements IValueConverter, which enables you to make use of it with Converter. The Converter here does nothing but implements two methods, Convert and ConvertBack. Convert is called when the value of the property is updated when the bound object value is changed. ConvertBack will only be called when the Binding Mode is set to TwoWay, and will be called only when the bound property changes its value.  The object value points to the value of the property passed in, TargetType is the type you have to return to the Target, parameter is defined from ConvertParameter and Culture is the UICulture.

To use the Converter you need to create a resource of the object. Thus in XAML you need to declare :

<local:myconverter x:key="resMyConverter">
</local:myconverter>

Where local is the namespace added which points to the Current Namespace. Finally to define the Converter, you need to use this as StaticResource in the Converter.

Height="{Binding ElementName=win, Path=ActualHeight, Mode=OneWay, Converter={StaticResource resMyConverter}, ConverterParameter=10}"  

Remember one thing, in the above line, you need to make sure you are clear about what you are sending. In this case, we are binding Height with the ActualHeight of the element win. So, in the arguments of Convert, you will receive a double value with current ActualHeight, and you are going to return the value that you want to be set to Height. So actually you are sending a double value and returning another.

The above figure demonstrates how you are going to send data to Convert method.The ActualWidth (Marked with Blue) is sent to object value, TargetType will be Double which is based on the Type of Width Property, parameter receives the value 50 passed with ConvertParameter, and the culture is the UICulture of the Current Thread.

The ConvertBack is used to be called only when you need the reverse. So if your Mode is defined as OneWay, your ConvertBack is not actually required.

You can try the sample application from here

Read the Full Article

Another article Published @WindowsClient.net

It is always nice to see an article published in Windowsclient.net. And if it happens so quickly, it is even better. I have just demonstrated the use of Multilingual applicaiton using WPF. It is just the login screen, where you can give user id and password. The static elements are fetched from Resource files.

The figure in the right shows how the UI looks like, when you run the application. The static elements are dependent on the Current UI culture. If we make the current regional settings as French, the UI elements will look as french.

The resources will be loaded dynamically using Thread.CurrentThread.CurrentCulture.

You can read the complete article from

Simplest Way to Implement Multilingual WPF Application


I would also like to Congratulate all my followers, Mr Sheo Narayan, Abhijit Jana, who always appreciated my work all the time.


Thanks for reading.

“Article of the day” @ Microsoft’s official website www.windowsclient.net

Guys, I am very thankful to Mr Sheo Narayan (The Founder of DotNetFunda), and Dotnetfunda team, to nominate my article to be published in MS Official Site www.windowsclient.net.

Today, it is selected as "Article of the Day" in the site. The article is describes how we can implement Asynchronous Call to methods using Delegates. I have used BeginInvoke and EndInvoke which implicitly creates a new Thread from ThreadPool and invokes the method.

You can see the article from here. Dont forget to put your feedback.

Asynchronous Method Invocation

Multilingual Application using WPF

Creating a multilingual application using WPF is a very common issue to everyone. While creating an application, it is quite natural to create an application that has Multilingual Support and which would respond to Current Culture settings in the client computer. In this article, I am going to discuss how to implement a multilingual application.

In the above snapshot you can see a login screen that I have implemented to demonstrate the application.
Try out the sample application from here.

Read Full Article.

Try Text to Speech for your application

It is really easy and fun to create applications that speaks out for you. With the introduction with System.Speech, it seems to look like even better. It is to be noted, that Windows Environment comes with a unique feature that converts your voice commands to text equivalent long before the introduction to this in .NET. I will discuss now how you can easily use this in your application and get the work done quickly.

Background

Windows Speech Recognization Engine and Narrator utility comes with Windows XP service pack 2 or Office applications. Windows Narrator uses various windows items and speaks instantly. If you have never tried with it, it is time to try it first.

Open Start - > Programs -> Accessories - >Accessibility -> Narrator

After opening you will hear that a person is speaking out some weird terms. Actually this is nothing but your narrator speaking to help you. Actually the checkboxes determines various options like, reading events, Read typed characters etc. You can even change the narrator just by clicking on the Voice Button.

Here you can see Microsoft Sam is listed. This is the default .NET narrator. You can adjust speed, volume, pitch etc of the listed Narrators. You can also add some external Narrators for you if you wish. Now I am going to show you how you can invoke Narrator to be used in your own application.

Old Way
If you are not using .NET Framework 3.0 or above, this must be your only way to do this. First in this case you need to install Speech SDK 5.1. The speech SDK gives you the interface to work with SPVoice commands. The Speech SDK provides you two interfaces. One is for Text to Speech Conversion, while the other is for Speech Recognisation. In this article I am going to discuss only Text  to Speech Conversion.

To do this, first create the Interop to the COM dll that comes with SAPI named speechlib.dll. You need to right click on your project, add Reference and add "Microsoft Speech Object Library" from COM tab.
After you add Interop.Speechlib.dll in your application you need to use some simple lines of code as below to run your application :

using SpeechLib;
SpVoice speech = new SpVoice();
speech.Speak("Hello World",SpeechVoiceSpeakFlags.SVSFlagsAsync);
speech.WaitUntilDone(Timeout.Infinite);

Thus if you run the above application, you will find that Microsoft Sam will say you "Hello World".

NEW Way

With the Introduction of .NET Framework 3.0, Microsoft released Managed API to handle these through your program and it doesnt need anything to be installed. Let us look how we can invoke using the new way.

First Add Reference to System.Speech.dll. You will find that in GAC if you have installed .NET 3.5 to your system.

As shown in the figure, after you add the dll you need to use some simple methods to invoke Speech To Text for your application. 

To invoke this, you need to know about a class called SpeechSynthesizer. This is the main class to handle speech requests from the application and invokes the Narrator utility itself with configured narrator. 

You can configure voice, speech, pitch of the narrator, and change the Narrator voice itself using the object of SpeechSynthesizer class.

Let us see how the code look like :

using System.Speech.Synthesis;

SpeechSynthesizer spsynthesizer = new SpeechSynthesizer();
List<voiceinfo> lstVoice = this.LoadSelectVoiceMenu();

Now when you want to invoke the Speaking utility just call :

spsynthesizer.SelectVoice(lstVoice[0].Name); //Invoke the one which you want
spsynthesizer.Volume = 50; // Can be 1 - 100
spsynthesizer.Rate = 3; // can be 1 - 10 
spsynthesizer.SpeakAsync("Hello World");

The SelectVoice method is used to choose the appropriate Narrator. If you have more than one narrator, you can use this method to SelectVoice. I have used lstVoice[0] which should point to Microsoft Sam. The volume determines the volume of the voice, and Rate determines how fast the narrator speaks.

To Speak out the text, you have two method. I am using SpeakAsync, to call it asynchronously. You can also use Speak itself, which will wait until the text is spoken. While the text is been spoken using SpeakAsync, you can all SpeakAsyncCancel or SpeakAsyncCancelAll anytime to end the narrator instantly.

spsynthesizer.SpeakAsyncCancel(new Prompt("Lets End"));

if invoked will end the SpeakAsync and prompt Lets End.

Conclusion

Thus invoking a Text to Speech for your application become easiest like never before. You can use this without any heck.

In my next entry, I will be discussing about Speech Recognisation. So stay tune.