<HeaderedContentControl
    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"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="ItemsControl"
    Tag="https://www.noesisengine.com/docs/Gui.Core._ItemsControl.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="Represents a control that can be used to present a collection of items."/>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/e66ecf77a99ede4fd60d659b4ba8034e" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Items"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>By default an ItemsControl shows the collection of</Run>
                        <Run FontWeight="Bold">Items</Run>
                        <Run>as a vertical stack. Items can be of any type: a string, a number, a UIElement, etc.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <ItemsControl BorderBrush="{DynamicResource Brush.Border.Normal}" BorderThickness="1" Width="300" Padding="8,2">
                    This is a string inside an ItemsControl
                    <sys:Double>199.95</sys:Double>
                    <Rectangle Height="10" Fill="Red"/>
                    <Button Content="Button as an item" Margin="0,4" Padding="0,2"/>
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Width="12" Height="12" Fill="Blue"/>
                        <TextBlock Text="A Panel with children" VerticalAlignment="Center" Margin="10,0"/>
                    </StackPanel>
                </ItemsControl>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/b65eb010ec540ed413b89384fc764e44" TabIndex="200">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="ItemsSource and item visualization"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">ItemsSource</Run>
                        <Run>property can be used to bind a collection of items to the ItemsControl. Using an</Run>
                        <Run FontWeight="Bold">ObservableCollection&lt;T&gt;</Run>
                        <Run>as source will automatically update the UI when items get addded or removed from the collection.</Run>
                        <Run FontWeight="Bold">ItemsPanel</Run>
                        <Run>property is used to indicate how items are lay out inside the ItemsControl. And using</Run>
                        <Run FontWeight="Bold">ItemTemplate</Run>
                        <Run>property users can specify custom visualization for the data items.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Resources>
                    <GradientStopCollection x:Key="Colors">
                        <GradientStop Offset="0" Color="Red"/>
                        <GradientStop Offset="1" Color="OrangeRed"/>
                        <GradientStop Offset="2" Color="Orange"/>
                        <GradientStop Offset="3" Color="Yellow"/>
                        <GradientStop Offset="4" Color="Lime"/>
                        <GradientStop Offset="5" Color="Teal"/>
                        <GradientStop Offset="6" Color="Cyan"/>
                        <GradientStop Offset="7" Color="DodgerBlue"/>
                        <GradientStop Offset="8" Color="Blue"/>
                        <GradientStop Offset="9" Color="Purple"/>
                    </GradientStopCollection>
                    <ItemsPanelTemplate x:Key="PanelTemplate">
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                    <DataTemplate x:Key="ItemTemplate">
                        <StackPanel Margin="8,4,8,0">
                            <Rectangle Width="48" Height="24" Stroke="Black" StrokeThickness="2">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color="{Binding Color}"/>
                                </Rectangle.Fill>
                            </Rectangle>
                            <TextBlock Text="{Binding Color}" FontSize="10" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </Grid.Resources>
                <ItemsControl ItemsSource="{Binding Source={StaticResource Colors}}" ItemsPanel="{StaticResource PanelTemplate}" ItemTemplate="{StaticResource ItemTemplate}" BorderBrush="{DynamicResource Brush.Border.Normal}" BorderThickness="1" Width="340"/>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/77f67b615b42555e229d668f3e866b9d" TabIndex="300">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Virtualization"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>In order to achieve virtualization of items for an ItemsControl the following conditions should be satisfied:</Run><LineBreak/>
                        <Run/> <Run FontWeight="Bold">&#x2022;</Run>
                        <Run>ItemsControl template must include a</Run>
                        <Run FontWeight="Bold">ScrollViewer</Run><Run>.</Run><LineBreak/>
                        <Run/> <Run FontWeight="Bold">&#x2022; ItemsPanel</Run>
                        <Run>property needs to use a virtualizing panel like</Run>
                        <Run FontWeight="Bold">VirtualizingStackPanel</Run><Run>.</Run><LineBreak/>
                        <Run/> <Run FontWeight="Bold">&#x2022; ScrollViewer.CanContentScroll</Run>
                        <Run>property must be set to</Run>
                        <Run FontWeight="Bold">True</Run><Run>.</Run><LineBreak/>
                        <Run/> <Run FontWeight="Bold">&#x2022;</Run>
                        <Run>ItemsControl must have scrollable area, usually by specifying a fixed height.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Resources>
                    <GradientStopCollection x:Key="Items">
                        <GradientStop Offset="1"/>
                        <GradientStop Offset="2"/>
                        <GradientStop Offset="3"/>
                        <GradientStop Offset="4"/>
                        <GradientStop Offset="5"/>
                        <GradientStop Offset="6"/>
                        <GradientStop Offset="7"/>
                        <GradientStop Offset="8"/>
                        <GradientStop Offset="9"/>
                        <GradientStop Offset="10"/>
                        <GradientStop Offset="11"/>
                        <GradientStop Offset="12"/>
                        <GradientStop Offset="13"/>
                        <GradientStop Offset="14"/>
                        <GradientStop Offset="15"/>
                        <GradientStop Offset="16"/>
                        <GradientStop Offset="17"/>
                        <GradientStop Offset="18"/>
                        <GradientStop Offset="19"/>
                        <GradientStop Offset="20"/>
                        <GradientStop Offset="21"/>
                        <GradientStop Offset="22"/>
                        <GradientStop Offset="23"/>
                        <GradientStop Offset="24"/>
                        <GradientStop Offset="25"/>
                        <GradientStop Offset="26"/>
                        <GradientStop Offset="27"/>
                        <GradientStop Offset="28"/>
                        <GradientStop Offset="29"/>
                        <GradientStop Offset="30"/>
                    </GradientStopCollection>
                    <ItemsPanelTemplate x:Key="PanelTemplate">
                        <VirtualizingStackPanel/>
                    </ItemsPanelTemplate>
                    <DataTemplate x:Key="ItemTemplate">
                        <TextBlock Text="{Binding Offset, StringFormat='Data Item {0}'}"/>
                    </DataTemplate>
                    <ControlTemplate x:Key="VirtualizedItems" TargetType="ItemsControl">
                        <ScrollViewer BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Grid.Resources>
                <ItemsControl ItemsSource="{Binding Source={StaticResource Items}}" ItemsPanel="{StaticResource PanelTemplate}" ItemTemplate="{StaticResource ItemTemplate}" Template="{StaticResource VirtualizedItems}" ScrollViewer.CanContentScroll="True" VirtualizingPanel.ScrollUnit="Pixel" BorderBrush="{DynamicResource Brush.Border.Normal}" BorderThickness="1" Width="150" Height="80" Padding="8,4"/>
            </Grid>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>