×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

A developer asked me this question and while a simple answer, I thought it would be a good quick tip to share for those who may be in similar situations.

The scenario is the classic master-details scenario where perhaps you have a grid of data and when a user selects the row, the details are enabled in a form (or perhaps the child of the element) for editing.  Maybe something like this:

Master-details Typical view

See you can see the row clearly selected (note: this is using the default DataGrid styling).  But watch what happens when you go to the form to edit:

Focus change on selected row

Notice the focus now on the TextBox in the form, and the row, while still ‘selected’ is much more subtle in which row is selected.  The uninformed eye might miss which one.  For some scenarios this might be important.  Some might even think the row isn’t selected anymore since the visual state changed.

In fact it still *IS* selected and the only thing that changed *IS* the visual state…literally.  Since Silverlight has the concept of the VisualStateManager, that is what we are seeing in action here.  So you want to change that to make your desired UI as expected…having the row retain it’s selected look even when the user is editing.  This is simple.

Using Expression Blend, you can select the DataGrid element and then choose Edit Additional Templates to find the RowStyle template to edit a copy of:

Expression Blend edit template

Once you have this, click the States tab in the tool and you’ll see the various visual states that a DataGridRow can have.  Notice the NormalSelected and UnfocusedSelected states:

Visual States for DataGridRow

You would modify the Fill.Color property of the UnfocusedSelected state to accomplish the desired change.  In this example, I just used the same color as the default grid for illustration.  The end result is what the user may be expecting more.  Notice the focus is on the TextBox in the form still, but the row still has a prominent selected color view:

Fixed focus visual UI

A simple edit, but a helpful UI change to give your users more indication of what they are doing.  Of course I’m just using the default styles of the DataGrid here, but you could use your own styles as well.  Hope this helps!

Here is my style XAML as I completed the task above: StaySelectedStyle.txt



This work is licensed under a Creative Commons Attribution By license.


2/4/2010 1:06 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Hello!

I can't get it to work! Can you give me the row-style code or your sample project, please?

Best Regards
Doug
2/5/2010 11:27 AM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Doug -- done...added the link above.
2/7/2010 10:18 AM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Thank you Tim! :-)
2/13/2010 9:31 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
I completly agree with Morten regarding the automatic row selection. This event should only take place if user initiated.

Imagine if Microsoft designed the button click event to do the same thing? Everytime a page loaded you'd have both okay and cancel buttons clicking.

I haven't found another SL Developer yet who supports this so called "design"...
Gravatar
3/7/2010 7:42 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Why sometime you didn;t have "Edit a copy" enabled ? On my current projet I try this and "Edit a copy" is disable ...but I create a new projet for testing and on Datagrid rowstlye ... I "edit a Copy" is enabled?!
7/20/2010 9:53 AM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Silverlight is so good to use. Microsoft did such a great job with it. I am using it all the time. Thanks for the tips.
9/27/2010 8:01 AM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Silverlight DataGrid quick styling tip keep selected row focus state - Tim Heuer. A developer asked me this question and while a simple answer.
Regards,
christian purity rings
11/20/2010 12:48 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Hi Tim - thanks for another great article! Appreciate it.
Have you seen a way to put a colored border around a row in the SL DataGrid. I'd like to indicate an edit on a row, or an error on a row with a blue or red border, for example.
thanks!
Bill44077
4/1/2012 11:20 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Unser kostenloser Online Tarifvergleich hilft Ihnen die beste Lebensversicherung zu finden. Risikolebensversicherung, Kostenloser-Online Vergleich and Lebensversicherung Vergleich
4/26/2012 2:31 AM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
How do I do this without Expression Blend?
6/4/2014 12:43 PM | # re: Silverlight DataGrid quick styling tip: keep selected row focus state
Thanks Tim.... straight forward answers....and you showed us how to do it in blend as well...

 
Please add 8 and 5 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.