A simple ItemsControl example
<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib" Title="ItemsControlSample" Height="150" Width="200"> <Grid Margin="10"> <ItemsControl> <system:String>ItemsControl Item #1</system:String> <system:String>ItemsControl Item #2</system:String> <system:String>ItemsControl Item #3</system:String> <system:String>ItemsControl Item #4</system:String> <system:String>ItemsControl Item #5</system:String> </ItemsControl> </Grid> </Window>
ItemsControl with data binding
<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlDataBindingSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ItemsControlDataBindingSample" Height="150" Width="300"> <Grid Margin="10"> <ItemsControl Name="icTodoList"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid Margin="0,0,0,5"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Title}" /> <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" /> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </Window>
using System; using System.Windows; using System.Collections.Generic; namespace WpfTutorialSamples.ItemsControl { public partial class ItemsControlDataBindingSample : Window { public ItemsControlDataBindingSample() { InitializeComponent(); List<TodoItem> items = new List<TodoItem>(); items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 }); items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 }); items.Add(new TodoItem() { Title = "Wash the car", Completion = 0 }); icTodoList.ItemsSource = items; } } public class TodoItem { public string Title { get; set; } public int Completion { get; set; } } }
The ItemsPanelTemplate property
<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlPanelSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib" Title="ItemsControlPanelSample" Height="150" Width="250"> <Grid Margin="10"> <ItemsControl> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button Content="{Binding}" Margin="0,0,5,5" /> </DataTemplate> </ItemsControl.ItemTemplate> <system:String>Item #1</system:String> <system:String>Item #2</system:String> <system:String>Item #3</system:String> <system:String>Item #4</system:String> <system:String>Item #5</system:String> </ItemsControl> </Grid> </Window>
ItemsControl with scrollbars
<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib" Title="ItemsControlSample" Height="150" Width="200"> <Grid Margin="10"> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <ItemsControl> <system:String>ItemsControl Item #1</system:String> <system:String>ItemsControl Item #2</system:String> <system:String>ItemsControl Item #3</system:String> <system:String>ItemsControl Item #4</system:String> <system:String>ItemsControl Item #5</system:String> </ItemsControl> </ScrollViewer> </Grid> </Window>
References
https://www.wpf-tutorial.com/list-controls/itemscontrol/