Focusing Listbox item when a control is clicked inside datatemplate

Question

I have a button and on click of button a popup opens up which has a listbox. The items inside the listbox is templated and the template contains a date picker and 2 textboxes to enter date, the hour and minute.

The issue I'm facing with this is this - what ever I do on my datepicker or textboxes, the listbox item does't get focus unless I somehow explicitly click on the spaces btw the controls. Question is-how do i set the listbox item to be the selected item when any of the controls inside the datatemplate is clicked/focused? Please note that I follow MVVM.

Code:

ListBox:

   <ListBox x:Name="AsOfList" SelectedItem="{Binding SelectedAsOfDate}" ItemsSource="{Binding Path=AsOfDates}"/>

DataTemplate:

<DataTemplate DataType="{x:Type Domain:UserDefinedDate}">
   <DatePicker DockPanel.Dock="Left" Name="AsOfDate" Width="115" SelectedDate="{Binding SelectedDate, 
                UpdateSourceTrigger=PropertyChanged}" SelectedDateFormat="Short" FirstDayOfWeek="Monday" />
</DataTemplate>

Button:

  <Button Grid.Row="1" Grid.Column="1" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" Name="SelectedDate" Click="SelectedDate_Click" 
                ToolTip="{Binding Path=AsOfDateViewModel.ToolTip}">
            <Button.Content>
                <DockPanel>
                    <TextBlock Text="{Binding Path=AsOfDateViewModel.DisplayText}" />
                    <Image Height="10" Width="10"  Source="Down.png" />
                </DockPanel>
            </Button.Content>
        </Button>

Popup:

<Popup x:Name="DateSelectorPopUp" PlacementTarget="{Binding ElementName=SelectedDate}" StaysOpen="False" 
       IsOpen="{Binding Path=AsOfDateViewModel.IsOpen}" >
    <Views:AsOfDateSelector Width="Auto" DataContext="{Binding Path=AsOfDateViewModel}"/>
</Popup>

dkozl dkozl · Accepted Answer · 2014-02-24T19:35:17

You can start BooleanAnimationUsingKeyFrames animation to set IsSelected when GotKeyboardFocus is triggered on ListBoxItem:

<ListBox x:Name="AsOfList" SelectedItem="{Binding SelectedAsOfDate}" ItemsSource="{Binding Path=AsOfDates}">
   <ListBox.ItemContainerStyle>
      <Style TargetType="{x:Type ListBoxItem}">
         <Style.Triggers>
            <EventTrigger RoutedEvent="GotKeyboardFocus">
               <BeginStoryboard>
                  <Storyboard>
                     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsSelected">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
                     </BooleanAnimationUsingKeyFrames>
                  </Storyboard>
               </BeginStoryboard>
            </EventTrigger>
         </Style.Triggers>
      </Style>
   </ListBox.ItemContainerStyle>
   <ListBox.ItemTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Focusing Listbox item when a control is clicked inside datatemplate

1 Answers