How to Synchronize ListBox SelectedItem and the focused item in WPF?

1
votes

I create buttons as ListBox items. Using keyboard shortcut, the selected item/button will be changed to the button where the first character is the same with the pressed key. The problem is the focused item (dashed rectangle) will not be synchronized with selected item. This problem doesn't exist if we use keyboard arrow. The shorted code is:

        <ListBox x:Name="ListBoxRef" 
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             DataContext="{Binding Path=ListViewSource}" IsSynchronizedWithCurrentItem="True"
             ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Tag="{Binding}" IsTabStop="False"
                        Command="{Binding ElementName=UserControlTypeSelectionView, Path=DataContext.SelectCommand}"
                        CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
                    <Button.Template>
                        <ControlTemplate>
                            <TextBlock Text="{Binding Path=Name}" />
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

In How do you programmatically set focus to the SelectedItem in a WPF ListBox that already has focus?, the solution is using the Focus method and in C# side.

Is it possible using only XAML in MVVM?

2
c#wpfxamllistbox
you may perhaps sync them using an attached behavior. as a workaround with pure xaml you can hide the dashed focused rectangle thus eliminating the issue. – pushpraj
@pushpraj Yes, that is my current solution. But I am not sure this is the best solution. I expect solution only in XAML without addition extension if it is possible. – Yohanes Nurcahyo
try adding a null or empty focus template to the listbox item. – pushpraj

2 Answers

7
votes

I found the answer from my colleague. By Triggering FocusManager.FocusedElement with current selected item setter (IsSelected property) the problem is solved.

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <!-- Edited: add pushpraj code to hide the dashed rectangle on focused item -->
                <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FocusManager.FocusedElement" Value="{Binding RelativeSource={RelativeSource Self}}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListBox.ItemContainerStyle>
1
votes

if you are not interested in the focus (dashed) rectangle and only interested in pure xaml solution then you may perhaps hide it

here is a sample

<ListBox>
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle"
                    Value="{x:Null}" />
        </Style>
    </ListBox.Resources>
    <ListBoxItem>item 1</ListBoxItem>
    <ListBoxItem>item 2</ListBoxItem>
    <ListBoxItem>item 3</ListBoxItem>
</ListBox>

the interesting area in the sample is the Style for ListBoxItem which sets a null value for FocusVisualStyle which is usually the dashed rectangle.

this is not equivalent to syncing the focused element with the selected item but it is hiding the focus layer so the dashed rectangle do not appear.