WPF ListBox Can you do a loop? IE didn't hit hard stops top and bottom
I have a WPF ListBox bound to a data object. Inside the list is a series of images with text. It is laid out horizontally and the mouse on the left or right side of the box scrolls through the items on the left or right, respectively.
let's say there are 20 items in the list. I am trying to figure out how, when I click on position 19 (based on 0), I can flip the window and start collecting so that it becomes 1 -19 and so on. This would also require switching the other path, so if you were on element 0 and scroll left, you would get 19.
I tried KeyboardNavigation.DirectionalNavigation = "Loop" but it doesn't do anything for me and I was grabbing at straws since it has nothing to do with the keyboard, it's all mouse based.
<ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}" Margin="24,-7,39,-19" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single" x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" Style="{DynamicResource ListBoxStyle1}" Background="Transparent" BorderThickness="0">
<ListBox.Resources>
<!-- override the system brushes so that selected items are transparent whether the ListBox has focus or not -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="20,10,20,10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Image}" MouseLeave="Image_MouseLeave" MouseEnter="Image_MouseEnter" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
source to share
The problem here is not with the ListBox , but with the ScrollViewer inside the control template; so to make the items loop you need to modify the ScrollViewer in some way . I wrote a control that comes from a ScrollViewer that loops vertically ... but it should be easy to see how to make it work horizontally too.
public class CyclicScrollViewer : ScrollViewer
{
public CyclicScrollViewer()
{
this.CommandBindings.Add(new CommandBinding(ScrollBar.LineUpCommand, LineCommandExecuted));
this.CommandBindings.Add(new CommandBinding(ScrollBar.LineDownCommand, LineCommandExecuted));
}
private void LineCommandExecuted(object sender, ExecutedRoutedEventArgs e)
{
if (e.Command == ScrollBar.LineUpCommand)
{
if (this.VerticalOffset == 0)
this.ScrollToEnd();
else
this.LineUp();
}
if (e.Command == ScrollBar.LineDownCommand)
{
if (this.VerticalOffset == this.ScrollableHeight)
this.ScrollToTop();
else
this.LineDown();
}
}
}
The ScrollTo ... and Line ... methods already exist on the ScrollViewer , which makes coding pretty straightforward. All I do is check the current offset against the bounds of the viewer before scrolling.
The next step is to insert a new ScrollViewer into the control template for the target control, in this case the ListBox . Here's a snippet of XAML to demonstrate this.
<ControlTemplate x:Key="{x:Type ListBox}" TargetType="ListBox">
...
<l:CyclicScrollViewer
Padding="{TemplateBinding Control.Padding}"
Focusable="False">
<ItemsPresenter ... />
</l:CyclicScrollViewer>
...
</ControlTemplate>
I posted a sample application that uses this code here . This sample does not support keyboard, but you can simply add it by overriding the OnKeyDown method and executing the appropriate Line commands .... Hope this helps.
source to share
There are a number of free and commercial WPF carousel implementations that do this. Take a look at this review http://mdavey.wordpress.com/2007/04/03/wpf-carousel/
source to share