I have a windows phone project about news from media.
On this project, I have a panaroma item. In my first screeen, I get the news from my web API.
I use longlist selector to get these news but I want to put first/hot/newest new on the top with big picture of it and the text. But I couldn't gave the source rightly on my grid and LongListSelector at the same time.
In short, I want to list my news "one under the other" and the newest/first new will be big pictured on the top.
Here is what I've tried;
MAINPAGE.XAML
<!--Panorama item one-->
<phone:PanoramaItem Header="Haberler" Foreground="DarkGreen">
<ScrollViewer VerticalScrollBarVisibility="Auto" Background="White">
<StackPanel Orientation="Vertical">
<Grid x:Name="HeadNew">
<TextBlock x:Name="textBlock14" Text="{Binding Path=TITLE}" TextWrapping="Wrap" Margin="20,0" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="Black"/>
<Border Width="400" Height="250">
<Border.Background>
<ImageBrush Stretch="Uniform" ImageSource="{Binding Path=MF658370_IMAGE}"/>
</Border.Background>
</Border>
</Grid>
<phone:LongListSelector x:Name="MainLongListSelector" Background="White" Margin="-20,0,0,0" Height="Auto" Loaded="MainLongListSelectorLoaded" SelectionChanged="MainLongListSelectorSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="Auto" Width="Auto">
<Border Width="126" Height="70">
<Border.Background>
<ImageBrush Stretch="Uniform" ImageSource="{Binding Path=MF12670_IMAGE}"/>
</Border.Background>
</Border>
<TextBlock x:Name="textBlock1" Text="{Binding Path=TITLE}" Margin="10,0" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="Black" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer>
</phone:PanoramaItem>
Here is the MAINPAGE.XAML.CS
private void MainLongListSelectorLoaded(object sender, RoutedEventArgs e)
{
const string url = "MY_WEB_API_URL";
var hWebRequest = (HttpWebRequest)WebRequest.Create(url);
hWebRequest.Method = "GET";
hWebRequest.BeginGetResponse(MainLongListSelectorLoadCompleted, hWebRequest);
}
private void MainLongListSelectorLoadCompleted(IAsyncResult arr)
{
var request = (HttpWebRequest)arr.AsyncState;
var response = (HttpWebResponse)request.EndGetResponse(arr);
using (var streamReader = new StreamReader(response.GetResponseStream()))
{
_json = streamReader.ReadToEnd();
Headlines = JsonConvert.DeserializeObject<FanatikApiAll.RootObject>(_json);
}
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
MainLongListSelector.ItemsSource = Headlines.Headline;
});
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
HeadNew.DataContext = Headlines.Headline;
});
}
Since HeadNew isn't a list control, you need to assign only the item you need, not the whole list. For instance, to get the first item if any:
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
HeadNew.DataContext = Headlines.Headline.FirstOrDefault();
});
Related
I have viewlist in which contain elements. When I click on them, my ItemViewModel handler clicks. Then I can select information about that element. Afthe I must to open new page in which will be all information about it. For example like hypertext in browser.
<Border MaxHeight="300" MaxWidth="1140" CornerRadius="25" Margin="73,269,65,182">
<Grid x:Name="MainGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,10,-3">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Width="1031" ItemsSource="{Binding GetTopItem}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#DD000000"
x:Name="ListBook">
<ListView.DataContext>
<vm:BookMainVM/>
</ListView.DataContext>
<ListView.ItemTemplate>
<DataTemplate>
<Border HorizontalAlignment="Left" CornerRadius="25,25,25,25" BorderThickness="1" BorderBrush="#FF474747" Height="288" Margin="0,0,0,0" MouseDown="Border_MouseDown" >
<Grid Grid.Column="0" Height="Auto" Width="216" Margin="-1" IsEnabled="False">
<Grid.InputBindings>
<MouseBinding Gesture="LeftClick"
Command="{Binding DataContext.DelegateCommands,
RelativeSource={RelativeSource AncestorType=ListView}}"
CommandParameter="{Binding}">
</MouseBinding>
</Grid.InputBindings>
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<Border CornerRadius="25,25,0,0" RenderTransformOrigin="0.5,0.5">
<Border.Background>
<ImageBrush ImageSource="{Binding Img_src}" Stretch="Fill" />
</Border.Background>
</Border>
<Label Content="{Binding Rate}" Background="#FFBFBFBF" RenderTransformOrigin="0.5,0.5" Grid.Row="1" FontSize="11" FontFamily="Meiryo UI" HorizontalContentAlignment="Center"/>
<Border CornerRadius="0,0,25,25" Grid.Row="2" Background="#FF8F8F8F">
<TextBlock Margin="6,0,0,0" Text="{Binding Name}" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="2" Height="61" Width="190"/>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Border>
class ItemMainVM:ViewModel
{
private LibraryModel libraryModel;
private ItemDb itemsDb;
private const string Dir = "D:\\repos\\Frame\\Frame\\src";
public ItemMainVM()
{
libraryModel = new LibraryModel();
itemsDb = new BooksDb();
DelegateCommands = new DelegateCommand(o => EventHandler(o));
}
public ObservableCollection<BookPreviewInfo> GetTopItem
{
get
{
return libraryModel.GetTopItems();
}
}
public ICommand DelegateCommands { get; }
public void EventHandler(dynamic item)
{
itemDb.SelectItemId(item.Id);
}
}
Code Behind is empty.
When I click an element and executing EventHandler in ItemMainVM. And next must be create new page with new ElementViewModel.
ElementViewModel should to get information about element in ItemMainVM.
I've created a XAML UWP Listview
<ListView x:Name="ThisList"
Grid.Row="3"
Grid.ColumnSpan="7"
Background="LightBlue"
IsItemClickEnabled="True"
BorderBrush="Black"
BorderThickness="2"
ItemClick="ThisList_ItemClick">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Black">
<Grid.Resources>
<local:ColourConverter x:Key="CCX"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="10*" MinWidth="500"/>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="{Binding Icon}" HorizontalAlignment="Center" Margin="10"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Name="tbFileName" Text="{Binding FName}" VerticalAlignment="Center" Margin="5" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<!--<TextBlock Text="{Binding FTime}" VerticalAlignment="Center" Margin="5" />-->
<TextBlock Text="{Binding FTime}"
Name="FileTime"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="{Binding ElementName=FileTime,
Path=Text,
Mode=OneWay,
Converter={StaticResource CCX}}"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10" />
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The code behind is
var folderItem = new ObservableCollection<FolderInfo>();
foreach (StorageFolder folder in folderList)
{
BasicProperties pro = await folder.GetBasicPropertiesAsync();
folderItem.Add(new FolderInfo()
{
FName = folder.DisplayName,
FSize = "",
FTime = lastFileSave,
FIsFolder = true
});
}
foreach (StorageFile file in fileList)
{
BasicProperties pro = await file.GetBasicPropertiesAsync();
lastFileSave = file.DateCreated.ToString(Globals.TimeFormat);
folderItem.Add(new FolderInfo()
{
//FName = file.DisplayName,
FName = file.Name,
FSize = GetFileSize(pro.Size),
FTime = lastFileSave,
FIsFolder = false,
Icon="Document"
});
}
showLoadingBox(false);
FileInfo.Text += $"Last file saved : {lastFileSave}";
ThisList.ItemsSource = folderItem;
So my question is that I'd like to create a header row that I can click on the title and it re-sorts the ListView by that column, and if I click again it re-sorts descending.
What is the best way to achieve this?
Ok so there was no rush of answers so I have created a separate grid to make the header, and added a tapped event to requery the data source, but to do a query on it as it is assigned to the listview source as follows.
ThisList.ItemsSource = (from FolderInfo in folderItem
orderby FolderInfo.RealDateTime
select FolderInfo);
It's probably not the most efficient way of doing things, but currently the only way I can see of doing it without the ListView having some kind of sort method available.
Would appreciate any comments if there is a better way of doing it.
My page having city listing and searching functionality. When page first time loading, it is showing all record.
When user enter search Text and tap on search button. it is not updating gridview list. I check by placing debug point my code is working fine. but gridview list not showing updated list.
Following is my code.
XAML:
<StackPanel VerticalAlignment="Top">
<TextBlock Style="{StaticResource ListTextBlockStyle}" FontWeight="Bold" Text="{Binding Description}" />
<TextBlock Style="{StaticResource ListTextBlockStyle}" Text="{Binding Description}" />
</StackPanel>
<TextBlock Style="{StaticResource DistanceTextBlockStyle}" TextWrapping="Wrap" Text="XXXm" />
<Image Width="10" VerticalAlignment="Center" Source="ms-appx:///Assets/arrowright.png"/>
</StackPanel>
<Rectangle Height="1" Stroke="Black" StrokeThickness="0.5" Margin="0,3,0,0" />
</StackPanel>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Border Grid.Row="1" Height="60" VerticalAlignment="Bottom">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBox x:Name="txtSearch" Margin="0,0,10,0" TextWrapping="Wrap" PlaceholderText="Search" VerticalAlignment="Center" Width="300" Height="50" />
<Image x:Name="imgSearch" Height="50" Width="50" Source="ms-appx:///Assets/btnSearch.png" Tapped="imgSearch_Tapped"/>
</StackPanel>
</StackPanel>
</Border>
C#:
public List<City> gs_CityList = new List<City>();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
fillCityList();
}
private void fillCityList()
{
gs_CityList.Clear();
if (string.IsNullOrEmpty(CityListManagerManager.ms_searchTxt))
{
foreach (City foCity in CityListManagerManager.ms_CityList)
{
City loCity = new City();
loCity.Description = foCity.Description.Replace("\n", "").Substring(0, 15) + "...";
loCity.longtitude = foCity.longtitude;
loCity.latitude = foCity.latitude;
loCity.Location = foCity.Location;
gs_CityList.Add(loCity);
}
}
else
{
foreach (City foCity in CityListManagerManager.ms_CityList.Where(p => p.Description.ToLower().Contains(CityListManagerManager.ms_searchTxt.ToLower())))
{
City loCity = new City();
loCity.Description = foCity.Description.Replace("\n", "").Substring(0, 15) + "...";
loCity.longtitude = foCity.longtitude;
loCity.latitude = foCity.latitude;
loCity.Location = foCity.Location;
gs_CityList.Add(loAEDPin);
}
txtSearch.Text = CityListManagerManager.ms_searchTxt;
}
if (gs_CityList.Count > 0)
{
gvCityList.DataContext = gs_CityList; // --- This binding data to gridview
}
else
MessageBox("City not found...!");
}
private void imgSearch_Tapped(object sender, TappedRoutedEventArgs e)
{
CityListManagerManager.ms_searchTxt = txtSearch.Text.Trim();
fillCityList();
}
You should try changing your List<City> into an ObservableCollection<City>, as this allows the binding to get notified about changes.
You could also think about using a CollectionViewSource as data source for the GridView and modifying its Filter property instead of re-filling the collection.
Requirement:-
Want to show the contact list with alphabets groups.
Using Long list selector displays the contacts list. In xaml, we mention the IsFlatList="false" in long list selector for grouping, but it displays the contacts list without groups like list box.
I herewith attached my code for your comments, please let me know where I did mistake in my code.
<phone:PhoneApplicationPage.Resources>
<!--Heading for the items(a,b,c,d) -->
<DataTemplate x:Key="GroupItemHeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="480" Height="40" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="20" Padding="6" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
<!-- Heading For the list -->
<DataTemplate x:Key="ListHeader">
<Border Background="#FF049ED6" Height="40">
<TextBlock Text= "{Binding Key}" />
</Border>
</DataTemplate>
<!--Items to display-->
<DataTemplate x:Key="ItemTemplate" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ListImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,2,0,0" ImageFailed="Image_ImageFailed" />
<TextBlock Text="{Binding ListFullName}" Width="200" Foreground="Black" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22" />
<TextBlock Text="{Binding ListBio}" FlowDirection="LeftToRight" Foreground="Black" Margin="-200,50,0,0" FontWeight="ExtraLight" FontSize="20" />
</StackPanel>
</DataTemplate>
<!--Group Intems Panel to show when click on Items Header-->
<ItemsPanelTemplate x:Key="GroupItemsPanel">
<toolkit:WrapPanel ItemHeight="105" ItemWidth="105"></toolkit:WrapPanel>
</ItemsPanelTemplate>
</phone:PhoneApplicationPage.Resources>
<toolkit:LongListSelector x:Name="LongListSelectorListBox" ItemsSource="{Binding Content}"
Margin="0,235,5,104" Width="480" Background="Transparent" IsFlatList="True"
DisplayAllGroups="False" ItemTemplate="{StaticResource ItemTemplate}"
GroupHeaderTemplate="{StaticResource GroupItemHeaderTemplate}"
ListHeaderTemplate="{StaticResource ListHeader}" GroupItemsPanel="{StaticResource GroupItemsPanel}"
SelectionChanged="LongListSelectorListBox_SelectionChanged" />
ViewModel:-
ServiceModel sm = new ServiceModel();
Content = new ObservableCollection<ListContactsModel>();
Content1 = new ObservableCollection<ListContactsModel>();
ServiceConstants.Temp_Response = x;//Save The response temp
ObservableCollection<ListContactsModel> result = ListContactsModel.extract(x, sm, OutGoingInvitation);
ObservableCollection<ListContactsModel> result1 = ListContactsModel.extract(x, sm, IncomeInvitation);
AppGlobalConstants.Temp_Response = result;
if (!((string.IsNullOrEmpty(sm.NetErrorCode)) && (string.IsNullOrEmpty(sm.ProvResErrCode))))
{
string errCode = !string.IsNullOrEmpty(sm.NetErrorCode) ? sm.NetErrorCode : sm.ProvResErrCode;
string errDesc = !string.IsNullOrEmpty(sm.NetErrorDesc) ? sm.NetErrorDesc : sm.ProvResErrDesc;
MessageBox.Show(errCode + "/" + errDesc);
}else if (result.Count > 0)
{
Content.Clear();
Content1.Clear();
Content = result;//Outgoing Invitations
Content1 = result1;//Incoming Invitations
List<AlphaKeyGroup<ListContactsModel>> DataSource = AlphaKeyGroup<ListContactsModel>.CreateGroups(result,
System.Threading.Thread.CurrentThread.CurrentUICulture,
(ListContactsModel s) => { return s.ListFullName; },
true);
Console.WriteLine("Content.Count==>>" + Content.Count);
Console.WriteLine("DataSource.ElementAt(1).Key==>>" + DataSource.ElementAt(1).Key);
Console.WriteLine("DataSource.ElementAt(2).Key==>>" + DataSource.ElementAt(2).Key);
Regards,
Naresh T
I don't see whole code and I don't know what is ListContactsModel. Is it a collection (inherits from IEnumerable/List/...)? Does it have Items propery? Does it have GetEnumerator methods?
As far as I understand AlphaKeyGroup class was taken from here (if not, read it first) http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj244365(v=vs.105).aspx
So maybe you want to bind LongListSelector to some property, that receive data from DataSource and has the same type List<_AlphaKeyGroup<ListContactsModel>_> (not to Content)?
Here is a couple of articles about LongListSelector:
http://www.geekchamp.com/articles/wp7-longlistselector-in-depth--part1-visual-structure-and-api
http://www.geekchamp.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios (this one will be great for you)
First of all, follow the instructions.
In general grouping in LLS means, that you have collection of items, that consist of Key/Title/Header/whatever and inner collection of group elements.
I am trying to add an object to an ObservableCollection. As mentioned in a few question on this very site, I even tried to instantiate the collection before adding item. However, I am still getting the error. Here is my observation collection:
//Datacontext for local database
private WordDataContext wordsDB;
//Observable collection for binding
private ObservableCollection<WordItem> _wordItems = new ObservableCollection<WordItem>();
public ObservableCollection<WordItem> WordItems
{
get
{
return _wordItems;
}
set
{
if (_wordItems != value)
{
_wordItems = value;
NotifyPropertyChanged("WordItems");
}
}
}
I have overridden onNavigatedTo
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
// Define the query to gather all of the idea items.
var wordItemsInDB = from WordItem word in wordsDB.WordItems
select word;
// Execute the query and place the results into a collection.
WordItems = new ObservableCollection<WordItem>(wordItemsInDB);
// Call the base method.
base.OnNavigatedTo(e);
}
And here is the button to add new item
private void newIdeaAddButton_Click(object sender, RoutedEventArgs e)
{
//// Create a new idea item based on the text box.
//WordItem newIdea = new WordItem { WordName = "TestTest" };
//Debug.WriteLine("I'm here!");
//// Add a idea item to the observable collection.
//WordItems.Add(newIdea);
//// Add a idea item to the local database.
//wordsDB.WordItems.InsertOnSubmit(newIdea);
WordItem newword = new WordItem { WordName = "Bingo" };
if (WordItems == null)
{
Debug.WriteLine("I'm null!");
WordItems = new ObservableCollection<WordItem>();
}
WordItems.Add(newword);
wordsDB.WordItems.InsertOnSubmit(newword);
Debug.WriteLine("Did something!");
}
And here's the XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!--<ListBox Margin="14,0,-12,0" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}">
<ListBoxItem Content="About" Tap="GoToAbout"/>
</ListBox>-->
<telerikData:RadJumpList x:Name="TestList" IsStickyHeaderEnabled="True" Margin="14,0,-12,0" ItemsSource="{Binding WordItems}">
<telerikData:RadJumpList.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="74">
<Rectangle x:Name="Bully" Width="20" Fill="Gray" Height="62" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding WordItem}" VerticalAlignment="Top"/>
</StackPanel>
</DataTemplate>
</telerikData:RadJumpList.ItemTemplate>
<telerikData:RadJumpList.StickyHeaderTemplate>
<DataTemplate>
<Border HorizontalAlignment="Stretch" Background="{StaticResource PhoneBackgroundBrush}" Height="74">
<Border Background="{StaticResource PhoneAccentBrush}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="62" Height="62">
<TextBlock Text="{Binding}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Padding="7,0,0,0" VerticalAlignment="Bottom" Foreground="White" />
</Border>
</Border>
</DataTemplate>
</telerikData:RadJumpList.StickyHeaderTemplate>
<telerikData:RadJumpList.GroupHeaderTemplate>
<DataTemplate>
<Border HorizontalAlignment="Stretch" Background="{StaticResource PhoneBackgroundBrush}" Height="74">
<Border Background="{StaticResource PhoneAccentBrush}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="62" Height="62">
<TextBlock Text="{Binding}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Padding="7,0,0,0" VerticalAlignment="Bottom" Foreground="White" />
</Border>
</Border>
</DataTemplate>
</telerikData:RadJumpList.GroupHeaderTemplate>
<telerikData:RadJumpList.GroupPickerItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel HorizontalAlignment="Center" ItemHeight="111" ItemWidth="111"/>
</ItemsPanelTemplate>
</telerikData:RadJumpList.GroupPickerItemsPanel>
<telerikData:RadJumpList.GroupPickerItemTemplate>
<DataTemplate>
<Border Background="{StaticResource PhoneAccentBrush}" Width="99" Height="99" VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock Text="{Binding}" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Bottom" Foreground="White" />
</Border>
</DataTemplate>
</telerikData:RadJumpList.GroupPickerItemTemplate>
</telerikData:RadJumpList>
<Button x:Name="newIdeaAddButton" Click="newIdeaAddButton_Click" Content="Button" Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" />
</Grid>
Okay, I finally got the solution! The problem in itself is a bit obscure. The thing is that, earlier, I had RadJumplist bound to a List<strings> and it had GroupDescriptor defined accordingly
GenericGroupDescriptor<string, string> testgroup = new GenericGroupDescriptor<string, string>(listitem => listitem.Substring(0, 1).ToLower());
However, the scenario in question is about ObservableCollection<WordItem>. As soon as an item is added to the collection, the RadJumpList is notified about those changes and the GroupDescriptor proves to be invalid in that context. That somehow raises the NullReferenceException. It's a bit unintuitive to relate the error with the cause.
So, the simple solution was to change the descriptor as follows
GenericGroupDescriptor<WordItem, string> gengd = new GenericGroupDescriptor<WordItem, string>();
gengd.KeySelector = (WordItem item) =>
{
char keyhead = item.WordName[0];
return keyhead.ToString().ToLower();
};
This thing is not really well documented!