Mindscape Blog » Blog Archive » Tabbing within a WPF Property Grid editor

Tabbing within a WPF Property Grid editor

Here’s a quick tip if you’re creating editors for the WPF Property Grid that contain more than one control. If you want to support tab key navigation between the controls, add the KeyboardNavigation.TabNavigation attached property to the container of the controls, and set it to Local. For example:

<DataTemplate x:Key="PhoneNumberEditor">
  <StackPanel Orientation="Horizontal"
              KeyboardNavigation.TabNavigation="Local">
    <TextBlock>+</TextBlock>
    <ms:TextBox Text="{Binding Path=CountryCode, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" MinWidth="10" />
    <TextBlock> (</TextBlock>
    <ms:TextBox Text="{Binding Path=RegionCode, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" MinWidth="10" />
    <TextBlock>) </TextBlock>
    <ms:TextBox Text="{Binding Path=Number, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" MinWidth="10" />
  </StackPanel>
</DataTemplate>