WPF:如何更改GridView行的MouseOver / Selected背景颜色

时间:2018-04-12 20:14:42

标签: c# wpf xaml

我很难找到解决方案,所以不胜感激。

我需要能够在鼠标结束时更改GridView行的背景,或者如果选择了行,则需要更改。

这是我的ListView样式。

    <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}"
   TargetType="ScrollViewer">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <DockPanel Margin="{TemplateBinding Padding}">
                        <ScrollViewer DockPanel.Dock="Top"
          HorizontalScrollBarVisibility="Hidden"
          VerticalScrollBarVisibility="Hidden"
          Focusable="false">
                            <GridViewHeaderRowPresenter Margin="2,0,2,0"
            Columns="{Binding Path=TemplatedParent.View.Columns,
                      RelativeSource={RelativeSource TemplatedParent}}"
            ColumnHeaderContainerStyle="{Binding
                         Path=TemplatedParent.View.ColumnHeaderContainerStyle,
                         RelativeSource={RelativeSource TemplatedParent}}"
            ColumnHeaderTemplate="{Binding
                         Path=TemplatedParent.View.ColumnHeaderTemplate,
                         RelativeSource={RelativeSource TemplatedParent}}"
            ColumnHeaderTemplateSelector="{Binding 
                         Path=TemplatedParent.View.ColumnHeaderTemplateSelector,
                         RelativeSource={RelativeSource TemplatedParent}}"
            AllowsColumnReorder="{Binding
                         Path=TemplatedParent.View.AllowsColumnReorder,
                         RelativeSource={RelativeSource TemplatedParent}}"
            ColumnHeaderContextMenu="{Binding
                         Path=TemplatedParent.View.ColumnHeaderContextMenu,
                         RelativeSource={RelativeSource TemplatedParent}}"
            ColumnHeaderToolTip="{Binding
                         Path=TemplatedParent.View.ColumnHeaderToolTip,
                         RelativeSource={RelativeSource TemplatedParent}}"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>

                        <ScrollContentPresenter Name="PART_ScrollContentPresenter"
          KeyboardNavigation.DirectionalNavigation="Local"/>
                    </DockPanel>
                    <ScrollBar Name="PART_HorizontalScrollBar"
        Orientation="Horizontal"
        Grid.Row="1"
        Maximum="{TemplateBinding ScrollableWidth}"
        ViewportSize="{TemplateBinding ViewportWidth}"
        Value="{TemplateBinding HorizontalOffset}"
        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                    <ScrollBar Name="PART_VerticalScrollBar"
        Grid.Column="1"
        Maximum="{TemplateBinding ScrollableHeight}"
        ViewportSize="{TemplateBinding ViewportHeight}"
        Value="{TemplateBinding VerticalOffset}"
        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
    <Setter Property="Width" Value="18"/>
    <Setter Property="Background" Value="{StaticResource NormalBorderBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
      Background="Transparent">
                    <Rectangle HorizontalAlignment="Center"
        Width="1"
        Fill="{TemplateBinding Background}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type GridViewColumnHeader}"
   TargetType="GridViewColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Foreground"
      Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Name="HeaderBorder"
        BorderThickness="0,1,0,1"
        BorderBrush="{StaticResource NormalBorderBrush}"
        Background="{StaticResource ControlDarkBrush}"
        Padding="2,0,2,0">
                        <ContentPresenter Name="HeaderContent"
          Margin="0,0,0,1"
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
          RecognizesAccessKey="True"
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <Thumb x:Name="PART_HeaderGripper"
        HorizontalAlignment="Right"
        Margin="0,0,-9,0"
        Style="{StaticResource GridViewColumnHeaderGripper}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="HeaderBorder"
                Property="Background" Value="{StaticResource NormalBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="HeaderBorder"
                Property="Background" Value="{StaticResource PressedBrush}"/>
                        <Setter TargetName="HeaderContent"
                Property="Margin" Value="1,1,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Role" Value="Floating">
            <Setter Property="Opacity" Value="0.7"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Canvas Name="PART_FloatingHeaderCanvas">
                            <Rectangle Fill="#60000000"
            Width="{TemplateBinding ActualWidth}"
            Height="{TemplateBinding ActualHeight}"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="Role" Value="Padding">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Border Name="HeaderBorder"
          BorderThickness="0,1,0,1"
          BorderBrush="{StaticResource NormalBorderBrush}"
          Background="{StaticResource ControlDarkBrush}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="StyleListView" TargetType="ListView">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border Name="Border"
      BorderThickness="1"
      BorderBrush="{StaticResource BorderLightBrush}"
      Background="{StaticResource ControlDarkBrush}">
                    <ScrollViewer Style="{DynamicResource
                    {x:Static GridView.GridViewScrollViewerStyleKey}}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsGrouping"
               Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll"
                Value="false"/>
                    </Trigger>
                    <Trigger Property="IsEnabled"
               Value="false">
                        <Setter TargetName="Border"
                Property="Background"
                Value="{StaticResource DisabledBorderDarkBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我最接近答案的是这篇文章(代码在我的Style中省略,因为它没有任何效果): -

Change ListViewItem background colour on mouse over

但是,我仍然无法控制鼠标悬停和所选颜色。我越来越近,因为上面的帖子表明这是一个实际上正在进行突出显示和选择的按钮,但我不知道如何将其融入我现有的风格中。

这是Style的当前效果。选择了第一行,第三行是鼠标,另外两行是正常的。

Mouseover / selected colours

顺便说一句,我使用的样式是从Blend中提取的,我调整它以使用我的app颜色。

我不认为我的班级代码在这里是相关的,但如果我错了,请纠正我,我会发布。

1 个答案:

答案 0 :(得分:0)

我认为您需要为ListViewItems添加样式并设置ListView.ItemContainerStyle

<!-- New style -->
<Style x:Key="StyleListViewItem" TargetType="ListViewItem">
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Green"/>
    </Trigger>
    <Trigger Property="IsSelected" Value="True">
      <Setter Property="Background" Value="Blue"/>
    </Trigger>
  </Style.Triggers>
</Style>

<!-- Existing style -->
<Style x:Key="StyleListView" TargetType="ListView">
  <Setter Property="ItemContainerStyle" Value="{StaticResource StyleListViewItem}"/>
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <!-- ... -->
</Style>