`ListView``Mouse Over`定义为`transparent`但显示2种颜色

时间:2015-07-02 12:38:53

标签: wpf listview styles

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

enter image description here

Selected相同:

enter image description here

定义Blue但有两种颜色。

为什么?

  • 修改

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

1 个答案:

答案 0 :(得分:0)

这不会很漂亮。由于“UpperHighlight”Rectangle是默认ListViewItem模板的一部分,并且无法从外部访问,因此可以获得额外的颜色。所以你只能覆盖整个模板。

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

    <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样式:

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