Targeting Other Elements via the Blend 3 UI
June 6th, 2009 | 11 Comments
In an earlier post, I described how you can change what your EventTrigger and Action (based on TargetedTriggerAction) can target. You can get into various interesting scenarios where what your Action is attached to is not the element your Trigger is listening for events on, nor is the element your Action is attached to the one that gets affected by whatever the Action does.
What I have not done is described how you would actually be able to do this using the Blend UI. That seems kinda important! Let’s say you have an Action (which derives from TargetedTriggerAction) applied to a Button. If you select the Action and look over in the Properties pane, you would see something similar to the following image:
The two properties that allow you to target other elements are SourceName in the Trigger category and TargetName in the Common Properties category:
By default, both of these properties are set to target the Parent. Parent is the element your Action is applied to, but you can change what your element targets in two ways.
The Select Element Dialog
In the MIX release of our Blend 3 Preview, one approach was by hitting the little … button and launching the Select Element dialog:
The Select Element dialog provides you with a copy of your object tree with all visual elements displayed. The emphasis on “visual” is important because your object tree today displays non-visual content such as behaviors, and you will not be able to select them via the Select Element dialog.
This dialog is great for being able to pick from a large list of elements or to pick from an element whose name you know but cannot actually see on the artboard. For example, think of a circle whose opacity is set to be fully transparent. Unfortunately, these are edge cases. We didn’t want the only way to be able to target other elements to be one that was optimized for edge cases! To deal with this, shortly after MIX, we decided to add another way for you to be able to pick elements to target, and that is the Artboard Element Picker.
Artboard Element Picker
Like I briefly mentioned in the last paragraph, the Select Element dialog is primarily useful for a few edge cases. The most common case is one where you want to select an element that you have visible on your design surface. To help with this, we introduced the Artboard Element picker, and it can be accessed via the the bulls-eye icons you see inside the SourceName and TargetName properties:
When you click on either of these icons, you enter a special element selection mode where your mouse cursor changes to that of a bulls-eye, and you can move your mouse cursor over any element on the artboard to select it:
Notice that, now, I simply point and click at the element I want to target, and that is pretty convenient when what I want to target is clearly visible. If you have a lot of elements that possibly overlap, such as the four overlapping squares I have in my example, you can always hit the Ctrl key and click to display a menu of elements under the mouse cursor that you can select:
You also have the ability to use the Artboard element picker on the Object tree itself. You would think with the name of “Artboard Element Picker” you would be constrained to just the artboard, but you are not:
The cursor displays the cancel sign when you hover over areas outside of the Artboard or Object tree, so it isn’t possible yet to select other types of things you may want to target.
Conclusion
Hopefully, this post helped give you a glimpse of what we are doing to make it easier for you to use Behaviors by presenting you with two ways you can easily use the targeting functionality our API provides. There are other niceties that we’ve added for Behaviors that I will describe in some more detail shortly.
Thanks,
Kirupa 
June 7th, 2009 at 3:40 pm
Is this all coming to the Expression Blend 3 RTM?
June 7th, 2009 at 10:55 pm
I hope so! Unless we find some last minute issue with it, expect to see it in our next release of Blend 3
June 10th, 2009 at 10:46 pm
Great work on Silverlight/XAML/Blend. But can you guys please do something about the awful design of Blend?! It’s ironic that the very program that’s supposedly made for designers has the worst interface itself. I do 99% of my XAML in VS just because I can’t stand Blend; I probably won’t be purchasing it again until the design improves. The look of the versions so far have been horrible, and the difficulty of easily distinguishing elements in the interface is not conducive to getting work done in that program. Please change it for the next version.
June 10th, 2009 at 11:35 pm
Hi justme!
What in particular about the Blend UI do you find jarring? Is it just the inability to easily distinguish elements in the interface?
Thanks,
Kirupa
June 11th, 2009 at 11:23 pm
Hey Kirupa—
First, thanks for the asking. This asking for—and responding to—customer feedback that all the product teams having been doing in recent years is a great way to do business.
Regarding what’s bad about the Blend UI, I’d preface the answer with a few things:
1) In an anthropology journal article (from many years ago) about defining what a city was in Mesoamerica, there was a statement, “Everyone knows what a city is, except for anthropologists.”
2) In the 80s, I believe it was the former US Attorney General Ed Meese who, when asked what defined pornography (his office wrote a report on the subject), he responded, “I know it when I see it.”
3) And finally, I think it was Count Basie who, when asked, “What is jazz?” replied, “If you have to ask, then you’ll never know.”
Guess I’m trying to say that I’d hope people there could and would see what’s wrong with the design. But of course that doesn’t directly answer your question. Is it just the difficulty in distinguishing the text/controls/etc.? Well, isn’t that enough?
Okay, to try to articulate what it is:
1) In general, the dark design (even with the “Expression Light” option) = a big NO! You have to admit that it’s not the norm for an application. Yes, I know that there’s this “new black” that’s a little bit in fashion (e.g., http://www.microsoft.com/express/sql/default.aspx), and if you happen to like that and find it conducive to easily reading things on the page, then we’ll chalk it up to just a matter of differences in taste.
2) The white print on the dark background that’s on the menus, etc. also = a big NO! You have to admit that it also is not the norm these days. Had a programmer co-worker around 1990 who had his Windows settings to be white print on dark background because he was so used to the white print on a monochrome terminal screen. But there’s a reason why it changed once we had options: namely, it’s that very few people like it.
Also, true contrast between the print and background would be good. This is mentioned because—like this “new black” look mentioned above, there’s been of late this washed-out gray print that’s used on many web sites. It’s not easy to read like distinct, well-defined, dark print. An example would be like the print on the start-up dialog box of Blend. Although not exactly the same gray print I’m talking about here, a similar thing would be the blue print on a blue background that Office 2007 had. Even with all the great integrated features of Office 2007, I’ve used Office XP (2003) for the last six years, because I didn’t like the look of 2007, and I know a few colleagues who said they didn’t switched either for the same reason.
3) Because I’m trying to put into words what I don’t like about the Blend look, guess I’d also say that I prefer the list of Silverlight controls in the VS toolbox better that the list of icons that are in the side panel (toolbox, maybe you call it a palette?). But that’s no biggie, because, as stated, I can and do use VS anyway.
To improve the Blend UI would be to offer the option (like you have with the “Expression Light” option) to set the interface to what is a normal look of programs these days (and has been for many years): a pleasant, easy-on-the-eyes color scheme with dark print on a light background.
I know people don’t like change, even when the change is good. However, change can result in (a) an improvement, (b) no real difference, or (c) making things worse.
Also, have you ever noticed how sometimes that it’s the College of Architecture building on a university campus is the ugliest building on campus? Or that it’s fashion designers or hair “stylists” on television that dress the most clownish and have the god-awful, lawn-mower, chemo therapy haircuts? Please don’t let your designers make all the decisions.
To end on good note, I greatly admire you, your co-workers, your company, and all the cool products that have been coming out in recent years.
And to specifically state what’s nice about Blend. Doing storyboards in Blend can be a big plus and a time-saver.
The other main reason for me to use Blend is the ability to build up a control piece by intricate piece, then group them together into one item. And then to be able to take the elements apart again, alter them, and/or apply code/behaviors/etc. to just that one part—well, that’s just awesome.
Another thing I very much like is the information and training that is provided on these rapidly-coming-out products. Even with all the great videos/tutorials/info, it’s been difficult to decipher it all, what’s needed and useful to me, and then to learn the new thing(s). Sometimes, I’ve spent time on trying to figure out something only to find out that it’s not something I really need and can use in the first place. Also, there are completing ways to the same things, and trying to learn about them and decide which is appropriate is time-consuming.
I almost wish you guys would slow down. Note that I said, “Almost!” But seriously, that might be a good idea, huh? Anyway, sorry for the verbosity, and thanks for the great products.
After you read this, please feel free to remove this comment and my last one from your blog. Just wanted to provide feedback. These comments are more suitable for an email message, but I didn’t know your address.
June 12th, 2009 at 9:24 am
Thanks for the great comment justme. I’ve forwarded this to my colleagues
June 19th, 2009 at 7:56 am
Your behaviors are very easy to use and have helped me to understand much in this environment. I am new to Silverlight and Blend 3. I am using the DragBehavior in moving an object on a canvas. The objects keep disappearing at random points on the canvas. Two questions: 1. have you any idea what might be causing this to occur?
2. How would I debug this behavior?
Thanks
Bob
June 21st, 2009 at 1:15 am
Hi Bob – that issues seems pretty bizarre. Would it be possible for you to e-mail me a subset of your project that exhibits this problem to kirupac[at]microsoft.com?
Thanks,
Kirupa
September 22nd, 2009 at 4:13 pm
How do I use the picker with my own custom properties? I have a set of design assemblies for my API, and I would like to be have the same picker one of my custom properties.
Our controls often knows how to talk to each other, so we use element binding to bind one control to another. However in Blend, this property will show a big “New” button that you think you need to click. Unfortunately that creates a new control. You need to know to press the little … and then find your way into the element binding. It would be SO much easier if I could just have the target icon, and then allow the user to click on any control of a certain type that matches that property. However I haven’t been able to find a way to hook into this.
September 24th, 2009 at 4:38 am
Hi Morten – you can do that by using the CustomPropertyValueEditor attribute we ship as part of our Behaviors assemblies.
Here is an example:
[Category("Common Properties")]
[CustomPropertyValueEditor(CustomPropertyValueEditor.Element)]
public string NameField
{
get;
set;
}
[Category("Common Properties")]
[CustomPropertyValueEditor(CustomPropertyValueEditor.Element)]
public string PasswordField
{
get;
set;
}
We provide extensible value editors for element name, states, and storyboards. You get the same UI Blend provides in the properties inspector when you attach one of these attributes to an existing type.
Cheers!
Kirupa
December 3rd, 2009 at 11:32 pm
I understood how to apply the Artboard Element Picker to the custom properties in the custom behavour by using the [CustomPropertyValueEditor(CustomPropertyValueEditor.Element)] attribute.
But how can I populate the properties of the selected element in the combo box below when user select an element using the Artboard Element Picker? .
Thank in advance
Abhilash R