Silvelright -set tabindex of UIElements in MVVM

Question

I am trying to set the tab index of two UIElements within a user control. The user control contains a text box and button. I have focus currently being applied to the textbox via an attached property however I would like to have the ability to press the tab key and navigate from the textblock to the button or detect the key press (Enter key) and trigger the command on the button(I know separate question)

The main focus is accomplishing the tab index first.

Thanks for any pointers or suggestions.

UPDATE

I've since tried to employ an attached property to handle the tabbing order

        public static DependencyProperty TabIndexProperty = DependencyProperty.RegisterAttached("TabIndex", typeof(int), typeof(AttachedProperties), null);
    public static void SetTabIndex(UIElement element, int value)
    {
        Control c = element as Control;
        if (c != null)
        {

            RoutedEventHandler loadedEventHandler = null;
            loadedEventHandler = new RoutedEventHandler(delegate
                {
                    HtmlPage.Plugin.Focus();
                    c.Loaded -= loadedEventHandler;
                    c.Focus();
                });
            c.Loaded += loadedEventHandler;
        }
    }

However when this I attempt to compile I receive errors that the TabIndex property does not exist for the button control. Any ideas why this is failing?

score 2 · Answer 1 · edited Aug 21 '13 at 03:43

2

This is a view specific concern and, as such, even in MVVM should be handled at the ViewLevel. MVVM doesn't stipulate that you remove all code from code behind. It simply means you should have a view specific concern when you do put code there. This is one of those cases, imo.

edited Aug 21 '13 at 03:43

Dave Clemmer

3,741
12
49
72

answered May 10 '11 at 21:00

Scott Silvi

3,059
5
40
63

I totally agree Scott and I have heard others voice the same in that if the code is specific to the view it could be handled in the view code behind. – rlcrews May 10 '11 at 21:13
So why are you doing this with attached properties instead of the TabIndex property of the textbox/button? – Scott Silvi May 10 '11 at 21:47
From what I have found, how the user control is initialized (when loaded in a view) "prevents" the TabIndex properties to be set within the xaml. Using Associated properties was the solution I found around this anomaly (at lease with an MVVM project). – rlcrews May 11 '11 at 03:54

score 0 · Accepted Answer · answered May 10 '11 at 21:10

It is late in the day... I resolved this using an attached property. in the above solution I had copied an earlier DP that I created and did not change the code before I tested.

Below is the working solution

I created a attached properties class and then added the following code:

       #region Search Field Focus

    public static DependencyProperty InitialFocusProperty = DependencyProperty.RegisterAttached("InitialFocus", typeof(bool), typeof(AttachedProperties), null);

    public static void SetInitialFocus(UIElement element, bool value)
    {
        Control c = element as Control;
        if (c != null && value)
        {
            RoutedEventHandler loadedEventHandler = null;
            //set focus on control
            loadedEventHandler = new RoutedEventHandler(delegate
                {
                HtmlPage.Plugin.Focus();
                c.Loaded -= loadedEventHandler;
                c.Focus();
            });
            c.Loaded += loadedEventHandler;
        }
    }

    public static bool GetInitialFocus(UIElement element)
    {
        return false;
    }
    #endregion

    #region Tabbing Order of Elements

    public static DependencyProperty TabIndexProperty = DependencyProperty.RegisterAttached("TabIndex", typeof(int), typeof(AttachedProperties), null);
    public static void SetTabIndex(UIElement element, int value)
    {
        element.SetValue(TabIndexProperty, value);
    }

    public static int GetTabIndex(UIElement element)
    {
        return (int)element.GetValue(TabIndexProperty);
    }
    #endregion

The first DP sets the focus of a textblock so that when the user control is loaded you see the cursor placed within the text field.

DP 2 sets the tabbing order. Since the focus is already applied to the current control tabbing falls into place normally. If you did not have focus on the control you would need to set this first.

then finally within the xaml declare your class in the xmlns and add away to the controls.

Silvelright -set tabindex of UIElements in MVVM

2 Answers2