1
votes

I need to implement the following design in my classic Windows WPF application (expected):

Expected

I use WPF ListView control and already implemented many needed features, but I can’t exactly realize the designer’s vision. At the moment my control looks like the following schema (actual):

Actual

It has two drawbacks:

  1. Grid lines placed inside and outside of cells, but the initial style provides inner lines only.
  2. Grid lines extend on filled rows only, but I need to fill all control area, even empty (unused) space.

Could anyone help me to solve those problems? Maybe I need to use another WPF control?

Thanks.

1
You need to write a custom Style for your ListView. Have a look at this site: vbcity.com/blogs/xtab/archive/2009/09/21/… - Dominic Jonas
Thank you, @DominicJonas. I've read this article. But this approach with negative margins can be used for drawing vertical or horizontal lines only. But it doesn't resolve both my issues - hide outer grid lines and cover whole control including free space (when short collections used). - Serge Sotnyk

1 Answers

-1
votes

I am not sure if ListView is the right Control for your conditions. Maybe GridView or a DataGrid is a better decision.

Here is a modified version of the default styles of ListView and ListViewItem. Take this part of the snippet and extend it for your needs.

Style

<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
    <Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <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="{x:Type ListView}">
                    <Border x:Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="0,0,1,1"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Padding" Value="2,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <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>

Changes:

<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="BorderThickness" Value="0,0,1,1"/>

XAML

    <ListView VerticalAlignment="Center" HorizontalAlignment="Center" Style="{DynamicResource ListViewStyle1}">
        <ListViewItem>
            <TextBlock Text="Hello World"/>
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Hello World"/>
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Hello World"/>
        </ListViewItem>
    </ListView>

Preview

enter image description here