Question

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

旁注：我正在使用MaterialDesign进行样式设计。

这是我的代码：

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

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

Answer 1

希望我能理解您的要求。我建议的解决方案是：资源：

  <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一起使用，因为它仅更改背景。

Answer 2

当其他控件获得焦点时，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>

Answer 3

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

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

3 个答案: