【问题标题】:WPF TreeViewItem mystery mouseover styleWPF TreeViewItem 神秘的鼠标悬停风格
【发布时间】:2017-12-12 12:57:31
【问题描述】:

我对此束手无策,过去两天的大部分时间我都在玩它并在谷歌上搜索。当我将鼠标悬停在我的TreeView 上时,它会按预期工作,直到此时您越过Expander/文本,应用不同的背景和边框画笔。我愚蠢地试图消除这一点,但似乎没有任何效果。我在下面的最后一次矫枉过正的尝试仍然让我不知道发生了什么。

我认为这是一件简单的事情,只是在我的脑海中浮现,我知道不需要这么多的触发器。

根据要求,这里是截图Issue

你想要的效果是你看到的文本是蓝色的,背景是透明的。不需要扩展器上方的背景和边框画笔

<TreeView x:Name="textureTreeView" ItemsSource="{Binding Category}"  Margin="0" SelectedItemChanged="textureTreeView_SelectedItemChanged" Background="#00000000" BorderBrush="{x:Null}" Foreground="#00000000" IsTextSearchEnabled="True">

    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local1:CategoryViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" IsHitTestVisible="False"/> <!-- This eliminated the text from causing the issue -->
            </StackPanel>
        </HierarchicalDataTemplate>

    </TreeView.Resources>

    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Foreground" Value="#FFA1A1A1"/>
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
            <Setter Property="FontWeight" Value="Normal"/>
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="Foreground" Value="#FFFFFFFF"/>
                    </Trigger>

                    <Trigger Property="Expander.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>

                    <Trigger Property="Grid.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="StackPanel.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="TextBlock.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="ItemsPresenter.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="Path.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </Trigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition   Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition   Property="ToggleButton.IsMouseOver" Value="true"/>
                            <Condition Property="ToggleButton.IsChecked" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"  Value="#00000000"/>
                        <Setter Property="BorderBrush" Value="#00000000"/>
                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                    </MultiTrigger>
                    <MultiTrigger>
                         <MultiTrigger.Conditions>
                             <Condition   Property="ToggleButton.IsMouseOver" Value="true"/>
                             <Condition Property="ToggleButton.IsChecked" Value="false"/>
                         </MultiTrigger.Conditions>
                         <Setter Property="Background"  Value="#00000000"/>
                         <Setter Property="BorderBrush" Value="#00000000"/>
                         <Setter Property="Foreground" Value="#FF58A6C3"/>
                     </MultiTrigger>

                 </Style.Triggers>

             </Style>
         </TreeView.ItemContainerStyle>
     </TreeView>

更新:感谢@Gui 的建议,我已经设法深入了解正在发生的事情。 There is an unnamed Borderpulling template properties 正在应用该样式。

我已经尝试删除我所有的样式模板,我不知道这是从哪里拉出来的,虽然我现在正在处理它,但我很难解决边框本身来设置不同的风格。

更新:对于我来说,我无法让这个边框进行样式设置,它似乎不是我下载的任何控件模板的一部分。

【问题讨论】:

  • 我没看错你的问题吗? MouseOver 触发器可以正常工作/按预期对 TreeView 工作,但对 Expander 不工作?
  • 你能解释一下你想要实现什么/你期望什么行为吗?
  • 屏幕截图会有所帮助
  • 我添加了一个屏幕截图,希望能更好地概述所需的行为
  • 我将您的 XAML 复制到了一个新项目中,但没有看到这种行为。它必须来自您尚未发布的内容。您在 app.xaml 中定义了任何样式吗?

标签: wpf treeviewitem


【解决方案1】:

我搞定了! 我尝试了大约一百万件事,没有模板或设置器会粘住。最后,我使用覆盖设置器将控件模板直接放入 treeviewitem 的样式中,并且它起作用了。我在将扩展器填充颜色设置在树视图项的鼠标悬停上时遇到了一个小问题,但这对我来说不是一个大问题。

在资源中:

<SolidColorBrush x:Key="GlyphBrush" Color="#FFA1A1A1" />
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
    <Setter Property="Foreground" Value="#FFFFFF"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Width="15" Height="13" Background="Transparent">
                    <Path x:Name="ExpandPath" HorizontalAlignment="Left"  VerticalAlignment="Center"  Margin="1,1,1,1" Fill="{StaticResource GlyphBrush}" Data="M 4 0 L 8 4 L 4 8 Z"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Data" TargetName="ExpandPath" Value="M 0 4 L 8 4 L 4 8 Z"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>
<Style x:Key="TreeViewItemFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Border>
                    <Rectangle Margin="0,0,0,0" StrokeThickness="5" Stroke="#FF717171" StrokeDashArray="1 2" Opacity="0"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后在页面中:

   <TreeView x:Name="textureTreeView" ItemsSource="{Binding Category}"   SelectedItemChanged="textureTreeView_SelectedItemChanged" Background="#00000000" BorderBrush="{x:Null}" Foreground="#00000000" IsTextSearchEnabled="True">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local1:CategoryViewModel}" ItemsSource="{Binding Children}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" IsHitTestVisible="False"/>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                                        <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="Padding" Value="1,0,0,0"/>
                    <Setter Property="Foreground" Value="#FFA1A1A1"/>
                    <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
                    <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                    <Setter Property="FontWeight" Value="Normal"/>
                    <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MinWidth="19" Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                                    <Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                        <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                                    </Border>
                                    <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsFocused" Value="True">
                                        <Setter Property="FontWeight" Value="Bold"/>
                                        <Setter Property="Foreground" Value="#FFFFFFFF"/>
                                    </Trigger>

                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="Border.Background"  Value="#00000000"/>
                                        <Setter Property="Background"  Value="#00000000"/>
                                        <Setter Property="BorderBrush" Value="#00000000"/>
                                        <Setter Property="Foreground" Value="#FF58A6C3"/>
                                    </Trigger>
                                    <Trigger Property="IsExpanded" Value="false">
                                        <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                                    </Trigger>
                                    <Trigger Property="HasItems" Value="false">
                                        <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="HasHeader" Value="false"/>
                                            <Condition Property="Width" Value="Auto"/>
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                                    </MultiTrigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="HasHeader" Value="false"/>
                                            <Condition Property="Height" Value="Auto"/>
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter Property="FontWeight" Value="Bold"/>
                                        <Setter Property="Foreground" Value="#ffffffff"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="true"/>
                                            <Condition Property="IsSelectionActive" Value="false"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>

【讨论】: