Skip to main content

Introducing Slex - Silverlight Experimental Hacks – Now you’ve a PropertyTrigger, EventTrigger, InvokeCommandAction etc.

For the last couple of week ends, I was hacking around Silverlight interactions and behaviors. Mainly, the objective was to learn the Interactivity system in depth, and in the process, I’ve done few interesting hacks.

And thus born Slex project, Silverlight Experimental hacks. :). Slex is built on top of System.Windows.Interactivity framework, and supports a couple of interesting Triggers and Actions.

Note: Slex is updated. Please read Slex For Silverlight Preview 2

This is the intro screen of the related demo, and I’ll explain a bit on each item. The download link is towards the end of this post.

 

image

 

As an introduction, here are few cool things you can already do with Slex.

1 – Simple example of an Event Trigger in Slex

Assume that you need invoke a command, when an event is fired. You can do the same by hooking up an InvokeCommandAction inside an EventTrigger (Note that this EventTrigger is a custom implementation in Slex namespace).

 <i:Interaction.Triggers>
            <slex:EventTrigger ElementName="txtData" EventName="KeyUp">
                <slex:InvokeCommandAction CommandName="UpdateDataCommand" />
            </slex:EventTrigger>
        </i:Interaction.Triggers>
Alright, I hope that looks cool. Now, what if you want to invoke the command if and only if a check box (named myCheckBox) is checked, and the user is pressing the 'A' key? Here we go.
 <i:Interaction.Triggers>
            <slex:EventTrigger ElementName="txtData" EventName="KeyUp">
                <slex:InvokeCommandAction CommandName="UpdateDataCommand">
                    <slex:InvokingConditions>
                        <slex:InvokingCondition Property="Argument.Key" Value="A"/>
                        <slex:InvokingCondition ElementName="myCheckBox" Property="IsChecked" Value="True"/>
                    </slex:InvokingConditions>   
                </slex:InvokeCommandAction>
            </slex:EventTrigger>
        </i:Interaction.Triggers>

2 – Simple example of a Property Trigger in Slex

Now, what if you want to fire a command, when a property of an element (or even a property in your View Model changes)? Here we go. You can do the same by using PropertyTrigger.

 <i:Interaction.Triggers>
            <slex:PropertyTrigger ElementName="txtData" Property="Text">
                <slex:InvokeCommandAction CommandName="UpdateDataCommand">
                    <slex:InvokingConditions>
                        <slex:InvokingCondition Value="Hello"/>
                        <slex:InvokingCondition ElementName="myCheckBox" Property="IsChecked" Value="True"/>
                    </slex:InvokingConditions>
                </slex:InvokeCommandAction>
            </slex:PropertyTrigger>
        </i:Interaction.Triggers>

 

As you can see, this will fire your UpdateDataCommand, when the Text Property changes. Also, you may or may not specify the conditions for the PropertyTrigger, just like we did for the EventTrigger.

3 – Simple example of InvokeMethodAction

In the previous examples, we’ve seen how to use InvokeCommandAction to invoke an ICommand in your view model. What about Invoking methods directly in your View Model? Here we go. Consider the following view model, that has a simple Add method to add two numbers.

image

Now, this is how to Invoke Add, so that ‘Data’ will get updated. Here is the UI and the XAML part.

image

As you can see, we have two text boxes where the user can enter the value, and a button where the user clicks to invoke the Add operation. Let us see the Xaml for this.

image

You may notice that, we are sandwiching an InvokeMethodAction inside an EventTrigger for the button click, and specifying the parameters in the order expected. Please note that the number of parameters should match the number of arguments of your Method.

Also, you can either tie your MethodParameterValue against properties of any other UI Element, or may point it to the view model. (Check out the SourceType property of MethodParameterValue).

Concepts - Brief Overview

Presently Slex supports a couple of triggers including

  • EventTrigger – You can tie an event trigger against an element, or against your view model. Fired when an event is raised
  • PropertyTrigger – You can tie a PropertyTrigger against an element’s property, or against a property in your view model. Fired when the property value changes

Also, Slex has a couple of abstract classes, including EventBasedTrigger and ObserverTrigger, and you may use the ObserverTrigger to create custom triggers that make use of System.Reactive extensions. More later.

You can sandwich Actions inside your Triggers. Few actions presently available are

  • InvokeMethodActionInvokes a method in your view model, or a method of a UI Element. You can have a collection of Method parameters in your InvokeMethodAction. See example below.
  • InvokeCommandActionInvokes a command in your view model

All Slex actions supports a set of Invoke Conditions, where you can specify multiple conditions for Invoking the commands.

Conclusion

About the source code - A first source drop is available at http://slex.codeplex.com. Go and click the Download link. Presently the drop is a VS2010 project, but you should be able to make the code run in VS2008 as well, by copying the source files and doing a bit of hacking, and modifying the references here and there.

This is a very very crude version, almost a POC. There are lot of things to do (there are quite a few bindings getting created as of now :)), lot of optimizations to be done, lot of unit tests to be written (I know, there is a suicidal absence of unit tests as of now). Also, I still need to see how this works with Blend :(.

I was talking to Vin for some time about this, and thought I’ll push the first cut any way. And also, blame Jeff too a bit.

I’ll blog soon on some other enhancements I’ve in mind, so follow me in twitter. Also, I’ll explain further few hacks I made around the Rx API, and the Dependency property listening side, by next week end. Happy Coding!!

Shout it

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi