From 0257b496135b76d4d0e0ead978012a28d20780aa Mon Sep 17 00:00:00 2001
From: Carlos Campos <carlos@xinobistudio.com>
Date: Fri, 29 Mar 2019 00:42:36 -0600
Subject: [PATCH] Add Simple Habit UI - Discovery screen sample

---
 VisualChallenge/VisualChallenge/App.xaml      |  18 +++
 VisualChallenge/VisualChallenge/AppShell.xaml |   2 +-
 .../VisualChallenge/Model/Habit.cs            |  10 ++
 .../VisualChallenge/VisualChallenge.csproj    |   3 +
 .../VisualChallenge/VisualChallengePage.xaml  | 104 ++++++++++++++++--
 .../VisualChallengePage.xaml.cs               |   1 +
 .../VisualChallengePageViewModel.cs           |  63 +++++++++++
 7 files changed, 191 insertions(+), 10 deletions(-)
 create mode 100644 VisualChallenge/VisualChallenge/Model/Habit.cs
 create mode 100644 VisualChallenge/VisualChallenge/VisualChallengePageViewModel.cs

diff --git a/VisualChallenge/VisualChallenge/App.xaml b/VisualChallenge/VisualChallenge/App.xaml
index 2508a6a..e9c25c1 100644
--- a/VisualChallenge/VisualChallenge/App.xaml
+++ b/VisualChallenge/VisualChallenge/App.xaml
@@ -3,6 +3,24 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="VisualChallenge.App">
     <Application.Resources>
+        <Style x:Key="LabelTitleStyle" TargetType="Label" >
+            <Setter Property="TextColor" Value="White" />
+            <Setter Property="FontSize" Value="Large" />
+            <Setter Property="Margin" Value="20,0" />
+            <Setter Property="FontAttributes" Value="Bold" />
+            
+        </Style>
+        
+        <Style x:Key="LabelSubtitleStyle" TargetType="Label" >
+            <Setter Property="TextColor" Value="White" />
+            <Setter Property="FontSize" Value="Medium" />
+            <Setter Property="FontAttributes" Value="Bold" />
+        </Style>
+        
+        <Style x:Key="LabelRegularStyle" TargetType="Label" >
+            <Setter Property="TextColor" Value="White" />
+            <Setter Property="FontSize" Value="Small" />
+        </Style>
         
     </Application.Resources>
 </Application>
\ No newline at end of file
diff --git a/VisualChallenge/VisualChallenge/AppShell.xaml b/VisualChallenge/VisualChallenge/AppShell.xaml
index 0f654c7..522d5a0 100644
--- a/VisualChallenge/VisualChallenge/AppShell.xaml
+++ b/VisualChallenge/VisualChallenge/AppShell.xaml
@@ -16,7 +16,7 @@
     -->
     <Shell.Resources>
         <ResourceDictionary>
-            <Color x:Key="NavigationPrimary">#2196F3</Color>
+            <Color x:Key="NavigationPrimary">#232C39</Color>
             <Style x:Key="BaseStyle" TargetType="Element">
                 <Setter Property="Shell.ShellBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                 <Setter Property="Shell.ShellForegroundColor" Value="White" />
diff --git a/VisualChallenge/VisualChallenge/Model/Habit.cs b/VisualChallenge/VisualChallenge/Model/Habit.cs
new file mode 100644
index 0000000..1d96abd
--- /dev/null
+++ b/VisualChallenge/VisualChallenge/Model/Habit.cs
@@ -0,0 +1,10 @@
+using System;
+namespace VisualChallenge.Model
+{
+    public class Habit
+    {
+        public string Title { get; set; }
+        public string Time { get; set; }
+        public string Photo { get; set; }
+    }
+}
diff --git a/VisualChallenge/VisualChallenge/VisualChallenge.csproj b/VisualChallenge/VisualChallenge/VisualChallenge.csproj
index 7b3490c..4ba3c92 100644
--- a/VisualChallenge/VisualChallenge/VisualChallenge.csproj
+++ b/VisualChallenge/VisualChallenge/VisualChallenge.csproj
@@ -20,4 +20,7 @@
       <DependentUpon>VisualChallengePage.xaml</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Model\" />
+  </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/VisualChallenge/VisualChallenge/VisualChallengePage.xaml b/VisualChallenge/VisualChallenge/VisualChallengePage.xaml
index 305cee4..0885fc0 100644
--- a/VisualChallenge/VisualChallenge/VisualChallengePage.xaml
+++ b/VisualChallenge/VisualChallenge/VisualChallengePage.xaml
@@ -1,22 +1,108 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:sys="clr-namespace:System;assembly=mscorlib"
              x:Class="VisualChallenge.VisualChallengePage"
-             Shell.NavBarIsVisible="True"
-             BackgroundColor="White"
+             Shell.NavBarIsVisible="False"
+             BackgroundColor="#1D232E"
              Title="Visual Challenge"
              >
-
 	<!-- If you decide to change out the flexlayout leave the scroll view here
 		 Currently there's a bug in shell that will set margins wrong if the content is not in a scrollview
 	-->
 	<ScrollView>
-		<FlexLayout Margin="20" Direction="Column" AlignContent="Center" JustifyContent="SpaceAround">
-
-			<Label Text="Start Here" FontSize="24" HorizontalTextAlignment="Center"/>
-
-			<Button Text="Read More About Visual" Clicked="Button_Clicked" />
+		<FlexLayout Padding="0,20" Direction="Column" AlignContent="Center" JustifyContent="Start">
+			<Grid RowSpacing="25">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="0.4*" />
+                    <RowDefinition Height="0.4*" />
+                    <RowDefinition Height="0.4*" />
+                </Grid.RowDefinitions>
+				<StackLayout Grid.Row="0">
+					<Label Style="{StaticResource LabelTitleStyle}" Text="Featured" />
+					<ScrollView Orientation="Horizontal">
+						<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding Featured}">
+							<BindableLayout.ItemTemplate>
+								<DataTemplate>
+									<StackLayout WidthRequest="150">
+										<Frame HeightRequest="150" Padding="0" BackgroundColor="Black" >
+											<StackLayout>
+												<Image Opacity="0.7"
+												       HorizontalOptions="FillAndExpand"
+												       VerticalOptions="FillAndExpand"
+												       Source="{Binding Photo}"
+												       AbsoluteLayout.LayoutFlags="All"
+												       Aspect="AspectFill" />
+											</StackLayout>
+										</Frame>
+										<Label Text="{Binding Title}"
+										       Style="{StaticResource LabelSubtitleStyle}" />
+										<Label Text="{Binding Time}"
+										       Style="{StaticResource LabelRegularStyle}" />
+									</StackLayout>
+								</DataTemplate>
+							</BindableLayout.ItemTemplate>
+						</StackLayout>
+					</ScrollView>
+				</StackLayout>
+				<StackLayout Grid.Row="1">
+					<Label Style="{StaticResource LabelTitleStyle}" Text="Night Meditations" />
+					<ScrollView Orientation="Horizontal">
+						<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding NightMeditations}">
+							<BindableLayout.ItemTemplate>
+								<DataTemplate>
+									<StackLayout WidthRequest="150">
+										<Frame HeightRequest="150" Padding="0" BackgroundColor="Black">
+											<StackLayout>
+												<Image Opacity="0.7"
+												       HorizontalOptions="FillAndExpand"
+												       VerticalOptions="FillAndExpand"
+												       Source="{Binding Photo}" 
+												       AbsoluteLayout.LayoutFlags="All"
+												       Aspect="AspectFill"/>
+											</StackLayout>
+										</Frame>
+										<Label Text="{Binding Title}"
+										       Style="{StaticResource LabelSubtitleStyle}" />
+										<Label Text="{Binding Time}"
+										       Style="{StaticResource LabelRegularStyle}" />
+									</StackLayout>
+								</DataTemplate>
+							</BindableLayout.ItemTemplate>
+						</StackLayout>
+					</ScrollView>
+				</StackLayout>
+				<StackLayout Grid.Row="2">
+					<Label Style="{StaticResource LabelTitleStyle}" Text="Night Meditations" />
+					<ScrollView Orientation="Horizontal">
+						<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding Anxiety}">
+							<BindableLayout.ItemTemplate>
+								<DataTemplate>
+									<StackLayout WidthRequest="150">
+										<Frame HeightRequest="150" Padding="0" BackgroundColor="Black">
+											<StackLayout>
+												<Image Opacity="0.7" 
+												       HorizontalOptions="FillAndExpand"
+												       VerticalOptions="FillAndExpand"
+												       Source="{Binding Photo}" 
+												       AbsoluteLayout.LayoutFlags="All"
+												       Aspect="AspectFill"/>
+											</StackLayout>
+										</Frame>
+										<Label Text="{Binding Title}"
+										       Style="{StaticResource LabelSubtitleStyle}" />
+										<Label Text="{Binding Time}"
+										       Style="{StaticResource LabelRegularStyle}" />
+									</StackLayout>
+								</DataTemplate>
+							</BindableLayout.ItemTemplate>
+						</StackLayout>
+					</ScrollView>
+				</StackLayout>
+            </Grid>
 
 		</FlexLayout>
 	</ScrollView>
diff --git a/VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs b/VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs
index 645c5af..49a0a0b 100644
--- a/VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs
+++ b/VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs
@@ -10,6 +10,7 @@ public partial class VisualChallengePage : ContentPage
         public VisualChallengePage()
         {
             InitializeComponent();
+            BindingContext = new VisualChallengePageViewModel();
         }
 
         private void Button_Clicked(object sender, EventArgs e)
diff --git a/VisualChallenge/VisualChallenge/VisualChallengePageViewModel.cs b/VisualChallenge/VisualChallenge/VisualChallengePageViewModel.cs
new file mode 100644
index 0000000..b752a76
--- /dev/null
+++ b/VisualChallenge/VisualChallenge/VisualChallengePageViewModel.cs
@@ -0,0 +1,63 @@
+using System;
+using System.Collections.ObjectModel;
+using VisualChallenge.Model;
+
+namespace VisualChallenge
+{
+    public class VisualChallengePageViewModel
+    {
+        public ObservableCollection<Habit> Featured { get; set; }
+        public ObservableCollection<Habit> NightMeditations { get; set; }
+        
+        public ObservableCollection<Habit> Anxiety { get; set; }
+        public VisualChallengePageViewModel()
+        {
+            Featured = new ObservableCollection<Habit>
+            {
+                new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
+                new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
+                new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
+                new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
+                new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
+                new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
+                new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
+            };
+            
+            NightMeditations = new ObservableCollection<Habit>
+            {
+                new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
+                new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
+                new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
+                new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
+                new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
+                new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
+                new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
+            };
+            
+            Anxiety = new ObservableCollection<Habit>
+            {
+                new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
+                new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
+                new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
+                new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
+                new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
+                new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
+                new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
+                new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
+            };
+            
+        }
+
+        private const string Photo1 = "https://www.freeaudiolibrary.com/img/cms/jetty-1373173_640.jpg";
+        private const string Photo2 = "https://www.freeaudiolibrary.com/img/leoblog/b/lg-b-musica%20sin%20copyright.png";
+        private const string Photo3 = "https://www.bensound.com/bensound-img/relaxing.jpg";
+    }
+}