The ItemsControl is used to present a collection of items.The ItemsControl has no default visual appearance. Use the Template property to specify a ControlTemplate to define the appearance of an ItemsControl.
The ItemsPresenter uses the specified ItemsPanelTemplate to layout the items. If an ItemsPanelTemplate is not specified, the default is used. For ItemsControl, the default is an ItemsPanelTemplate that specifies a StackPanel.
Use the ItemsPanel property to specify an ItemsPanelTemplate that defines the panel that is used to hold the generated items. In other words, use this property if you want to affect how the items are laid out.
Use the ItemTemplate to set a DataTemplate to define the visualization of the data objects.This DataTemplate specifies that each data object appears with the Priority and TaskName.
Use the ItemContainerStyle property to specify the appearance of the element that contains the data. This ItemContainerStyle gives each item container a margin and a width.
There is also a trigger that sets a tooltip that shows the description of the data object when the mouse hovers over the item container.
Example Code:
<ItemsControl Margin="8"
ItemsSource="{Binding Source={StaticResource workingdata}}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="Green" BorderThickness="3" CornerRadius="19">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="21"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</DataTemplate.Resources>
<Grid>
<Ellipse Fill="Aqua"/>
<StackPanel>
<TextBlock Margin="5,3,2,0"
Text="{Binding Path=Priority}"/>
<TextBlock Margin="2,0,2,5"
Text="{Binding Path=TaskName}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Width" Value="100"/>
<Setter Property="Control.Margin" Value="9"/>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=Content.Description}"/>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>