<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.ItemsRepeaterPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    xmlns:common="clr-namespace:ModernWpf.SampleApp.Common"
    xmlns:l="clr-namespace:ModernWpf.SampleApp.ControlPages"
    mc:Ignorable="d"
    SnapsToDevicePixels="True"
    Loaded="OnLoaded">

    <Page.Resources>
        <Style TargetType="ui:NumberBox">
            <Setter Property="SpinButtonPlacementMode" Value="Inline" />
            <Setter Property="Minimum" Value="0" />
        </Style>

        <DataTemplate x:Key="HorizontalBarTemplate">
            <Border
                Tag="{DynamicResource SystemChromeLowColor}"
                Background="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                Width="{Binding MaxLength, Mode=OneTime}">
                <Rectangle
                    Tag="{DynamicResource SystemAccentColor}"
                    Fill="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                    Width="{Binding Length, Mode=OneTime}"
                    Height="24"
                    HorizontalAlignment="Left" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="VerticalBarTemplate">
            <Border
                Tag="{DynamicResource SystemChromeLowColor}"
                Background="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                Height="{Binding MaxHeight, Mode=OneTime}">
                <Rectangle
                    Tag="{DynamicResource SystemAccentColor}"
                    Fill="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                    Height="{Binding Height, Mode=OneTime}"
                    Width="48"
                    VerticalAlignment="Top" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="CircularTemplate">
            <Grid>
                <Ellipse
                    Tag="{DynamicResource SystemChromeLowColor}"
                    Fill="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                    Height="{Binding MaxDiameter, Mode=OneTime}"
                    Width="{Binding MaxDiameter, Mode=OneTime}"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center" />
                <Ellipse
                    Tag="{DynamicResource SystemAccentColor}"
                    Fill="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}"
                    Height="{Binding Diameter, Mode=OneTime}"
                    Width="{Binding Diameter, Mode=OneTime}"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="NormalItemTemplate">
            <Button
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Tag="{DynamicResource SystemChromeLowColor}"
                Background="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}">
                <TextBlock Text="{Binding}" />
            </Button>
        </DataTemplate>

        <DataTemplate x:Key="AccentItemTemplate">
            <Button
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Tag="{DynamicResource SystemAccentColor}"
                Background="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource ColorToBrushConverter}}">
                <TextBlock Text="{Binding}" />
            </Button>
        </DataTemplate>

        <DataTemplate x:Key="StringDataTemplate">
            <Grid
                Background="{DynamicResource SystemControlBackgroundAccentBrush}"
                Margin="10">
                <TextBlock
                    Padding="10"
                    Text="{Binding}"
                    Foreground="{DynamicResource SystemControlForegroundChromeWhiteBrush}"
                    HorizontalAlignment="Center"
                    TextWrapping="Wrap"
                    VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="IntDataTemplate">
            <Grid
                Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}"
                Margin="10">
                <TextBlock
                    Padding="10"
                    Text="{Binding}"
                    Style="{StaticResource HeaderTextBlockStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="CategoryTemplate">
            <StackPanel>
                <TextBlock
                    Text="{Binding CategoryName, Mode=OneTime}"
                    Padding="8"
                    Style="{StaticResource TitleTextBlockStyle}" />
                <ui:ItemsRepeater
                    x:Name="innerRepeater"
                    ItemsSource="{Binding CategoryItems, Mode=OneTime}"
                    ItemTemplate="{StaticResource StringDataTemplate}">
                    <ui:ItemsRepeater.Layout>
                        <ui:StackLayout Orientation="Horizontal" />
                    </ui:ItemsRepeater.Layout>
                </ui:ItemsRepeater>
            </StackPanel>
        </DataTemplate>

        <ui:StackLayout
            x:Key="VerticalStackLayout"
            Orientation="Vertical"
            Spacing="8" />
        <ui:StackLayout
            x:Key="HorizontalStackLayout"
            Orientation="Horizontal"
            Spacing="8" />
        <ui:UniformGridLayout
            x:Key="UniformGridLayout"
            MinRowSpacing="8"
            MinColumnSpacing="8" />

        <common:ActivityFeedLayout
            x:Key="MyFeedLayout"
            ColumnSpacing="12"
            RowSpacing="12"
            MinItemSize="80, 108" />
        <ui:UniformGridLayout
            x:Key="UniformGridLayout2"
            MinItemWidth="108"
            MinItemHeight="108"
            MinRowSpacing="12"
            MinColumnSpacing="12" />

        <l:MyDataTemplateSelector
            x:Key="MyDataTemplateSelector"
            Normal="{StaticResource NormalItemTemplate}"
            Accent="{StaticResource AccentItemTemplate}" />

        <l:StringOrIntTemplateSelector
            x:Key="StringOrIntTemplateSelector"
            StringTemplate="{StaticResource StringDataTemplate}"
            IntTemplate="{StaticResource IntDataTemplate}" />

        <DataTemplate x:Key="ContactListViewTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Ellipse
                    x:Name="Ellipse"
                    Grid.RowSpan="2"
                    Width="32"
                    Height="32"
                    Margin="6"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Fill="Gray" />
                <TextBlock
                    Grid.Column="1"
                    Text="{Binding Name, Mode=OneTime}"
                    Style="{StaticResource BaseTextBlockStyle}"
                    Margin="12,6,0,0" />
                <TextBlock
                    Grid.Column="1"
                    Grid.Row="1"
                    Text="{Binding Company}"
                    Style="{StaticResource BodyTextBlockStyle}"
                    Margin="12,0,0,6" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <TabControl
        x:Name="tabControl"
        Style="{StaticResource TabControlPivotStyle}"
        Padding="12,0">
        <TabControl.Resources>
            <Thickness x:Key="PivotItemMargin">12,0,12,20</Thickness>
        </TabControl.Resources>

        <TabItem Header="Overview">
            <ScrollViewer Margin="0,0,-24,-20">
                <ui:SimpleStackPanel
                    Spacing="16"
                    Margin="0,0,24,20">
                    <sc:ControlExample HeaderText="Basic, non-interactive items laid out by ItemsRepeater">
                        <ui:ItemsRepeaterScrollHost MaxHeight="500">
                            <ScrollViewer HorizontalScrollBarVisibility="Auto">
                                <ui:ItemsRepeater
                                    x:Name="repeater"
                                    Layout="{StaticResource VerticalStackLayout}"
                                    ItemTemplate="{StaticResource HorizontalBarTemplate}" />
                            </ScrollViewer>
                        </ui:ItemsRepeaterScrollHost>
                        <sc:ControlExample.Options>
                            <ui:SimpleStackPanel Spacing="12">
                                <Button
                                    x:Name="AddBtn"
                                    Content="Add Item"
                                    Click="AddBtn_Click"
                                    MinWidth="150" />
                                <Button
                                    x:Name="DeleteBtn"
                                    Content="Remove Item"
                                    Click="DeleteBtn_Click"
                                    MinWidth="150" />

                                <RadioButton
                                    x:Name="VStackBtn"
                                    GroupName="Sample1Layouts"
                                    Margin="0,24,0,0"
                                    Content="StackLayout - Vertical"
                                    Click="RadioBtn_Click"
                                    Tag="VerticalStackLayout"
                                    IsChecked="True" />
                                <RadioButton
                                    x:Name="HStackBtn"
                                    GroupName="Sample1Layouts"
                                    Content="StackLayout - Horizontal"
                                    Tag="HorizontalStackLayout"
                                    Click="RadioBtn_Click" />
                                <RadioButton
                                    x:Name="HGridBtn"
                                    GroupName="Sample1Layouts"
                                    Content="UniformGridLayout"
                                    Tag="UniformGridLayout"
                                    Click="RadioBtn_Click" />
                            </ui:SimpleStackPanel>
                        </sc:ControlExample.Options>
                    </sc:ControlExample>

                    <sc:ControlExample
                        HeaderText="Virtualizing, scrollable list of items laid out by ItemsRepeater"
                        HorizontalContentAlignment="Stretch">

                        <!--
                            ItemsRepeaterScrollHost enables ItemsRepeater to coordinate with ScrollViewer down-level.
                            It's not needed on 17700+ builds.
                        -->
                        <ui:ItemsRepeaterScrollHost>
                            <ScrollViewer
                                x:Name="scrollViewer"
                                Height="400"
                                Padding="0,0,16,0">

                                <ui:ItemsRepeater
                                    x:Name="repeater2"
                                    Margin="0,0,12,0"
                                    HorizontalAlignment="Stretch"
                                    Layout="{StaticResource MyFeedLayout}"
                                    ItemTemplate="{StaticResource MyDataTemplateSelector}" />

                            </ScrollViewer>
                        </ui:ItemsRepeaterScrollHost>

                        <sc:ControlExample.Options>
                            <ui:SimpleStackPanel Spacing="12">
                                <RadioButton
                                    GroupName="Sample2Layouts"
                                    Content="Uniform grid"
                                    Tag="UniformGridLayout2"
                                    Click="LayoutBtn_Click" />
                                <RadioButton
                                    GroupName="Sample2Layouts"
                                    IsChecked="True"
                                    Content="Custom virtualizing layout"
                                    Tag="MyFeedLayout"
                                    Click="LayoutBtn_Click" />
                            </ui:SimpleStackPanel>
                        </sc:ControlExample.Options>
                    </sc:ControlExample>

                    <sc:ControlExample HeaderText="ItemsRepeater with mixed-type collection">
                        <StackPanel>
                            <TextBlock
                                Text="This is an ItemsRepeater that displays both integer and string items. It uses a DataTemplateSelector to choose the correct layout for each of its items."
                                TextWrapping="Wrap" />
                            <ui:ItemsRepeater
                                x:Name="MixedTypeRepeater"
                                Margin="0,0,12,0"
                                HorizontalAlignment="Stretch"
                                ItemTemplate="{StaticResource StringOrIntTemplateSelector}">

                                <ui:ItemsRepeater.Layout>
                                    <ui:UniformGridLayout
                                        MinItemWidth="200"
                                        MinItemHeight="200" />
                                </ui:ItemsRepeater.Layout>
                            </ui:ItemsRepeater>
                        </StackPanel>
                    </sc:ControlExample>

                    <sc:ControlExample HeaderText="Laying out nested ItemsRepeaters">
                        <ui:ItemsRepeater
                            x:Name="outerRepeater"
                            VerticalAlignment="Top"
                            ItemTemplate="{StaticResource CategoryTemplate}">

                            <ui:ItemsRepeater.Layout>
                                <ui:StackLayout Orientation="Vertical" />
                            </ui:ItemsRepeater.Layout>

                        </ui:ItemsRepeater>
                    </sc:ControlExample>

                </ui:SimpleStackPanel>
            </ScrollViewer>
        </TabItem>

        <TabItem Header="StackLayout">
            <sc:ControlExample
                HeaderText="StackLayout"
                Style="{StaticResource ControlExampleFullStyle}">
                <sc:ControlExample.Resources>
                    <ui:StackLayout x:Key="stackLayout" />
                    <l:SpacingConverter x:Key="SpacingConverter" />
                </sc:ControlExample.Resources>

                <ui:ItemsRepeaterScrollHost>
                    <ScrollViewer>
                        <ui:ItemsRepeater
                            Layout="{StaticResource stackLayout}"
                            ItemTemplate="{StaticResource ContactListViewTemplate}"
                            ItemsSource="{Binding}" />
                    </ScrollViewer>
                </ui:ItemsRepeaterScrollHost>

                <sc:ControlExample.Options>
                    <ui:SimpleStackPanel Style="{StaticResource OptionsPanelStyle}">
                        <ui:NumberBox
                            Header="Spacing"
                            Value="{Binding Source={StaticResource stackLayout}, Path=Spacing, Converter={StaticResource SpacingConverter}}" />
                        <Button
                            x:Name="changeFirstItemButton"
                            Content="Change first item"
                            Click="ChangeFirstItemButton_Click" />
                        <Button
                            x:Name="modifyFirstItemButton"
                            Content="Modify first item"
                            Click="ModifyFirstItemButton_Click" />
                    </ui:SimpleStackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>
        </TabItem>

        <TabItem Header="UniformGridLayout">
            <sc:ControlExample
                HeaderText="UniformGridLayout"
                Style="{StaticResource ControlExampleFullStyle}">
                <sc:ControlExample.Resources>
                    <ui:UniformGridLayout
                        x:Key="uniformGridLayout"
                        MinItemWidth="240"
                        MinColumnSpacing="24" />
                </sc:ControlExample.Resources>

                <ui:ItemsRepeaterScrollHost>
                    <ScrollViewer>
                        <ScrollViewer.Style>
                            <Style TargetType="ScrollViewer" BasedOn="{StaticResource {x:Type ScrollViewer}}">
                                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
                                <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Source={StaticResource uniformGridLayout}, Path=Orientation}" Value="Vertical">
                                        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ScrollViewer.Style>
                        <ui:ItemsRepeater
                            x:Name="UniformGridLayoutRepeater"
                            Layout="{StaticResource uniformGridLayout}"
                            ItemTemplate="{StaticResource ContactListViewTemplate}"
                            ItemsSource="{Binding}" />
                    </ScrollViewer>
                </ui:ItemsRepeaterScrollHost>

                <sc:ControlExample.Options>
                    <ScrollViewer Margin="-16">
                        <ui:SimpleStackPanel
                            Margin="16"
                            Style="{StaticResource OptionsPanelStyle}">
                            <ui:NumberBox
                                Header="MinItemWidth"
                                Value="{Binding Source={StaticResource uniformGridLayout}, Path=MinItemWidth}" />
                            <ui:NumberBox
                                Header="MinItemHeight"
                                Value="{Binding Source={StaticResource uniformGridLayout}, Path=MinItemHeight}" />
                            <ui:NumberBox
                                Header="MinRowSpacing"
                                Value="{Binding Source={StaticResource uniformGridLayout}, Path=MinRowSpacing}" />
                            <ui:NumberBox
                                Header="MinColumnSpacing"
                                Value="{Binding Source={StaticResource uniformGridLayout}, Path=MinColumnSpacing}" />
                            <ui:NumberBox
                                Header="MaximumRowsOrColumns"
                                Minimum="-1"
                                Value="{Binding Source={StaticResource uniformGridLayout}, Path=MaximumRowsOrColumns}" />
                            <ui:RadioButtons
                                Header="ItemsStretch"
                                ItemsSource="{Binding Source={x:Type ui:UniformGridLayoutItemsStretch}, Converter={StaticResource EnumValuesConverter}}"
                                SelectedItem="{Binding Source={StaticResource uniformGridLayout}, Path=ItemsStretch}" />
                            <ui:RadioButtons
                                Header="ItemsJustification"
                                ItemsSource="{Binding Source={x:Type ui:UniformGridLayoutItemsJustification}, Converter={StaticResource EnumValuesConverter}}"
                                SelectedItem="{Binding Source={StaticResource uniformGridLayout}, Path=ItemsJustification}" />
                            <ui:RadioButtons
                                Header="Orientation"
                                ItemsSource="{Binding Source={x:Type Orientation}, Converter={StaticResource EnumValuesConverter}}"
                                SelectedItem="{Binding Source={StaticResource uniformGridLayout}, Path=Orientation}" />
                        </ui:SimpleStackPanel>
                    </ScrollViewer>
                </sc:ControlExample.Options>
            </sc:ControlExample>
        </TabItem>

        <TabItem Header="FlowLayout">
            <sc:ControlExample
                HeaderText="FlowLayout"
                Style="{StaticResource ControlExampleFullStyle}">
                <sc:ControlExample.Resources>
                    <ui:FlowLayout
                        x:Key="flowLayout"
                        MinRowSpacing="24" />
                </sc:ControlExample.Resources>

                <ui:ItemsRepeaterScrollHost>
                    <ScrollViewer>
                        <ScrollViewer.Style>
                            <Style TargetType="ScrollViewer" BasedOn="{StaticResource {x:Type ScrollViewer}}">
                                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
                                <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Source={StaticResource flowLayout}, Path=Orientation}" Value="Vertical">
                                        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ScrollViewer.Style>
                        <ui:ItemsRepeater
                            Layout="{StaticResource flowLayout}"
                            ItemTemplate="{StaticResource ContactListViewTemplate}"
                            ItemsSource="{Binding}" />
                    </ScrollViewer>
                </ui:ItemsRepeaterScrollHost>

                <sc:ControlExample.Options>
                    <ScrollViewer Margin="-16">
                        <ui:SimpleStackPanel
                            Margin="16"
                            Style="{StaticResource OptionsPanelStyle}">
                            <ui:RadioButtons
                                Header="Orientation"
                                ItemsSource="{Binding Source={x:Type Orientation}, Converter={StaticResource EnumValuesConverter}}"
                                SelectedItem="{Binding Source={StaticResource flowLayout}, Path=Orientation}" />
                            <ui:NumberBox
                                ui:ControlHelper.Header="MinRowSpacing"
                                Value="{Binding Source={StaticResource flowLayout}, Path=MinRowSpacing}" />
                            <ui:NumberBox
                                ui:ControlHelper.Header="MinColumnSpacing"
                                Value="{Binding Source={StaticResource flowLayout}, Path=MinColumnSpacing}" />
                            <ui:RadioButtons
                                Header="LineAlignment"
                                ItemsSource="{Binding Source={x:Type ui:FlowLayoutLineAlignment}, Converter={StaticResource EnumValuesConverter}}"
                                SelectedItem="{Binding Source={StaticResource flowLayout}, Path=LineAlignment}" />
                        </ui:SimpleStackPanel>
                    </ScrollViewer>
                </sc:ControlExample.Options>
            </sc:ControlExample>
        </TabItem>
    </TabControl>
</ui:Page>
