Home > Software design >  Multiple ListView controls Items only focus on one ListViewItem
Multiple ListView controls Items only focus on one ListViewItem

Time:03-06

I have two ListView controls on the same window. I am trying to style it so that only ONE ListViewItem has focus at a time. I have made an attached behavior called FocusBehavior.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace FocusTest
{
    public class FocusBehavior
    {
        #region IsFocused Property
        public static readonly DependencyProperty IsFocusedProperty =
            DependencyProperty.RegisterAttached("IsFocused",
                                                typeof(bool),
                                                typeof(FocusBehavior));

        public static bool GetIsFocused(DependencyObject d)
            => (bool)d.GetValue(IsFocusedProperty);

        public static void SetIsFocused(DependencyObject d, bool value)
            => d.SetValue(IsFocusedProperty, value);
        #endregion

        #region SetFocus Property
        public static readonly DependencyProperty SetFocusProperty =
            DependencyProperty.RegisterAttached("SetFocus",
                                                typeof(bool),
                                                typeof(FocusBehavior),
                        new PropertyMetadata(HandleSetFocusedPropertyChanged));

        private static void HandleSetFocusedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var shouldSetFocus = (bool)e.NewValue;
            if (shouldSetFocus == false)
            {
                return;
            }

            if (d is ListViewItem item)
            {
                var listView = FindAncestor<ListView>(item);
                listView.LostKeyboardFocus  = (sender, e) =>
                {
                    SetIsFocused(d, false);
                };

                item.GotFocus  = (sender, e) =>
                {
                    SetIsFocused(d, true);
                    Keyboard.Focus(item);
                    e.Handled = true;
                };
                item.LostFocus  = (sender, e) =>
                {
                    SetIsFocused(d, false);
                };
            }
        }

        public static bool GetSetFocus(DependencyObject d)
            => (bool)d.GetValue(SetFocusProperty);

        public static void SetSetFocus(DependencyObject d, bool value)
            => d.SetValue(SetFocusProperty, value);
        #endregion

        private static T FindAncestor<T>(DependencyObject dependencyObject) where T : DependencyObject
        {
            var parent = VisualTreeHelper.GetParent(dependencyObject);
            if (parent == null) return null;
            var parentT = parent as T;
            return parentT ?? FindAncestor<T>(parent);
        }
    }
}

This allows me to set the text bold if the ListViewItem has focus and its parent is also the currently focused ListView.

      <Window.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Focusable" Value="True"/>
            <Setter Property="local:FocusBehavior.SetFocus" Value="True"/>
            <Style.Triggers>
                <Trigger Property="local:FocusBehavior.IsFocused" Value="True">
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <ListView Grid.Column="0" ItemsSource="{Binding SourceItems}"/>

        <ListView Grid.Column="1" ItemsSource="{Binding TargetItems}"/>
    </Grid>

This almost works perfectly but sometimes clicking on an item can NOT bring it to focus. Is there another approach or something I am missing? Take in mind this is POC code.

CodePudding user response:

If you just want to change the appearance of ListViewItem, a MultiDataTrigger which is bound to IsFocused property of ListViewItem and IsKeyboardFocusWithin property of parent ListView will be a straightforward solution.

<Style TargetType="{x:Type ListViewItem}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsFocused}" Value="True"/>
                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListView}}, Path=IsKeyboardFocusWithin}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="FontWeight" Value="Bold"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>
  • Related