CarouselViewChallenge - Facebook Stories

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -54,8 +54,8 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
-    <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.1" />
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
+    <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.3" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="MainActivity.cs" />
@@ -100,5 +100,65 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\User.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LucianoHulkProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LucianoHulkStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\TimelineHeader.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\KeanuProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LeonardoProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\NeymarProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\NeymarStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\BradProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\KeanuStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LebronProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LebronStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\LeonardoStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\MackProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\MackStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\TomProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\TomStory.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\UserProfile.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\TimelinePosts.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\BradStory.jpg" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge.UWP/CarouselViewChallenge.UWP.csproj

@@ -146,8 +146,8 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
-    <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.1.9" />
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
+    <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.2.9" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\CarouselViewChallenge\CarouselViewChallenge.csproj">
@@ -159,4 +159,4 @@
     <VisualStudioVersion>14.0</VisualStudioVersion>
   </PropertyGroup>
   <Import Project="$(MSBuildExtensionsPath)\Microsoft\WindowsXaml\v$(VisualStudioVersion)\Microsoft.Windows.UI.Xaml.CSharp.targets" />
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj

@@ -130,7 +130,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
@@ -139,4 +139,4 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -7,11 +7,7 @@
 
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />  
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="Models\" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
 
   <ItemGroup>

CarouselViewChallenge/CarouselViewChallenge/Models/StoryCard.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace CarouselViewChallenge.Models
+{
+    public class StoryCard
+    {
+        public string ProfileImage { get; set; }
+        public string Name { get; set; }
+        public string StoryImage { get; set; }
+        public bool IsUserStory { get; set; }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengePageViewModel.cs

@@ -0,0 +1,36 @@
+using CarouselViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Text;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    class CarouselViewChallengePageViewModel : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        private ObservableCollection<StoryCard> _storyCards;
+        public ObservableCollection<StoryCard> StoryCards
+        {
+            get
+            {
+                return _storyCards;
+            }
+            set
+            {
+                if (_storyCards != value)
+                {
+                    _storyCards = value;
+                    OnPropertyChanged(new PropertyChangedEventArgs("StoryCards"));
+                }
+            }
+        }
+
+        private void OnPropertyChanged(PropertyChangedEventArgs eventArgs)
+        {
+            PropertyChanged?.Invoke(this, eventArgs);
+        }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -6,8 +6,78 @@
              mc:Ignorable="d"
              x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage">
     <ContentPage.Content>
-        <StackLayout BackgroundColor="#cfd8dc">
-            <Label Text="You can use this page for the CarouselView Challenge!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
+        <StackLayout BackgroundColor="Gray">
+            <StackLayout BackgroundColor="White">
+                <Image Source="TimelineHeader.png"/>
+            </StackLayout>
+
+            <StackLayout BackgroundColor="White" Margin="0,10,0,0">
+                <CarouselView
+                    ItemsSource="{Binding StoryCards}" 
+                    HeightRequest="200"
+                    HorizontalOptions="CenterAndExpand" 
+                    VerticalOptions="CenterAndExpand" 
+                    Margin="10"
+                    NumberOfSideItems="1"
+                    >
+                    <CarouselView.ItemTemplate>
+                        <DataTemplate>
+                            <StackLayout>
+                                <AbsoluteLayout Margin="5,0,0,0">
+                                    <Frame AbsoluteLayout.LayoutBounds="1,1,1,1" 
+                                           AbsoluteLayout.LayoutFlags="All"
+                                           Padding="0"
+                                           CornerRadius="10"
+                                           IsClippedToBounds="True">
+                                        <Image Source="{Binding StoryImage}" Aspect="AspectFill"/>
+                                    </Frame>
+
+                                    <Frame BackgroundColor="Blue"
+                                           AbsoluteLayout.LayoutBounds="1,1,38,38" 
+                                           AbsoluteLayout.LayoutFlags="None"
+                                           Padding="0"
+                                           CornerRadius="100"
+                                           BorderColor="Blue"
+                                           IsClippedToBounds="True" >
+                                    </Frame>                                    
+
+                                    <Frame AbsoluteLayout.LayoutBounds="5,5,30,30" 
+                                           AbsoluteLayout.LayoutFlags="None"
+                                           Padding="0"
+                                           CornerRadius="100"
+                                           IsClippedToBounds="True">
+                                        <Image Source="{Binding ProfileImage}" Aspect="AspectFill"/>
+                                    </Frame>
+
+                                    <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,.2"  
+                                                 AbsoluteLayout.LayoutFlags="All">
+                                        <Label Text="{Binding Name}" 
+                                               FontAttributes="Bold" 
+                                               TextColor="White"
+                                               VerticalOptions="EndAndExpand"
+                                               HorizontalOptions="CenterAndExpand"/>
+                                    </StackLayout>
+
+                                    <Frame BackgroundColor="White"
+                                           AbsoluteLayout.LayoutBounds="1,1,38,38" 
+                                           AbsoluteLayout.LayoutFlags="None"
+                                           Padding="0"
+                                           CornerRadius="100"
+                                           IsClippedToBounds="True" 
+                                           IsVisible="{Binding IsUserStory}">
+                                        <Label Text="+" VerticalOptions="Center" HorizontalOptions="Center" TextColor="Blue" FontSize="25"/>
+                                    </Frame>
+                                </AbsoluteLayout>
+                            </StackLayout>
+                        </DataTemplate>
+                    </CarouselView.ItemTemplate>
+                </CarouselView>
+
+            </StackLayout>
+
+            <StackLayout BackgroundColor="White" Margin="0,10,0,0">
+                <Image Source="TimelinePosts.png"/>
+            </StackLayout>
         </StackLayout>
     </ContentPage.Content>
 </ContentPage>

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml.cs

@@ -1,5 +1,8 @@
-using System;
+using CarouselViewChallenge.Models;
+using CarouselViewChallenge.ViewModels;
+using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -15,6 +18,22 @@ public partial class CarouselViewChallengePage : ContentPage
         public CarouselViewChallengePage()
         {
             InitializeComponent();
+
+            var vm = new CarouselViewChallengePageViewModel();
+            vm.StoryCards = new ObservableCollection<StoryCard>
+            {
+                new StoryCard{Name = "Adicionar ao story", IsUserStory = true, StoryImage="User.jpg"},
+                new StoryCard{Name = "Luciano Hulk", IsUserStory = false, ProfileImage = "LucianoHulkProfile.jpg", StoryImage = "LucianoHulkStory.jpg"},
+                new StoryCard{Name = "Neymar Junior", IsUserStory = false, ProfileImage = "NeymarProfile.jpg", StoryImage = "NeymarStory.jpg" },
+                new StoryCard{Name = "Keanu Reeves", IsUserStory = false, ProfileImage = "KeanuProfile.jpg", StoryImage = "KeanuStory.jpg" },
+                new StoryCard{Name = "Leonardo DiCaprio", IsUserStory = false, ProfileImage = "LeonardoProfile.jpg", StoryImage = "LeonardoStory.jpg" },
+                new StoryCard{Name = "Brad Pitt", IsUserStory = false, ProfileImage = "BradProfile.jpg", StoryImage = "BradStory.jpg" },
+                new StoryCard{Name = "Tom Brady", IsUserStory = false, ProfileImage = "TomProfile.jpg", StoryImage = "TomStory.jpg" },
+                new StoryCard{Name = "Lebron James", IsUserStory = false, ProfileImage = "LebronProfile.jpg", StoryImage = "LebronStory.jpg" },
+                new StoryCard{Name = "Khalil Mack", IsUserStory = false, ProfileImage = "MackProfile.jpg", StoryImage = "MackStory.jpg" },
+            };
+
+            BindingContext = vm;
         }
     }
 }