We Keep Coding

Can I use a WrapPanel to organize ListView group headers?

I would like to be able to use a WrapPanel to wrap by group header instead of by item.
I have implemented the following ICollectionView view for a ListView bound to an ObservableCollection studentlist:
view = CollectionViewSource.GetDefaultView(studentlist);
view.GroupDescriptions.Add(new PropertyGroupDescription("sectionoutput"));
view.SortDescriptions.Add(new SortDescription("sectionoutput", ListSortDirection.Ascending));
view.SortDescriptions.Add(new SortDescription("displayname", ListSortDirection.Ascending));
The XAML includes a style resource to set the template for the group header:
<Style x:Key="ContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander Header="{Binding Name}" IsExpanded="{Binding Name, Mode=OneWay, Converter={StaticResource expanderconverter}}">
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This Style is used as the GroupStyle for the ListView:
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource ContainerStyle}"/>
</ListView.GroupStyle>
...
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding displayname}">
</TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As is, the code presents a vertical list of student names grouped by a header listing their section number. But I would like to list the groups sequentially in a horizontal direction.
I know that I am able to organize the items in the ListView with a WrapPanel:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" ItemWidth="150">
</WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
But this code merely displays the students in a group side by side rather than displaying the groups themselves side by side. What I would like to do is have the groups themselves wrapped horizontally. I've tried to implement a wrap panel in the style resource, but I haven't been successful and have been wondering if there is a way to wrap by group.
I figure it is possible to do this by switching to a TreeView and turning the groups into Items. But I would prefer to use a ListView if at all possible because my program implements a class that takes the ListView as an argument.

The GroupStyle has a Panel property that you can set to an ItemsPanelTemplate with a WrapPanel:
<ListView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource ContainerStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>

Suppose to have a ViewModel that is the DataContext of the XAML posted below that contains an ObservableCollection<GroupViewModel> named GroupsViewModel.
GroupViewModel merely has a property named GroupName that is the name of the Group to show and it has a property of ObservableCollection<StudentViewModel>.
StudentViewModel has the property displayName to display the name of the Student.
Said so, by using an Expander and 2 nested ListBox you can get what you asked, like the following code:
<ListBox ItemsSource="{Binding GroupsViewModel}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Expander HorizontalAlignment="Left" IsExpanded="True" Header="{Binding GroupName}">
<ListBox ItemsSource="{Binding StudentViewModel}" HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding displayname}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Expander>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

C# WPF: How to keep keyboard focus in main window?

I am working on a simple image viewer.
It contains a viewbox which shows the current image.
Below I added a thumbnail strip created by a wrappanel inside a listview which contains the thumbnails in viewboxes again.
I am able to switch the current image by key events (code excample "space", in real space and arrow keys). By clicking in one of the thumbs it is also possible to update the current image.
Unfortunately, whenever I select a thumb in the Listview, the Mainwindow looses keyboard focus and I am not able to use the keys anymore to switch the images.
I tried all solutions found in the net, but nothing really works, now I am completely lost.
Any ideas.
...
<Window.CommandBindings>
<CommandBinding Command="{x:Static local:MainWindow.command1}" CanExecute="command1CanExecute" Executed="handlecommand1"/>
</Window.CommandBindings>
<Window.InputBindings>
<KeyBinding Command="{x:Static local:MainWindow.command1}" Key="Space" />
</Window.InputBindings>
...
<DockPanel>
<ListView x:Name="ThumbSlider" ... Some Settings ... Focusable="False" MouseUp="ListboxMouseUp">
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Focusable" Value="False"/>
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate>
<Viewbox ... Some Settings ... ScrollViewer.VerticalScrollBarVisibility="Disabled" Height="120" Width="120" Focusable="False">
<Image Source="{Binding Path=ThumbImage}"></Image>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListView>
<Viewbox x:Name="CurrentImageBox" DockPanel.Dock="Top" >
<Image Source="{Binding Path=CurrentImage}"/>
</Viewbox>
...
</DockPanel>

GridView displays wrong data for last items WinRT

I've got a weird problem where a GridView I have bound to a CollectionViewSource shows the wrong data for the last items. But the actual binding is correct. If I listen for ItemClicked, the DataContext is correct, the UI is just displaying the info for a previous item in the GridView. My goal is to bind to a grouped set of data in a CollectionViewSource, but I've even had it happen if I'm just binding directly to an ObservableCollection.
Here's my XAML:
<Page.Resources>
<CollectionViewSource x:Name="CuratedCVS" IsSourceGrouped="True" />
</Page.Resources>
<SemanticZoom Padding="0">
<SemanticZoom.ZoomedInView>
<GridView x:Name="CuratedFeedsList"
ItemsSource="{Binding Source={StaticResource CuratedCVS}}"
ItemTemplate="{StaticResource CuratedFeedItemTemplate}"
SelectedItem="{Binding SelectedFeed, Mode=TwoWay}"
SelectionMode="Single"
IsSwipeEnabled="True"
IsSynchronizedWithCurrentItem="False"
ShowsScrollingPlaceholders="True"
Padding="20,0">
<GridView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource CuratedFeedHeaderTemplate}"/>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView Background="{Binding SecondaryBackgroundBrush, Source={StaticResource ThemeManager}}"
ItemsSource="{Binding Source={StaticResource CuratedCVS}, Path=CollectionGroups}"
ItemTemplate="{StaticResource CuratedFeedJumpTemplate}"
Padding="0,10">
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
And here's my code to group my data (which seems to work):
var result =
from f in CuratedFeeds
group f by f.Category into g
orderby g.Key
select g;
CuratedCVS.Source = result;
(Where CuratedFeeds is an ObservableCollection)
Has anyone seen this before? This only happens in a Windows 8.1 app. It works flawlessly in a Windows Phone 8.1 app.

So I discovered what the problem was, and unfortunately it didn't have anything to do with the code I posted. I was customizing the ItemContainerStyle, where I used this:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ListViewItemPresenter Content="{Binding}" Margin="0"
SelectedBackground="{Binding SecondaryBackgroundBrush, Source={StaticResource ThemeManager}}"
SelectedForeground="{Binding ForegroundBrush, Source={StaticResource ThemeManager}}"
PlaceholderBackground="{Binding BackgroundBrush, Source={StaticResource ThemeManager}}"
PointerOverBackground="{Binding SecondaryBackgroundBrush, Source={StaticResource ThemeManager}}"
SelectionCheckMarkVisualEnabled="False"
Padding="0,0,0,0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
In this code, the problem was the Content="{Binding}". I don't know why, but this was screwing up the data. All I had to do was remove the Content="{Binding}" and it worked perfectly.

Change ItemTemplate

I have the following 2 DataTemplates:
<DataTemplate x:Key="ItemPhoto">
<StackPanel>
<Image Source="{Binding Thumbail}" Height="80" Width="80" HorizontalAlignment="Stretch" Stretch="UniformToFill"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ItemAlbum">
<StackPanel>
<Image Source="{Binding Thumbail}" Height="100" Width="100" HorizontalAlignment="Stretch" Stretch="UniformToFill"/>
</StackPanel>
</DataTemplate>
And 1 GridView
<GridView Grid.Row="1" Name="lstFlickrControl"
SelectionMode="Multiple"
ItemTemplate="{StaticResource ItemPhoto}"
ItemClick="lstFlickrControl_ItemClick" Holding="lstFlickrControl_Holding">
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="2"/>
</Style>
</GridView.ItemContainerStyle>
</GridView>
I want that when I click the photo menu GridView it should load the ItemPhoto DataTemple but when I click the albums menu GridView it should load the ItemAlbums DataTemple. Can someone please make some suggestions?

Try this way, for example upon albums menu clicked change ItemTemplate to use ItemAlbum DataTemplate :
lstFlickrControl.ItemTemplate = (DataTemplate)this.Resources["ItemAlbum"];
note : you may need to change this in above sample to whatever UI control where you define those DataTemplates

How to set animations/transitions when adding elements to a ListViews?

I have got a ListView wich I added Elements by binding. The ListView looks like:
<ListView
x:Name="ListView"
Height="auto"
Width="350"
ItemsSource="{Binding}"
Padding="0,0,-20,0"
Grid.Row="1"
Grid.Column="0"
Background="#EFEFEF"
ItemContainerStyle="{StaticResource ListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Height="50" VerticalAlignment="Top" Margin="0,0,0,0"
<TextBlock Text="{Binding name} TextWrapping="NoWrap"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
With this basic setup there is already an animation when a element is bonded to the underlying List. Strangely to different animations are used. The first element slides in from the right and all other elements popup. I’m searching for a way to animate all added elements the same way (e.g. slide in from the right). I have been locking into the auto generated (by Blend) ListViewStyle for hours now but couldn't find something. Later I found out that it is possible to add this property inside the style:
<Style x:Key="ListViewStyle" TargetType="ListViewItem">
<Setter Property="Transitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="400" />
<PopupThemeTransition FromHorizontalOffset="400"/>
</TransitionCollection>
</Setter.Value>
</Setter>
...
</Style>
The EntranceThemeTransition and PopupThemeTransition seems to be the right properties because they change the behavior of the animation. But I don't know how to use them or how to disable one. How can I get just one animation (slide in from the right) to the ListView?

This should work:
<ListView
x:Name="lv">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel>
<VirtualizingStackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition
FromHorizontalOffset="400" />
</TransitionCollection>
</VirtualizingStackPanel.ChildrenTransitions>
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
*Update:
You can also use ListView.ItemContainerTransitions to define these transitions.