tags:

views:

34

answers:

2

Kind of new to WPF and I am working on an app that has a general user input form and a "details" section that is hidden in an Expander. I am trying to get it so that if the user Tabs into the expander control it will automatically expand and put focus into the first control within that expander.

Some stripped down XAML:


<StackPanel>
    <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition Height="24"/>
           <RowDefinition Height="24"/>
       </Grid.RowDefinitions>

       <Label Content="Email" Grid.Row="0" Grid.Column="0"/>
       <TextBox Grid.Row="0" Grid.Column="1"/>

       <Label Content="Department" Grid.Row="0" Grid.Column="2"/>
       <TextBox Grid.Row="0" Grid.Column="3"/>

       <Label Content="Contact Name" Grid.Row="1" Grid.Column="0"/>
       <TextBox Grid.Row="1' Grid.Column="1"/>

       <Label Content="Phone Number" Grid.Row="1" Grid.Column="2"/>
       <TextBox Grid.Row="1" Grid.Column="3"/>

    </Grid>

    <Expander ExpandDirection="Down" IsExpanded="False" Header="Details">
          <StackPanel Orientation="Horizontal">
               <Label Content="Address"/>
               <TextBox />
               <Button Content="Add Another" />
          </StackPanel>
    </Expander>
</StackPanel>

What I would like to do is that if the user is currently entering in the Phone number and hits tab the Details Expander should expand and put focus into the Address's text box. I've tried setting TabIndex and playing with KeyboardNavigation.Tab... without any luck.

Any ideas how to do this?

A: 

I don't think there is a pure Xaml approach for this. You may have to handle the expander's GotFocus event to 1) expand the expander, and 2) the call the Focus() method on the first control.

SergioL
@SergioL I tried adding a GotFocus event to the expander but when I am using the MoveFocus it is passing focus outside of the expander. Any thoughts on how to send focus to the controls inside the expander?
Adam
+1  A: 

Replace your Expander with following XAML using an EventTrigger and a Storyboard:

<Expander ExpandDirection="Down" 
          IsExpanded="False" 
          Header="Details">
  <Expander.Style>
    <Style>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Expander.GotFocus">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <BooleanAnimationUsingKeyFrames
                   Storyboard.TargetProperty="(Expander.IsExpanded)">
                   <DiscreteBooleanKeyFrame
                     KeyTime="00:00:01"
                     Value="True" />
                </BooleanAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>                            
    </Style>
  </Expander.Style>
  <StackPanel Orientation="Horizontal">
    <Label Content="Address"/>
    <TextBox />
    <Button Content="Add Another" />
  </StackPanel>
</Expander> 
Zamboni
This works great. Thanks Zamboni.
Adam