Search code examples
c#wpflistviewgridviewwpfdatagrid

static look&feel for gridview WPF


I have some data I want to show in a table-like view:

enter image description here

Basically I don't need any of the data grid functionalities such as edit, add, delete or even select, but I do need the ability to have bindable columns.

EDIT:

I think a GridView of a ListView is the way to go, But how can I style it's headers to have a static-text look over the dynamic clickable one? and how can I make the rows unselectable?

SOLUTION

I've managed to do that with the help of @JanW. I used the following:

        <ListView ItemsSource="{Binding Employees}" 
                  Background="Lavender" 
                  BorderThickness="0" 
                  TextBlock.Foreground="Black"
                  Margin="100">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}"/>
                        <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}"/>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>

To achieve the static header columns look:

<Style TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Border BorderThickness="0,0,0,1" BorderBrush="LightGray" Background="{TemplateBinding Background}">
                            <TextBlock x:Name="ContentHeader" 
                                       Text="{TemplateBinding Content}" 
                                       Width="{TemplateBinding Width}" 
                                       Foreground="Black"
                                       FontWeight="SemiBold"
                                       Padding="5" 
                                       TextAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="12" />
        </Style>

To make the items unselectable I used:

<Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border SnapsToDevicePixels="True" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <GridViewRowPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Columns="{TemplateBinding GridView.ColumnCollection}" Content="{TemplateBinding Content}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Solution

  • Have a look at the WPF GridView as a special layout for the ListView at MSDN:

    http://msdn.microsoft.com/en-us/library/ms752213%28v=vs.110%29.aspx

    It comes with DataSource Binding and Columns/Headers as DataGrid, but without the DataGrid overhead.

    Edit: Added Example for Header Layout:

    enter image description here

    <ListView ItemsSource="{Binding }" TextBlock.Foreground="Black">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <GridViewRowPresenter Margin="4" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView AllowsColumnReorder="False" ColumnHeaderToolTip="Employee Information">
                <GridView.ColumnHeaderContainerStyle>
                    <Style TargetType="GridViewColumnHeader">
                        <Setter Property="OverridesDefaultStyle" Value="True" />
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="BorderBrush" Value="DarkGray" />
                        <Setter Property="BorderThickness" Value="0,0,0,1" />
                        <Setter Property="TextBlock.Foreground" Value="Black" />
                        <Setter Property="TextBlock.FontWeight" Value="Bold" />
    
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GridViewColumnHeader">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Padding="6">
                                        <ContentPresenter />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
    
                    </Style>
                </GridView.ColumnHeaderContainerStyle>
    
                <GridView.Columns>
                    <GridViewColumn Width="100"
                                DisplayMemberBinding="{Binding Path=LayerName}"
                                Header="Layer Name" />
    
                    <GridViewColumn Width="100"
                                DisplayMemberBinding="{Binding Path=RuleName}"
                                Header="Rule Name" />
    
                    <GridViewColumn Width="100"
                                DisplayMemberBinding="{Binding Path=Action}"
                                Header="Action" />
                </GridView.Columns>
            </GridView>
    
        </ListView.View>
    </ListView>