Friday, April 22, 2011

Silverlight 5 : Multiple Click Support aka ClickCount

In the last article I spend some time with you in discussing some Text related enhancements for Developers in Silverlight 5. Today I am going to discuss one more feature of Silverlight 5 in this short post.

Requirement : We need a mechanism to identify count of multiple mouse clicks made by user.

Scenario : Some over enthusiast end users,if the transaction/process is not happening then they always hit button/any other UI control with high enthusiasm (or sometimes anger) several amount of time, Some time these unnecessary clicks becomes headache and sometimes it is useful to trigger some business function as well. So there is good side and bad side of this.

What Silverlight 5 is offering to us? : Silverlight 5 bits are now giving support/mechanism to identify Multiple Clicks made by user.

How it does that? : Inside your class MouseButtonEventArgs which is sealed,exposes one public property of type Integer like this :

ClickFunda

This ClickCount property gives us number of hits made by user via Mouse.

Cool..any sample ? : Here you go !

XAML :

<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="MouseCount" FontSize="20" Margin="5,5,5,5" MouseLeftButtonDown="MouseCount_MouseLeftButtonDown" />   </Grid>

C# :

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     MouseCount.Text = "This Place will show how many times you play with Mouse !";
}

private void MouseCount_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
           // Checks the number of clicks.
           if (e.ClickCount == 1)
           {
               // Single Click occurred.
               MouseCount.Text = String.Empty;
               MouseCount.Text = "You clicked Mouse Once !";
           }

           if (e.ClickCount == 2)
           {
               // Double Click occurred.
               MouseCount.Text = String.Empty;
               MouseCount.Text = "You clicked Mouse Twice !";
           }

           if (e.ClickCount >= 3)
           {
               // Triple Click occurred.
               MouseCount.Text = String.Empty;
               MouseCount.Text = "You clicked Mouse more than 2 times !";
}}
Remember e.ClickCount is a key ! it will give you number of clicks.

Will it work? : Yes ! Here is the output starting from no click to more than 2 clicks …

ItemClick

ItemClick1

ItemClick2

ItemClick3

Wait ! All that glitters is not Gold !! :

My dear friend and fellow Silverlight MVP Kunal Chowdhury written a quick article on “Issues with Multiple Clicks in Silverlight 5”, so read that here and get to know how this e.ClickCounts make life bit difficult for Developers like you and me.

What’s the Problem ? – Debugging ! :

If you observe the code snippet above and article by Kunal which I shared above,you will find that there is a great trouble to your brain while debugging since despite of e.ClickCount > 1 still it always hits e.ClickCount = 1 condition and comes out of the game and Game is over for us since we really can’t debug and see the stuff for e.ClickCount > 1 and here we see the sad story !

Is it a Bug? what can be done to avoid this ? :

Well, As a MVP I see it as functional issue rather than calling it as Bug since functionality is working but issue is coming only while debugging so I feel little awkward to call it as Bug !

Condition to your Breakpoint is the only option I find it suitable at this particular moment unless someone from Microsoft don’t come up with something better to avoid this debug issue. So if I want to check / debug and see some stuff for e.ClickCount then how will I achieve this? .. well all you need to do is just right click and click on Condition like this :

ItemCondition1

ItemCondition2

ItemCondition3

Above screen shows how easy is our life ! So now be ready to debug all that e.ClickCount > 1 stuff which was giving you trouble earlier. Remember that even for Switch..Case it’s the same issue so don’t be under impression that problem will not occur with Switch..Case.

One you done with adding condition, it will be hitting your breakpoint and executing appropriate condition on basis of e.ClickCount value and you can see that output like this :

ItemCondition4

So this is bit schoolish solution but it works in such tricky conditions and we can survive for the time being.

Well,Take the positive part of this wonderful feature and how it is helpful in real business scenario, I personally still have no clue if this is officially marked as “Bug” or not,but this is what came to my observation when I was playing with the bits, I hope in coming RTW bits something will come up for this, Well enough for today and some more such nice features and funny tricky solutions and scenarios are coming up in my upcoming posts,So stay tuned !

Vikram.

Wednesday, April 20, 2011

Silverlight 5 : Improvements in Text

I hope you must have installed Silverlight 5 Beta bits on your machine and wondering what’s new you got in those bits.Well, there are lots of new things hidden inside which are worth exploring.I am doing the same with equal passion and enthusiasm.

Today in this little blog post I am going to talk about some smart improvements for Text.

Character Spacing :

CharacterSpacing is a property of type Integer (System.Int32),If you refer official Silverlight 5 documentation,you will find the definition of CharacterSpacing as :

Gets or sets the distance between characters of text in the control measured in 1000ths of the font size

Let me add some more information here as well since we are talking about stuff from Document. For those who are new to Silverlight 5 documentation you will see following icon :

txticon

In front of many properties you will see such icons, well left side of the icon represents the property as Public property and right side of the icon represents that the property is supported by Silverlight on Windows Phone. Well,coming back to the topic, I hope you got the idea what CharacterSpacing does for you. Its basically help you to manage and have full control over character space of your text in your Silverlight application. Here is how it looks like :

TextImprove1

You can see how the Text gets compressed and expand on varying the CharacterSpacing. Here is a piece of XAML which you can play and checkout how exactly it will look in your application when you implement CharacterSpacing.

XAML :

<Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock FontSize="12" x:Name="myTxt" Grid.Row="0" >
            Silverlight हे सर्व वेब-ब्राउजर वर चालणारे Plug-in आहे, तसेच हे विविध Operating Systems वर ही वापरता येते.
</TextBlock>
<Slider x:Name="mySlide" Grid.Row="1" Maximum="400" Minimum="-400" SmallChange="50" ValueChanged="mySlide_ValueChanged" />

C# Code :

private void mySlide_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    myTxt.CharacterSpacing = Convert.ToInt32(mySlide.Value);
}

Note : CharacterSpacing property can be set from XAML as well.

..and here is the output :

txt1

txt2

txt3

In each of the output shot you can see how the character spacing varies and thus gives you full control over text in your Silverlight 5 Application.Well how you are going to use in your business scenario it upto you only.

RichTextBoxOverflow,Multi-column and Linked text :

Many times we see that inside application for TextBoxes or RichTextBoxes we have massive scrollers since the content is big and there is no facility to handle overflow of the content in the given Text container. So if you see our normal Multicolumn magzines, its sometimes becomes difficult to put Text in that Multicolumn magazine kind of fashion since its difficult to manage flow of text.

With Silverlight 5 you can create wonders, All you need is to set OverflowContentTarget Property and you will be able to handle all linked,multicolumn text without any much heavy efforts.The official Silverlight 5 documentation describes OverflowContentTarge as :

Gets or sets the RichTextBoxOverflow that will consume the overflow content of this RichTextBox.

Let me show you this via piece of XAML here :

<StackPanel Width="400">
        <RichTextBox x:Name="MasterRTB" Width="300" Height="50" OverflowContentTarget="{Binding ElementName='overflowContainer'}">
            <Paragraph>
                    Silverlight हे सर्व वेब-ब्राउजर वर चालणारे Plug-in आहे, तसेच हे विविध Operating Systems वर ही वापरता येते, गेली अनेक वर्षे Microsoft ASP.NET च्या मदतीने आपण अनेक प्रकारचे प्रकल्प कार्यान्वित करत आलो आहोत, काही वर्षांपूर्वी त्याला AJAX ने ही चांगलाच हातभार लावला आहे, आता त्याच धर्तीवर Microsoft आपल्याला Silverlight बरोबर एक पाउल पुढे नेत आहे.
             </Paragraph>
        </RichTextBox>
<RichTextBoxOverflow x:Name="overflowContainer"/>
</StackPanel>

As you can see that I have big chunk of data in <Paragraph> tag and if I look at Dimensions of RichTextBox, there is a fear that either I will loose some of my Text just because it will not fit in or I need to put scrollbar and other stuff. Instead of that now what we can do in this particular example is to add one more control <RichTextBoxOverflow> (You can have multiple RichTextBoxOverflow Controls or even you might want to form chain of those controls which is possible) and set OverflowContentTarget of the base Rich Text box. This will point at where your extra overflow Text should go and then it will flow freely in another text container. Hence with such implementations you can achieve Multicolumn text requirements as well. Here is a small output of above XAML where you can clearly see how text is flowing smoothly across those Rich Text containers.

RTFM

Well, I hope you got these two small features introduced in Silverlight 5 Beta. With this you can move ahead and create PoCs where you can test the capability and power of these features with high design quality keeping in mind. With this I end this post here and by the time you finish exploring this feature I will be back with more new features of Silverlight 5. In coming articles we will also discuss the pain points of each features and how we can address those issues. So see you very soon !

Vikram.

Thursday, April 14, 2011

Silverlight 5 : A step ahead from Microsoft

Hello folks, Hope you all had fun at Mix 11 keynote online/offline. Well almost 10+ hours back Scott Gu announced availability of Silverlight 5 Bits for Public which was formally announced earlier. I have composed few post last night, Just giving final touches, till the time I want you people to get sync with me by downloading Silverlight 5 bits so that we can enjoy it together !

silverlight

What Should be your First Step ? :

Download Silverlight Bits,Videos and necessary documentation from here :

http://www.silverlight.net/getstarted/silverlight-5-beta/

Should I migrate my Silverlight 3/4 Apps to Silverlight 5 ? :

I personally will not recommend that. Silverlight 5 is in Beta right now,so its better to create some smart PoCs and test it out inside out then you can have migration plan in place.

Will these bits will cause trouble to my current Silverlight/WP7/Expression setup ? :

You can run these new bits can parallel without tampering anything from earlier installations. Installations are smooth and straight forward, No complex steps involved.There is a Runtime for Mac OS is made available, check on the link I mentioned above.

What should I have as pre-requisite to go ahead with Silverlight 5 ? :

From tooling perspective, You need to have Visual Studio 2010 SP1,If you don’t have that, please get it today from Microsoft site. Beside that if you know XAML and C# fair enough, it will be smooth learning for those who are going to learn Silverlight 5,I mean to say fresh people to Silverlight Technology.

Silverlight is Core platform for Windows Phone 7, So with this Silverlight 5 anything got added to Windows Phone 7 toolkit ? :

What Microsoft released yesterday was totally to do with Web and OOB Silverlight, There were several announcements made by Microsoft for Windows Phone 7 including Mango update,but this bits have nothing directly to do with that. I will let you know about that in a separate post later.

What am I going to see here on this Blog in coming days ? :

Tons of good stuff including Silverlight 5,Windows Phone 7 and Silverlight 5 + Some third party stuff (Remember my Balder post for Windows Phone 7,Some more coming on the same line).

I will initially going to take a stab at new Silverlight 5 features and then I will take them each one deep dive like I try to do always.

So download bits today from :

http://www.silverlight.net/getstarted/silverlight-5-beta/

..and stay tune for my next post coming up.

Future is Bright .. Future is Silverlight !

Vikram.