CODEWITHSUNDEEP
c#wpflistviewlistviewitem
dath
dath

Reputation: 915

Keeping a listviewitem highlighted when control loses focus

I have created tab functionality from a listview. The problem I'm having is that the selected item loses focus when I click away from the control. I want the selected item to stay highlighted so the user knows which tab (listviewitem) they are currently on.

Side note: I am using MaterialDesign for styling.

Here is my code:

<ListView x:Name="lvTabs"
    ItemsSource="{Binding tabItems}" ItemTemplate=" 
    {StaticResource TabListViewItemTemplate}">

                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"></StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>

Upvotes: 0

Views: 1773

Answers (3)

Proxy Prochy
Proxy Prochy

Reputation: 11

Based on MaterialDesign ^^ the key is to change IsSelected property instead of IsFocused

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">
                        <Setter Property="Foreground" Value="#DDDDDD"></Setter>
                        <Setter Property="MinHeight" Value="100"></Setter>
                        <Setter Property="MinWidth" Value="160"></Setter>
                        <Setter Property="Padding" Value=" 15 0 0 0"></Setter>
                        <Setter Property="Background" Value="#333"></Setter>
                        <Setter Property="FontSize" Value="16"></Setter>
                        <Setter Property="BorderThickness" Value="0"></Setter>
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#FFD610"></Setter>
                                <Setter Property="Foreground" Value="White"></Setter>
                                <Setter Property="FontSize" Value="18"></Setter>
                            </Trigger>
                    </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>


            <ListBoxItem>listbox item 1</ListBoxItem>
                <ListBoxItem>listbox item 2</ListBoxItem>
                <ListBoxItem>listbox item 3</ListBoxItem>
                <ListBoxItem>listbox item 4</ListBoxItem>
                <ListBoxItem>listbox item 5</ListBoxItem>
            </ListBox>

Upvotes: 0

Aakanksha
Aakanksha

Reputation: 349

The ListView will loose the focus when someother control has the focus. It cannot be avoided. But you can change the color of the ListView selected item when it does not have focus You need to set the color of the ListView selected item not focused. Just set the inactive selection color which will highlight the listview selected item when it looses focus.

<ListView.Style>
    <Style TargetType="{x:Type ListViewItem}">
       <Style.Resources>
           <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Red"/>
       </Style.Resources>
    </Style>
</<ListView.Style>

Upvotes: 0

Lupu Silviu
Lupu Silviu

Reputation: 1165

I hope I understand what you requested. My proposed solution is: Resources:

  <Style TargetType="ListViewItem" x:Key="ItemStyle">
        <Setter Property="Background" Value="Red"/>

        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true">
                <Setter Property="Background" Value="Blue"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <Border Name="Border" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}">
                                <ContentPresenter Content="{TemplateBinding Content}" 
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Margin="{TemplateBinding Padding}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

   <DataTemplate x:Key="TabListViewItemTemplate">
        <TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </DataTemplate>

And the ListView:

 <ListView x:Name="lvTabs" Width="100" Height="200"
              HorizontalAlignment="Left" VerticalAlignment="Top"
              ItemsSource="{Binding }" ItemTemplate="{StaticResource TabListViewItemTemplate}"
              ItemContainerStyle="{StaticResource ItemStyle}" >

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

I added an array of strings to test the solution.

 this.DataContext = new string[] { "Tab1", "Tab2" };

It should work with any DataTemplate, as it changes the background only.

Upvotes: 1

Related Questions