本文介绍了"ListView",“鼠标悬停"定义为“透明",但显示2种颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的 ListView Mouse Over 定义为 transparent ,但结果是一半的 transparent :

My ListView Mouse Over define as transparent but the result is half transparent:

Selected 相同:

定义 Blue ,但有2种颜色.

那是为什么?

  • 编辑

    <ListView Name="llistview" Background="Transparent" BorderThickness="0,1,0,0" 
          ItemsSource="{Binding collection}" MouseDoubleClick="llistview_MouseDoubleClick" 
          MouseLeftButtonDown="llistview_MouseLeftButtonDown" Margin="0,176,0,166" BorderBrush="Gainsboro" 
              ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Foreground" Value="Gainsboro"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="Padding" Value="4,1"/>
                <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="Height" Value="20" />
                <Style.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Foreground" Value="White"></Setter>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="White"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="#FF15669E"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="0"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="#FF15669E"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="1"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.Resources>
            <DataTemplate x:Key="MyDataTemplate">
                <Grid Margin="-6">
                    <ProgressBar Name="progressBarColumn" Maximum="100" Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}" 
                             Width="{Binding Path=Width, ElementName=ProgressCell}" 
                             Height="18" Margin="0" Background="Gainsboro" Style="{StaticResource CustomProgressBar}" />
                    <TextBlock Text="{Binding Path=Value, ElementName=progressBarColumn, StringFormat={}{0}%}" VerticalAlignment="Center"
                           HorizontalAlignment="Center" FontSize="11" Foreground="White" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="MyDataTemplate2">
                <Grid Margin="-6" >
                    <Slider Name="sliderColumn" HorizontalAlignment="Left" VerticalAlignment="Center" TickPlacement="None"
                            Minimum="0" Maximum="50" Value="1" Style="{StaticResource SliderStyle}" Width="80"
                            TickFrequency="1" IsSnapToTickEnabled="True"/>
                        <TextBlock Text="{Binding Path=Value, ElementName=sliderColumn, StringFormat={}x{0}}" FontSize="11" Foreground="White" 
                                   VerticalAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </DataTemplate>
            <ControlTemplate x:Key="ProgressBarTemplate">
                <Label  HorizontalAlignment="Center" VerticalAlignment="Center" />
            </ControlTemplate>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Text }"></Setter>
            </Style>
        </ListView.Resources>
        <ListView.View>
            <GridView ColumnHeaderContainerStyle="{StaticResource ListViewHeaderStyle}">
                <GridViewColumn Width="495"  DisplayMemberBinding="{Binding File}" />

                <GridViewColumn x:Name="SpeedCell"  Width="100"  CellTemplate="{StaticResource MyDataTemplate2}" />

                <GridViewColumn Width="100" DisplayMemberBinding="{Binding Duration}" />

                <GridViewColumn Width="100" DisplayMemberBinding="{Binding Packets, StringFormat={}{0:#,0}}" />

                <GridViewColumn Width="100"  DisplayMemberBinding="{Binding PacketsSent, StringFormat={}{0:#,0}}" />

                <GridViewColumn x:Name="ProgressCell"  Width="60" Header="Progress" CellTemplate="{StaticResource MyDataTemplate}" />
            </GridView>
        </ListView.View>
        <ListView.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Open Capture" FontSize="12" FontFamily="Microsoft Sans Serif"
                          Click="MenuItem_Click" VerticalAlignment="Center" Height="20">
                    <MenuItem.Icon>
                        <Image Height="18" Width="18" VerticalAlignment="Center" />
                        <!--   <Source="C:\Users\rsteinbe\Dropbox\PacketPlayer\PacketPlayer\resources\wireshark.ico" />-->
                    </MenuItem.Icon>
                </MenuItem>
            </ContextMenu>
        </ListView.ContextMenu>
    </ListView>

推荐答案

这不会很漂亮.由于"UpperHighlight" Rectangle 是默认 ListViewItem 模板的一部分,因此可以提供额外的颜色,并且无法从外部进行访问.因此,您只需覆盖整个模板.

This ain't gonna be pretty. That extra color is there thanks to an "UpperHighlight" Rectangle that is part of the default ListViewItem Template, and it is not accessible from outside. So you're only left with overwriting the whole Template.

首先,将其添加到您的资源中:

First of all, add this to your Resources:

    <Style x:Key="ListViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle RadiusY="2" RadiusX="2" Stroke="#8E6EA6F5" StrokeThickness="1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ListItemHoverFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF1FBFF" Offset="0"/>
        <GradientStop Color="#FFD5F1FE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFD9F4FF" Offset="0"/>
        <GradientStop Color="#FF9BDDFB" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ListItemSelectedInactiveFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFEEEDED" Offset="0"/>
        <GradientStop Color="#FFDDDDDD" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ListItemSelectedHoverFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFEAF9FF" Offset="0"/>
        <GradientStop Color="#FFC9EDFD" Offset="1"/>
    </LinearGradientBrush>

然后将其添加到您的 ListViewItem 样式:

And then add this to your ListViewItem Style:

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <!-- ... Your other Setters -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" SnapsToDevicePixels="true">
                        <Border x:Name="InnerBorder" BorderThickness="1" CornerRadius="1">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition MaxHeight="11"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <!--<Rectangle x:Name="UpperHighlight" Fill="#75FFFFFF" Visibility="Collapsed"/>-->
                                <GridViewRowPresenter Grid.RowSpan="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="{StaticResource ListItemHoverFill}"/>
                            <Setter Property="BorderBrush" Value="#FFCCF0FF"/>
                            <!--<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>-->
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Background" Value="{StaticResource ListItemSelectedFill}"/>
                            <Setter Property="BorderBrush" Value="#FF98DDFB"/>
                            <Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
                            <!--<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
                            <Setter Property="Fill" TargetName="UpperHighlight" Value="#40FFFFFF"/>-->
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}"/>
                            <Setter Property="BorderBrush" Value="#FFCFCFCF"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}"/>
                            <Setter Property="BorderBrush" Value="#FF98DDFB"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <!-- ... Your Triggers -->
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

这篇关于"ListView",“鼠标悬停"定义为“透明",但显示2种颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-03 07:41