0

I've got a WPF ListView with vertical lines using the following style: (sorry for the length, but i thought i should include it)

    <SolidColorBrush x:Key="verticalLineColor" Color="Red" />
    <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid SnapsToDevicePixels="true" 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 Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DockPanel.Dock="Top">
                                <GridViewHeaderRowPresenter x:Name="viewHeaderRowPresenter"
                                        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 x:Name="PART_ScrollContentPresenter"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"                                         
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        KeyboardNavigation.DirectionalNavigation="Local"
                                        CanContentScroll="{TemplateBinding CanContentScroll}">

                                <ScrollContentPresenter.Content>
                                    <Grid>
                                        <!-- Container of vertical and horizontal lines -->
                                        <ItemsControl Margin="-1,0,0,0" ItemsSource="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Border Width="{Binding Path=ActualWidth}" BorderThickness="0,0,.5,0" BorderBrush="{DynamicResource verticalLineColor}" Opacity="1" />
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Horizontal" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                        <ContentControl Content="{TemplateBinding Content}" />
                                    </Grid>
                                </ScrollContentPresenter.Content>
                            </ScrollContentPresenter>
                        </DockPanel>
                        <ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Grid.Row="1" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0.0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}"/>
                        <ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_VerticalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0.0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}"/>
                        <DockPanel Grid.Column="1" Grid.Row="1" Background="{Binding Path=Background, ElementName=PART_VerticalScrollBar}" LastChildFill="false">
                            <Rectangle Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Width="1" Fill="White" DockPanel.Dock="Left"/>
                            <Rectangle Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Height="1" Fill="White" DockPanel.Dock="Top"/>
                        </DockPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Now, everything works great here. The issue I'm now running into is that I need to shade one of the ListView rows if one of my fields is 0. I've got the following code which gets me 90% of the way there:

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Margin" Value="0,-2,0,-1"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding QtyInBox}" Value="0">
                        <Setter Property="Background" Value="LightGray"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>

Now, the problem I'm running into is that when I set the background, it appears to "overwrite" the grid lines. enter image description here

Is there any way to get those vertical lines to show through?

EDIT #1: OK, so after playing around for a bit, I'm wondering if this might work; In the following section of code:

<DataTemplate>
    <Border Width="{Binding Path=ActualWidth}" BorderThickness="0,0,.5,0" BorderBrush="{DynamicResource verticalLineColor}" />
</DataTemplate>

If I can somehow hook into the Background property there, I should be able to get this working. Can anybody point me in the right direction for binding here? The field I'd need to bind to is QtyInBox on the ItemSource of the ListView.

EDIT #2: Looks like I was wrong there; that seems to be binding the entire column; so I can't set the background of just one row there. Back to the drawing board...

Jim B
  • 7,736
  • 10
  • 46
  • 75
  • ask far as I can see the lines are the same color as background, what happens if you use a different color? –  May 07 '12 at 16:51
  • Yeah; i just noticed that. It's a subtle difference (LightGray vs Gray). I'll change that to red to make it more apparent – Jim B May 07 '12 at 16:57
  • Just by looking at it I suppose the issue may be caused by the negative left and right marging you've set. Try to set the `Margin` in `ItemContainerStyle` to *0* (or even *"0,-1,0,-1"*) and see if it helps. – Lukasz M May 07 '12 at 18:30
  • Lucas, good advice, but no dice. The margins are tweaked to prevent whitespace in between the listview rows when shading. If i take those margins out, i get the whitespace in there, and can see the vertical line. It definitely seems like the background property is "writing on top of" the vertical lines – Jim B May 07 '12 at 18:58

1 Answers1

0

Unfortunately, I wasn't able to figure out a true solution to this.

Best I could do was to set the transparency of the background to something like .6 or .7.

Wasn't a perfect solution; as it caused the text to be a little blurry, but it was good enough for now.

Jim B
  • 7,736
  • 10
  • 46
  • 75