Expandable collection view

CollectionViewChallenge/CollectionViewChallenge.Android/CollectionViewChallenge.Android.csproj

@@ -30,7 +30,11 @@
     <DefineConstants>DEBUG;</DefineConstants>
     <ErrorReport>prompt</ErrorReport>
     <WarningLevel>4</WarningLevel>
-    <AndroidLinkMode>None</AndroidLinkMode>
+    <AndroidLinkMode>SdkOnly</AndroidLinkMode>
+    <AotAssemblies>false</AotAssemblies>
+    <EnableLLVM>false</EnableLLVM>
+    <BundleAssemblies>false</BundleAssemblies>
+    <MandroidI18n />
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
     <DebugSymbols>true</DebugSymbols>
@@ -106,5 +110,8 @@
       <Name>CollectionViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\down_arrow.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

CollectionViewChallenge/CollectionViewChallenge.iOS/CollectionViewChallenge.iOS.csproj

@@ -25,7 +25,7 @@
     <WarningLevel>4</WarningLevel>
     <ConsolePause>false</ConsolePause>
     <MtouchArch>x86_64</MtouchArch>
-    <MtouchLink>None</MtouchLink>
+    <MtouchLink>SdkOnly</MtouchLink>
     <MtouchDebug>true</MtouchDebug>
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|iPhoneSimulator' ">
@@ -143,4 +143,7 @@
       <Name>CollectionViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\down_arrow.png" />
+  </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj

@@ -22,7 +22,6 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="Models\" />
     <Folder Include="ViewModels\" />
   </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge/Models/Event.cs

@@ -0,0 +1,32 @@
+using System;
+using System.ComponentModel;
+
+namespace CollectionViewChallenge.Models
+{
+    public class Event : INotifyPropertyChanged
+    {
+        public int ID { get; set; }
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public DateTime StartDate { get; set; }
+        public DateTime EndDate { get; set; }
+        public DateTime SubmittedOn { get; set; }
+        public int Points { get; set; }
+
+        private bool _DropDownVisible;
+        public bool DropDownVisible
+        {
+            get { return _DropDownVisible; }
+            set
+            {
+                if(_DropDownVisible != value)
+                {
+                    _DropDownVisible = value;
+                    PropertyChanged(this, new PropertyChangedEventArgs("DropDownVisible"));
+                }
+            }
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml

@@ -1,25 +1,40 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage">
+             x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage"
+             BackgroundColor="#40407a">
     <ContentPage.Content>
         <StackLayout>
             <!-- Use your own layout and functionality here! -->
-            <CollectionView>
-                <CollectionView.ItemsSource>
-                    <x:Array Type="{x:Type x:String}">
-                        <x:String>This is a CollectionView!</x:String>
-                        <x:String>Your feedback on the experience of converting a ListView to a CollectionView is incredibly appreciated.</x:String>
-                        <x:String>Here are three general questions:</x:String>
-                        <x:String>1. How was the experience of converting your existing ListView to a CollectionView?</x:String>
-                        <x:String>2. How is the performance compared to the ListView?</x:String>
-                        <x:String>3. Is there a specific piece of functionality that you'd like to see?</x:String>
-                    </x:Array>
-                </CollectionView.ItemsSource>
+            <CollectionView x:Name="cvEvents" SelectionMode="Single">
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
                         <StackLayout Padding="5">
-                            <Label Text="{Binding}" FontSize="10"/>
+                            <StackLayout Orientation="Horizontal">
+                                <Label Text="{Binding Title}" TextColor="White" LineBreakMode="TailTruncation" VerticalTextAlignment="Center"></Label>
+                                <Image Source="down_arrow.png" HorizontalOptions="EndAndExpand" WidthRequest="20">
+                                    <Image.Triggers>
+                                        <DataTrigger TargetType="Image" Binding="{Binding DropDownVisible}" Value="True">
+                                            <Setter Property="IsVisible" Value="False"></Setter>
+                                        </DataTrigger>
+                                    </Image.Triggers>
+                                </Image>
+                            </StackLayout>
+
+                            <Label TextColor="White" IsVisible="{Binding DropDownVisible}">
+                                <Label.FormattedText>
+                                    <FormattedString>
+                                        <Span Text="{Binding Description}"></Span>
+                                        <Span Text="{Binding StartDate, StringFormat='{} ({0:MMM d yyyy} -'}"></Span>
+                                        <Span Text="{Binding EndDate, StringFormat='{} {0:MMM d yyyy})'}"></Span>
+                                        <Span Text="&#10;"></Span>
+                                        <Span Text="{Binding SubmittedOn, StringFormat='{}Date Submitted: {0:d/MMM/yyyy}'}"></Span>
+                                        <Span Text="&#10;"></Span>
+                                        <Span Text="{Binding Points,StringFormat='{}Points:{0}'}"></Span>
+                                    </FormattedString>
+                                </Label.FormattedText>
+                            </Label>
+                            <BoxView Color="White" HeightRequest="0.5"></BoxView>
                         </StackLayout>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs

@@ -1,8 +1,8 @@
-using System;
+using CollectionViewChallenge.Models;
+using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
@@ -12,9 +12,41 @@ namespace CollectionViewChallenge.Views
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class CollectionViewChallengePage : ContentPage
     {
+        ObservableCollection<Event> obsEvents = new ObservableCollection<Event>();
+
         public CollectionViewChallengePage()
         {
             InitializeComponent();
+            LoadCollectionView();
+            cvEvents.SelectionChanged += CvEvents_SelectionChanged;
+        }
+
+        private void CvEvents_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            var eventItem = (e.CurrentSelection.FirstOrDefault() as Event);
+
+            if (eventItem is null)
+                return;
+
+            //Hack to reflect the DropDownVisible changes on selected item
+            var iSelectedIndex = obsEvents.IndexOf(eventItem);
+            obsEvents.Remove(eventItem);
+            eventItem.DropDownVisible = !eventItem.DropDownVisible;
+            obsEvents.Insert(iSelectedIndex, eventItem);
+
+            //This is required when expanded item is selected again, it should be collapsed
+            ((CollectionView)sender).SelectedItem = null;
+        }
+
+        private void LoadCollectionView()
+        {
+            var lstEvents = new List<Event>();
+            for (var i = 1; i <= 20; i++)
+            {
+                lstEvents.Add(new Event() { ID = i, Title = "Phasellus ultrices nulla quis nibh", Description = "placerat", StartDate = DateTime.Now, EndDate = DateTime.Now, SubmittedOn = DateTime.Now, Points = 2 });
+            }
+            obsEvents = new ObservableCollection<Event>(lstEvents);
+            cvEvents.ItemsSource = obsEvents;
         }
     }
 }