Silverlight / WPF - Sorting listview items on columnheaderclick

Hello, 

it is a GridViewColumnHeader and they declare an object for the header and handle it there in the code for sorting purpose.

MSDN has an easy way to perform sorting on columns with up/down glyphs. The example isn't complete, though - they don't explain how to use the data templates for the glyphs. Below is what I got to work with my ListView. This works on .Net 4.

In your ListView, you have to specify an event handler to fire for a click on the GridViewColumnHeader. My ListView looks like this:

<ListView Name="results" GridViewColumnHeader.Click="results_Click">

<ListView.View>

<GridView>

<GridViewColumn DisplayMemberBinding="{Binding Path=ContactName}">

<GridViewColumn.Header>

<GridViewColumnHeader Content="Contact Name" Padding="5,0,0,0" HorizontalContentAlignment="Left" MinWidth="150" Name="ContactName" />

</GridViewColumn.Header>

</GridViewColumn>

<GridViewColumn DisplayMemberBinding="{Binding Path=PrimaryPhone}">

<GridViewColumn.Header>

<GridViewColumnHeader Content="Contact Number" Padding="5,0,0,0" HorizontalContentAlignment="Left" MinWidth="150" Name="PrimaryPhone"/>

</GridViewColumn.Header>

</GridViewColumn>

</GridView>

</ListView.View>

</ListView>

In your code behind, set up the code to handle the sorting:

// Global objects

BindingListCollectionView blcv;

GridViewColumnHeader _lastHeaderClicked = null;

ListSortDirection _lastDirection = ListSortDirection.Ascending;

// Header click event

void results_Click(object sender, RoutedEventArgs e)

{

GridViewColumnHeader headerClicked =

e.OriginalSource as GridViewColumnHeader;

ListSortDirection direction;

if (headerClicked != null)

{

if (headerClicked.Role != GridViewColumnHeaderRole.Padding)

{

if (headerClicked != _lastHeaderClicked)

{

direction = ListSortDirection.Ascending;

}

else

{

if (_lastDirection == ListSortDirection.Ascending)

{

direction = ListSortDirection.Descending;

}

else

{

direction = ListSortDirection.Ascending;

}

}

string header = headerClicked.Column.Header as string;

Sort(header, direction);

if (direction == ListSortDirection.Ascending)

{

headerClicked.Column.HeaderTemplate =

Resources["HeaderTemplateArrowUp"] as DataTemplate;

}

else

{

headerClicked.Column.HeaderTemplate =

Resources["HeaderTemplateArrowDown"] as DataTemplate;

}

// Remove arrow from previously sorted header

if (_lastHeaderClicked != null && _lastHeaderClicked != headerClicked)

{

_lastHeaderClicked.Column.HeaderTemplate = null;

}

_lastHeaderClicked = headerClicked;

_lastDirection = direction;

}

}

// Sort code

private void Sort(string sortBy, ListSortDirection direction)

{

blcv.SortDescriptions.Clear();

SortDescription sd = new SortDescription(sortBy, direction);

blcv.SortDescriptions.Add(sd);

blcv.Refresh();

}

And then in your XAML, you need to add two DataTemplates that you specified in the sorting method:

<DataTemplate x:Key="HeaderTemplateArrowUp">
    <DockPanel LastChildFill="True" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GridViewColumnHeader}}}">
        <Path x:Name="arrowUp" StrokeThickness="1" Fill="Gray" Data="M 5,10 L 15,10 L 10,5 L 5,10" DockPanel.Dock="Right" Width="20" HorizontalAlignment="Right" Margin="5,0,5,0" SnapsToDevicePixels="True"/>
        <TextBlock Text="{Binding }" />
    </DockPanel>
</DataTemplate>

<DataTemplate x:Key="HeaderTemplateArrowDown">
    <DockPanel LastChildFill="True" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GridViewColumnHeader}}}">
        <Path x:Name="arrowDown" StrokeThickness="1" Fill="Gray"  Data="M 5,5 L 10,10 L 15,5 L 5,5" DockPanel.Dock="Right" Width="20" HorizontalAlignment="Right" Margin="5,0,5,0" SnapsToDevicePixels="True"/>
        <TextBlock Text="{Binding }" />
    </DockPanel>
</DataTemplate>

Hope this will help you.

Hope this will help you.

Hope this will help you.

Thanks for the reply,

my only question is. where in the xml should i put the xml code ?