当控件失去焦点时保持 listviewitem 突出显示

Keeping a listviewitem highlighted when control loses focus

我已经从列表视图创建了选项卡功能。我遇到的问题是,当我从控件上单击时,所选项目失去焦点。我希望所选项目保持突出显示,以便用户知道他们当前位于哪个选项卡 (listviewitem)。

旁注:我正在使用 MaterialDesign 进行样式设置。

这是我的代码:

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

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

当其他控件获得焦点时,ListView 将失去焦点。这是无法避免的。 但是你可以在没有焦点的时候改变ListView选中项的颜色 需要设置未聚焦的ListView选中项的颜色。 只需设置非活动选择颜色,它会在失去焦点时突出显示列表视图中的选定项。

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

希望我理解您的要求。我提出的解决方案是: 资源:

  <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>

和 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>

我添加了一个字符串数组来测试解决方案。

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

它应该可以与任何 DataTemplate 一起使用,因为它只更改背景。

基于 MaterialDesign ^^ 关键是更改 IsSelected 属性 而不是 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>