Tab Navigation with MulticolumTreeView

Hello,
I tried to realize tab navigation (like excel navigation along the row and at the end jumping to the begin of the next row) for the MC TreeView. My approach is geared to this: http://www.mindscape.co.nz/forums/Thread.aspx?PostID=1402

C#
private void TabForward(object sender, KeyEventArgs e) {
 TraversalRequest tr = new TraversalRequest(FocusNavigationDirection.Next);
 ((TextBox)sender).MoveFocus(tr);
 while (Keyboard.FocusedElement.GetType() != typeof(TextBox))
 {
  ((UIElement)(Keyboard.FocusedElement)).MoveFocus(tr);
 }
}

XAML
<....Resources>
 <DataTemplate x:Key="NameTabFieldTemplate">
  <TextBox x:Name="NameField" Text="{Binding Name}" BorderThickness="0" PreviewKeyDown="TabForward"/>
 </DataTemplate>
</....Resources>

...

<ms:MulticolumnTreeView Name="treeView" ItemTemplate="{ms:ChildPath Children}" Grid.Column="2" Grid.Row="8" ExpandingDecorator="{StaticResource ArrowExpandingDecorator}">
 <ms:MulticolumnTreeView.Columns>
  <GridViewColumn CellTemplate="{StaticResource NameTabFieldTemplate}" Header="Name" />
  <GridViewColumn CellTemplate="{StaticResource TypeTabFieldTemplate}" Header="Type" />
  <GridViewColumn DisplayMemberBinding="{Binding Whatever}" Header="Textfield" />
 </ms:MulticolumnTreeView.Columns>
</ms:MulticolumnTreeView>

Hope you can help me. Thanks.
Stefanie

I think you can do this without having to drop down to low-level keyboard handling.  Here is what I did to enable tabbing between text boxes within the MulticolumnTreeView:

* On the MultiColumnTreeView, set KeyboardNavigation.TabNavigation="Contained" (you can probably use "Continue" as well if you want people to be able to tab past the end of the grid)

* Create or modify the ItemContainerStyle, to set KeyboardNavigation.TabNavigation="Continue" 

That's sufficient to give me the Excel-style "tab along rows and then to next row" behaviour which is what you're after.

The one snag is that by default when you tab from one row to the next it will initially set focus on the expand button if there is one.  This may or may not be desirable -- it allows keyboard-only users to expand rows, but may appear as a mysterious break in navigation to many users (especially since the default expander provides no visual cues that it is focused).  To fix this, use the ExpandingDecorator property to create a custom DataTemplate (there's an example of this in the Elements sample) and ensure that either it is not a tab stop or that it provides visual feedback when it has keyboard focus.

Let me know if this doesn't work for you or if run into any problems. 

Hi Ivan,

I tryed it the way you described the solution, but it didn't work. So I attatched my project. Since I use the Composite Application Libary to load my modules, I'm not sure if you can run the project.

For that case - the important LOC:

<Style x:Key="CustomMulticolumnTreeViewItem" TargetType="ms:MulticolumnTreeViewItem">
 <Setter Property="Template">
         <Setter.Value>
                 <ControlTemplate TargetType="ms:MulticolumnTreeViewItem">
                         <Border Margin="0,2,5,2" Background="Transparent" BorderThickness="0">
                              <Grid>
                                  <StackPanel>
                                       <GridViewRowPresenter Name="PART_Header" Content="{TemplateBinding Header}"
                                           Columns="{Binding WrappedColumns, RelativeSource={RelativeSource AncestorType={x:Type ms:MulticolumnTreeView}}}"
                                           KeyboardNavigation.TabNavigation="Continue" />
                                       <ItemsPresenter Name="ItemsHost" />
                                  </StackPanel>
     </Grid>
    </Border>
   ...
         </Setter.Value>
 </Setter>
</Style>

<ms:MulticolumnTreeView Name="treeView" ItemTemplate="{ms:ChildPath Children}" Grid.Column="2" Grid.Row="8"
 ExpandingDecorator="{StaticResource ArrowExpandingDecorator}" KeyboardNavigation.TabNavigation="Continue"
        ItemContainerStyle="{StaticResource CustomMulticolumnTreeViewItem}">
        <ms:MulticolumnTreeView.Columns>
         <GridViewColumn CellTemplate="{StaticResource NameTabFieldTemplate}" Header="Name" />
  <GridViewColumn CellTemplate="{StaticResource TypeTabFieldTemplate}" Header="Type" />
  <GridViewColumn CellTemplate="{StaticResource MekTabFieldTemplate}" Header="Maschineneinzelkosten" />
  <GridViewColumn DisplayMemberBinding="{Binding Whatever}" Header="Textfeld" />
 </ms:MulticolumnTreeView.Columns>
</ms:MulticolumnTreeView>

Thanks for your help. Stefanie

Hi Stefanie,

The missing piece of magic is in your CustomMultiColumnTreeViewItem style.  You need to add the following line to your Style:

<Style x:Key="CustomMulticolumnTreeViewItem" TargetType="ms:MulticolumnTreeViewItem">
  <Setter Property="KeyboardNavigation.TabNavigation" Value="Continue" />
  <Setter Property="Template"> ...

Note that setting KeyboardNavigation.TabNavigation="Continue" on the GridViewRowPresenter in the custom template is *NOT* sufficient (or necessary).  It must be on the MulticolumnTreeViewItem *itself*, i.e. directly in the ItemContainerStyle.

When you do this, you will discover one other problem: when the tree is expanded, tabbing behaves column-wise, not row-wise!  The reason for this is that you have specified explicit TabIndex values in your DataTemplates.  WPF is interpreting these at global level, so that all of the Name text boxes have TabIndex 1 and therefore come before any of the Type text boxes which have a TabIndex of 2.  You do not need to explicitly specify tab indexes because when WPF lays out the controls it does so in a left-to-right, top-to-bottom order which will give you the correct tab order anyway; removing the TabIndex properties will restore correct behaviour.

Finally, unrelated to the MulticolumnTreeView, but a minor style suggestion for your focus highlighting: instead of using the GotFocus and LostFocus events to change the background of your text boxes, consider encapsulating this into a style and a trigger:

<Style x:Key="FocusableEditCell" TargetType="TextBox">
  <Setter Property="BorderThickness" Value="0" />
  <Style.Triggers>
    <Trigger Property="IsKeyboardFocused" Value="True">
      <Setter Property="Background" Value="Beige" />
    </Trigger>
  </Style.Triggers>
</Style>

<DataTemplate x:Key="NameTabFieldTemplate">
  <TextBox x:Name="NameField" Text="{Binding Name}" Style={StaticResource FocusableEditCell} />
</DataTemplate>

This keeps your visual design nicely separated from the behavioural logic.  (I realise this is a test project so apologies if you know this and just didn't feel like bothering for the test project!)