Change label behavior (somehow)

Question

Hi there,

What would I need to do to add behavior or (alternate) styling to the labels (at front of the value control, see yellow label in image below) in LightSwitch.

What I want to accomplish:

- Handle event on click.
- Change Font properties

Is this in anyway possible? (extension control/screen/shell/theme) And where to start.

---

rdk

Answer 1

If you just want to change the font style statically, try Pixata Controls extention.

To change them programmatically, such as on a button click, check out these threads:

http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/d1a65115-5747-4a86-bcbf-b37e5ded8468/

http://social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/thread/1f2dee23-340b-43e0-aabd-82123aac2bc3/

Answer 2

Hi Kyle ls,

I've noticed Pixata Controls but they don't offer the functionality I'm looking for.

I think my question wasn't as clear as it could be. I'm looking for a way to add behavior and styling to the label at front of the value (the yellow label in my initial question).

If I'm not mistaking the two links you provided also concern the value control.

Thanks anyway

---

rdk

Answer 3

So you want "Recipe" in your example to be clickable so that it does something and have it look different than the default? Is that correct?

Answer 4

That's it exactly.

---

rdk

Answer 5

I think you would need to split it into two controls. In the properties of your current text box, change Label Position to None.

Making "Recipe" clickable can be done in several ways depending on exactly what you want to achieve.

1. Add a button and change the control type to Link (Though I'm not sure how you would change the style in this case, maybe Pixata though I'm not sure).
2. Add a button and leave it as a button. Then create an image that is styled like you want and set that as the button image (though as I look to do that now, I can't figure out how to in RC, it used to be in the Properties window in V1).
3. Entities that have static text can have the static text displayed as a link as well. Though getting this to look right is probably very difficult to achieve. I've only seen it done in Data Grids.

I think adding a button and changing it to an image of your styling is the easiest. At least, it was in V1. I'll have to poke around a bit more in RC to see how to achieve this functionality. Unless someone else can chime in and let us both know.

Answer 6

Kyle,

I like your thinking out of the box. But how would one position the button (link/image) at front of the input control. So it would align with the 'normal' labels?

---

rdk

Answer 7

You'll have to play around with it to get it just right. I suggest using the WYSIWYG by debugging the application and going to Design Screen. The below example is a work in progress because it's on a Modal Window which I don't think you can edit from the Design Screen so I'm doing it blind.

It involves a combination of Column and Row Groups. The Row Group being empty except for the Button in the Command Bar.

I've increased the size of my button but you can just keep the default height which should match the Text Box control.

Answer 8

Kyle,

Thanks for your time and effort and determination.

This would indeed be a solution for my question although its a bit to hacky for me. But if I can find no other way I might use it.

Thanks again

---

rdk

Answer 9

No problem.

I agree it's a bit hacky. But Lightswitch being a fairly new product, sometimes the only solution to a problem is a hacky one. For instance, in V1, you could easily add an image to a button through the properties menu. But if you wanted to just display a static image, you needed to write an entire helper class to load it and display it.

Now in 2012 RC, adding a static image is a piece of cake. Though they seem to have removed the functionality to add an image to a button. As the product matures, you will be able to go back and remove hacks that were necessary at the time.

Answer 10

Hi Ralf,

I've posted an example of using VisualTreeHelper to navigate the visual tree of the screen and find the label TextBlock that corresponds to a TextBox.  You may find that approach useful.

---

My Blog: dotnetlore.com Twitter: @DotNetLore

Answer 11

That is pretty awesome. Thanks for sharing!

Answer 12

Nice!

Going to try this out this afternoon. (just back from holiday)

----

(Later that day)

Changed my label (making it blue underlined) and added an eventhandler to capture the leftmousedown and it works like a charm! 

Thanks Jewel