Question

I have a button above a listbox which has it’s items in a horizontal allignment. If my button has focus and I press the down key on the keyboard then the listbox get focus. If I then press key up then the listbox still has focus. Can this behaviour be changed so when I press key up my button has focus again?

EDIT: I should add I’m using MVVM so would like to keep the solution out of codebehind if possable.

Below is the complete code for my listbox.

<ListBox Grid.Row="2" ItemsSource="{Binding Movies}" TextSearch.TextPath="Title" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.Template>
            <ControlTemplate>
                <Grid>
                    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </ListBox.Template>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="poster">
                    <Image x:Name="posterImage" RenderOptions.BitmapScalingMode="LowQuality" Source="{Binding Poster}" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
                           Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}">
                    </Image>
                    <TextBlock Text="{Binding PosterOverlayText}" Style="{DynamicResource PosterOverlayText}" Width="{Binding ActualWidth, ElementName=posterImage}"/>
                    <Grid.LayoutTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="st" ScaleX="0.85" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}"/>
                        </TransformGroup>
                    </Grid.LayoutTransform>
                    <Grid.InputBindings>
                        <MouseBinding Command="{x:Static Commands:MediaFiles.PlaySelectedMovie}" Gesture="LeftDoubleClick" />
                    </Grid.InputBindings>
                </Grid>

                <DataTemplate.Resources>
                    <CubicEase x:Key="ease" EasingMode="EaseOut"/>
                </DataTemplate.Resources>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation 
                            Duration="0:0:0.3" 
                            EasingFunction="{StaticResource ease}" 
                            Storyboard.TargetName="st" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation 
                            Duration="0:0:0.3" 
                            EasingFunction="{StaticResource ease}" 
                            Storyboard.TargetName="st" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="0.85"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>

                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
                </Style.Resources>

            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.InputBindings>
            <KeyBinding Command="{x:Static Commands:MediaFiles.PlaySelectedMovie}" Gesture="ENTER"/>
        </ListBox.InputBindings>            
    </ListBox>

Answer 1

Don’t know if there is a straight-forward MVVM accepted solution to this problem. The reason is that ListBox actually uses the key up and key down events to navigate through the list items (which is the desired effect most of the times) whereas the buttons will let the events go to the FocusManager class.

However, as for everything out there, there are workarounds so here’s how I would do it:
First of all you need to intercept the Key-Down event and look for directional inputs (up-down-left-right). I would think that you would still like to navigate with the keys in your list so, in the event handler I would make sure to test if I am on the first (or last) element and then use the MoveFocus() method with TraversalRequest – FocusNavigationDirection.Up / Down / Next / Previous to move the focus.

Last, to ensure your code-behind is clean, create a new ListBox derived control and have your event there. Actually, in the derived control, don’t use the event, overide OnKeyDown method. This way, you are writing the focus logic in your custom control and not the View.

Code:

  protected override void OnKeyDown(KeyEventArgs e)
    {
        if ((e.Key == Key.Up ||e.Key == Key.Left) && SelectedIndex == 0)
        {
            //.Previous will navigate correctly to the last element 
            this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Previous));

            return;
        }

        if (e.Key == Key.Down && this.SelectedIndex == this.Items.Count - 1)
        {
            //.Next will navigate to the first item in the list rather than skip to the next control. We will use Down or Right.
            //this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));

            this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Down));
            return;
        }

        if (e.Key == Key.Right && this.SelectedIndex == this.Items.Count - 1)
        {
            this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Right));
            return;
        }


        base.OnKeyUp(e);
    }