Search code examples
silverlightmvvmtabindexuielement

Silvelright -set tabindex of UIElements in MVVM


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?


Solution

  • 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.