This example shows a nice fluid movement for items in a wrapping listbox.
Click here to open the Silverlight page and resize your browser:
http://stevenhollidge.com/blog-source-code/animatedlistbox
SL version: https://github.com/stevenh77/AnimatedListboxSL
WPF version: https://github.com/stevenh77/AnimatedListboxWPF
Another one I always forget… this example also removes the scrollviewer but you can can easily add it in after without the 1 margin that comes with the default Listbox.
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
An items control that inserts at the top of the list, fades in new item, provides modern scroll bar and data templates.
Here’s a quick heads up on how to display multiple pieces of data horizontally so that it wraps around onto the next line.
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Ermmm, yeah that’s it!
The list will auto rearrange if the window/listbox is resized.
Here’s the full source with the ListBox.ItemTemplate DataTemplate binding to a list of int’s, supplied in the C# code behind file.
<Window x:Class="WrappingListbox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="Wrapping Listbox"
Width="525"
Height="350"
Icon="ICON.ico"
mc:Ignorable="d">
<Grid>
<ListBox x:Name="listbox1" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel ItemHeight="100"
ItemWidth="100"
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20" HorizontalAlignment="Center">
<Viewbox>
<Grid x:Name="backgroundGrid"
Width="48"
Height="48">
<Rectangle x:Name="Rect" Fill="Orange" />
<Label HorizontalContentAlignment="Center"
Content="{Binding}"
FontFamily="Segoe UI"
FontSize="24"
Foreground="White" />
</Grid>
</Viewbox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
using System.Linq;
namespace WrappingListbox
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
listbox1.ItemsSource = Enumerable.Range(1, 100);
}
}
}
Source: http://stevenhollidge.com/blog-source-code/WrappingListbox.zip
To override the default blue background when an item is selected as shown here:
We can make the colour red by setting the ItemsContainerStyle:
<Window.Resources>
<Style x:Key="CustomListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
</Style.Resources>
</Style>
</Window.Resources>
<ListBox x:Name="listbox1"
ItemContainerStyle="{StaticResource CustomListBoxItemStyle}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
.....
</ListBox>
Or maybe we’d prefer to have complete control over the the template.
In that case we can use a tool such as StyleSnooper to retrieve the full style including templates and amend them as we see fit.
In this example I set the selected background to a grey colour and rounded the corners.
<Window x:Class="WrappingListbox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
Title="Wrapping Listbox"
Width="525"
Height="350"
Icon="ICON.ico">
<Window.Resources>
<Style x:Key="CustomListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Control.HorizontalContentAlignment">
<Setter.Value>
<Binding Path="HorizontalContentAlignment" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl, AncestorLevel=1}" />
</Setter.Value>
</Setter>
<Setter Property="Control.VerticalContentAlignment">
<Setter.Value>
<Binding Path="VerticalContentAlignment" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl, AncestorLevel=1}" />
</Setter.Value>
</Setter>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>2,0,0,0</Thickness>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Bd"
Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
Content="{TemplateBinding ContentControl.Content}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected">
<Setter TargetName="Bd" Property="CornerRadius" Value="15" />
<Setter TargetName="Bd" Property="Panel.Background" Value="Gainsboro" />
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected">
<Condition.Value>
<s:Boolean>True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="listbox1"
ItemContainerStyle="{StaticResource CustomListBoxItemStyle}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel ItemHeight="100"
ItemWidth="100"
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20" HorizontalAlignment="Center">
<Viewbox>
<Grid x:Name="backgroundGrid"
Width="48"
Height="48">
<Rectangle x:Name="Rect" Fill="Orange" />
<Label HorizontalContentAlignment="Center"
Content="{Binding}"
FontFamily="Segoe UI"
FontSize="24"
Foreground="White" />
</Grid>
</Viewbox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Using the VisualStateManager we have set the MouseEnter to animate to blue (the mouse is hovering over the number 6 although you can’t see the pointer in the image).
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#FF6DBDD1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
This code is nested beneath a border control with the x:Name property set of “Bd”.
We have the simple scenario of a web server exposing a menu data as plain old xml (POX). Our Silverlight application would like to consume this data and display it in a simple list box.
Here’s how it’s done:
It’s as easy as that.
You can download the source code here:
http://stevenhollidge.com/blog-source-code/SilverlightXmlService.zip
