Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

C#/WPF: Idea how to display the last row of a ListView separately?

Tags:

c#

listview

wpf

I've a ListView with about 10 GridViewColumn's and about 100 Lines/Row. I'd like to display a "Total" or summary row at the bottom of the ListView.

Does anyone have a idea how to do that, with keeping the ColumnWidth etc. like the others and making it a separate item, so the "main" ListView can have a scrollbar?

I've uploaded here a mock-up (sorry for my bad graphic talent :-)):
image

like image 494
Joseph jun. Melettukunnel Avatar asked Aug 17 '09 13:08

Joseph jun. Melettukunnel


3 Answers

This is an example on how to have a listview with totals area at the end. The column width are binded between each column and its total

 <Window x:Class="WpfApplication2.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Window1"
        x:Name="ctl"
        Height="300"
        Width="300"> 
  <Window.Resources>

    <GridViewColumnCollection x:Key="gvcc">
      <GridViewColumn Width="{Binding Path=ActualWidth, ElementName=col1}"
                      Header="Date" />
      <GridViewColumn  Width="{Binding Path=ActualWidth, ElementName=col2}"
                       Header="Day Of Week"
                       DisplayMemberBinding="{Binding DayOfWeek}" />
      <GridViewColumn  Width="{Binding Path=ActualWidth, ElementName=col3}"
                       Header="Year"
                       DisplayMemberBinding="{Binding Year}" />

    </GridViewColumnCollection>
  </Window.Resources>
  
  <Grid>
    <DockPanel HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               LastChildFill="True">
  

      <GridViewRowPresenter Name="listview_total"
                            DockPanel.Dock="Bottom" 
                            Margin="0,5,0,5"
                            Columns="{StaticResource gvcc}">
        <GridViewRowPresenter.Content>
          <sys:DateTime>2005/2/1</sys:DateTime>
        </GridViewRowPresenter.Content>
      </GridViewRowPresenter>
      

      
      <ListView x:Name="listview_rows" 
                SelectionMode="Single"
                DockPanel.Dock="Top"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListView.View>
          <GridView>
            <GridViewColumn x:Name="col1"                            
                            Header="Date" />
            <GridViewColumn x:Name="col2"                            
                            Header="Day Of Week"
                            DisplayMemberBinding="{Binding DayOfWeek}" />
            <GridViewColumn x:Name="col3"                            
                            Header="Year"
                            DisplayMemberBinding="{Binding Year}" />
          </GridView>
        </ListView.View>

        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
      </ListView>

    </DockPanel>
  </Grid>
</Window>

enter image description here

like image 160
federubin Avatar answered Oct 16 '22 22:10

federubin


Building off federubin's excellent answer, you can bind the GridViewRowPresenter's Columns property directly to the Columns property of the GridView.

<GridViewRowPresenter Columns="{Binding ElementName=ListViewGridViewName, Path=Columns}" ...>

The columns' widths will be updated automatically in the presenter when they are changed in the main grid and you no longer have to duplicate your column definitions.

<Window x:Class="WpfTestbed.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <Grid>
    <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">

      <GridViewRowPresenter Columns="{Binding ElementName=ListViewGridView, Path=Columns}" DockPanel.Dock="Bottom" Margin="4,5,0,5">
        <GridViewRowPresenter.Content>
          <sys:DateTime>2005/2/1</sys:DateTime>
        </GridViewRowPresenter.Content>
      </GridViewRowPresenter>

      <ListView SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListView.View>
          <GridView x:Name="ListViewGridView">
            <GridViewColumn Header="Date" />
            <GridViewColumn Header="Day Of Week" DisplayMemberBinding="{Binding DayOfWeek}" />
            <GridViewColumn Header="Year" DisplayMemberBinding="{Binding Year}" />
          </GridView>
        </ListView.View>

        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
        <sys:DateTime>1/2/3</sys:DateTime>
        <sys:DateTime>4/5/6</sys:DateTime>
        <sys:DateTime>7/8/9</sys:DateTime>
        <sys:DateTime>10/11/12</sys:DateTime>
      </ListView>

    </DockPanel>
  </Grid>
</Window>
like image 20
Garrett Avatar answered Oct 16 '22 22:10

Garrett


If your data source is a StaticResource, you can use a composite collection. I really wish this would work elsewhere. Sad, really. Anyway it's really nice if you can use it.

<ListView>
   <ListView.ItemsSource>
      <CompositeCollection>
           <CollectionContainer Collection="{StaticResource MyCollection} />
           <ListViewItem>Last Item</ListViewItem>
      </CompositeCollection>
   </ListView.ItemsSource>
</ListView>

Enjoy!

like image 20
Anderson Imes Avatar answered Oct 16 '22 20:10

Anderson Imes