<!--
    //*********************************************************
    //
    // Copyright (c) Microsoft. All rights reserved.
    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
    //
    //*********************************************************
-->
<local:ItemsPageBase
    x:Class="ModernWpf.SampleApp.ControlPages.ListView2Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:ModernWpf.SampleApp"
    xmlns:data="clr-namespace:ModernWpf.SampleApp.Data"
    xmlns:local1="clr-namespace:ModernWpf.SampleApp.ControlPages"
    xmlns:cm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
    <Page.Resources>
        <local1:ContactGroupKeyConverter x:Key="ContactGroupKeyConverter" />

        <!--
            Use a collection view source for content that presents itself as a list of items that can be grouped or sorted.  Otherwise, you can use x:Bind
            directly on the ListView's item source to for further optimization. Please see the AppUIBasics sample for an example of how to do this.
        -->
        <CollectionViewSource x:Key="ContactsCVS">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription
                    PropertyName="LastName"
                    Converter="{StaticResource ContactGroupKeyConverter}" />
            </CollectionViewSource.GroupDescriptions>
            <CollectionViewSource.SortDescriptions>
                <cm:SortDescription PropertyName="LastName" />
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>

        <!-- When using x:Bind, you need to set x:DataType -->
        <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="{DynamicResource SystemControlBackgroundBaseMediumBrush}" />
                <TextBlock
                    Grid.Column="1"
                    Text="{Binding Name, Mode=OneTime}"
                    Style="{DynamicResource BaseTextBlockStyle}"
                    Margin="12,6,0,0" />
                <TextBlock
                    Grid.Column="1"
                    Grid.Row="1"
                    Text="{Binding Company, Mode=OneTime}"
                    Style="{DynamicResource BodyTextBlockStyle}"
                    Margin="12,0,0,6" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="BasicListViewTemplate">
            <TextBlock
                Text="{Binding Name, Mode=OneTime}"
                Margin="0,5,0,5" />
        </DataTemplate>
    </Page.Resources>
    <ScrollViewer>
        <ui:SimpleStackPanel Margin="{StaticResource ControlPageContentMargin}">

            <sc:ControlExample HeaderText="Basic ListView with Simple DataTemplate">
                <StackPanel>
                    <TextBlock Margin="0,0,0,15">
                        This is a basic ListView that has the full source code below.<LineBreak />
                        Other samples on this page display only the additional markup needed to customize a simple ListView like this one.</TextBlock>
                    <ui:ListView
                        x:Name="BaseExample"
                        ItemTemplate="{StaticResource BasicListViewTemplate}"
                        BorderThickness="1"
                        BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
                        Width="350"
                        Height="400"
                        HorizontalAlignment="Left" />
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="ListView with Selection Support">
                <StackPanel>
                    <RichTextBox
                        Style="{StaticResource RichTextBlockStyle}"
                        Margin="0,0,0,15">
                        <local1:NoPaddingFlowDocument>
                            <Paragraph>You can enable four different selection modes on the right.</Paragraph>
                            <Paragraph>
                                <Bold>None</Bold>
                                disables selection all together.</Paragraph>
                            <Paragraph>
                                <Bold>Single</Bold>
                                allows for only one item to be selected in the list.</Paragraph>
                            <Paragraph>
                                <Bold>Multiple</Bold>
                                causes checkboxes to appear next to items, so that multiple items can be chosen from the list.</Paragraph>
                            <Paragraph>
                                <Bold>Extended</Bold>
                                allows the user to select multiple items by using Ctrl+Click to select the indvidual items they want, or Shift+Click to select a range of contiguous items.</Paragraph>
                        </local1:NoPaddingFlowDocument>
                    </RichTextBox>
                    <ui:ListView
                        x:Name="Control2"
                        ItemTemplate="{StaticResource ContactListViewTemplate}"
                        BorderThickness="1"
                        BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
                        Width="400"
                        Height="400"
                        HorizontalAlignment="Left" />
                </StackPanel>
                <sc:ControlExample.Options>
                    <StackPanel>
                        <ComboBox
                            SelectionChanged="SelectionModeComboBox_SelectionChanged"
                            ui:ControlHelper.Header="SelectionMode"
                            SelectedIndex="1"
                            Margin="0,12,0,0">
                            <sys:String>None</sys:String>
                            <sys:String>Single</sys:String>
                            <sys:String>Multiple</sys:String>
                            <sys:String>Extended</sys:String>
                        </ComboBox>
                    </StackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="ListView with Grouped Headers">
                <StackPanel>
                    <ui:ListView
                        x:Name="GroupedListViewCtrl"
                        ItemsSource="{Binding Source={StaticResource ContactsCVS}}"
                        ItemTemplate="{StaticResource ContactListViewTemplate}"
                        SelectionMode="Single"
                        Height="400"
                        Width="400"
                        BorderThickness="1"
                        BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
                        HorizontalAlignment="Left"
                        VirtualizingPanel.IsVirtualizingWhenGrouping="True"
                        VirtualizingPanel.VirtualizationMode="Recycling">
                        <ui:ListView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <Border AutomationProperties.Name="{Binding Name, Mode=OneTime}">
                                            <TextBlock
                                                Text="{Binding Name, Mode=OneTime}"
                                                Style="{DynamicResource TitleTextBlockStyle}" />
                                        </Border>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ui:ListView.GroupStyle>
                    </ui:ListView>
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="ListView with filtering">
                <ui:ListView
                    x:Name="FilteredListView"
                    ItemTemplate="{StaticResource ContactListViewTemplate}"
                    SelectionMode="Single"
                    Height="400"
                    Width="400"
                    BorderThickness="1"
                    BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />

                <sc:ControlExample.Options>
                    <StackPanel Width="200">
                        <TextBlock
                            Margin="8,8,8,4"
                            Style="{DynamicResource BaseTextBlockStyle}">
                            Filter by...
                        </TextBlock>
                        <TextBox
                            x:Name="FilterByFirstName"
                            ui:ControlHelper.Header="First name"
                            Margin="8"
                            HorizontalAlignment="Stretch"
                            TextChanged="OnFilterChanged" />
                        <TextBox
                            x:Name="FilterByLastName"
                            ui:ControlHelper.Header="Last name"
                            Margin="8"
                            HorizontalAlignment="Stretch"
                            TextChanged="OnFilterChanged" />
                        <TextBox
                            x:Name="FilterByCompany"
                            ui:ControlHelper.Header="Company"
                            Margin="8"
                            HorizontalAlignment="Stretch"
                            TextChanged="OnFilterChanged" />
                    </StackPanel>
                </sc:ControlExample.Options>

            </sc:ControlExample>

            <sc:ControlExample HeaderText="ListView with Images">
                <ui:ListView
                    x:Name="Control4"
                    AllowDrop="True"
                    Height="400"
                    MinWidth="550"
                    BorderThickness="1"
                    BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
                    VirtualizingPanel.ScrollUnit="Pixel">
                    <ui:ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid
                                Margin="0,12,0,12"
                                AutomationProperties.Name="{Binding Title, Mode=OneTime}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="150" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image
                                    Source="{Binding ImageLocation, Mode=OneTime}"
                                    MaxHeight="100"
                                    Stretch="Fill" />

                                <StackPanel
                                    Margin="12,0,0,0"
                                    Grid.Column="1">
                                    <TextBlock
                                        Text="{Binding Title, Mode=OneTime}"
                                        FontSize="14"
                                        FontWeight="SemiBold"
                                        Style="{DynamicResource BaseTextBlockStyle}"
                                        HorizontalAlignment="Left"
                                        Margin="0,0,0,6"
                                        LineHeight="20" />
                                    <TextBlock
                                        Text="{Binding Description, Mode=OneTime}"
                                        FontFamily="Segoe UI"
                                        FontWeight="Normal"
                                        Style="{DynamicResource BodyTextBlockStyle}"
                                        TextTrimming="CharacterEllipsis"
                                        Width="350"
                                        TextWrapping="NoWrap" />
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock
                                            Text="{Binding Views, Mode=OneTime}"
                                            Style="{DynamicResource CaptionTextBlockStyle}"
                                            Margin="0" />
                                        <TextBlock
                                            Text=" Views "
                                            Style="{DynamicResource CaptionTextBlockStyle}" />
                                        <TextBlock
                                            Text=" &#x22C5; "
                                            FontFamily="Segoe UI"
                                            FontSize="12"
                                            FontWeight="Bold" />
                                        <TextBlock
                                            Text="{Binding Likes, Mode=OneTime}"
                                            Style="{DynamicResource CaptionTextBlockStyle}"
                                            Margin="5,0,0,0" />
                                        <TextBlock
                                            Text=" Likes"
                                            Style="{DynamicResource CaptionTextBlockStyle}" />
                                    </StackPanel>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ui:ListView.ItemTemplate>
                </ui:ListView>

            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</local:ItemsPageBase>
