List of crops for an orchard app

VisualChallenge/VisualChallenge.iOS/VisualChallenge.iOS.csproj

@@ -28,6 +28,7 @@
     <MtouchArch>x86_64</MtouchArch>
     <MtouchLink>None</MtouchLink>
     <MtouchDebug>true</MtouchDebug>
+<CodesignKey>iPhone Developer</CodesignKey>
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|iPhoneSimulator' ">
     <DebugType>none</DebugType>

VisualChallenge/VisualChallenge/App.xaml.cs

@@ -1,4 +1,5 @@
-using Xamarin.Forms;
+using DLToolkit.Forms.Controls;
+using Xamarin.Forms;
 
 namespace VisualChallenge
 {
@@ -10,6 +11,7 @@ public App()
             InitializeComponent();
 
             MainPage = new AppShell();
+            FlowListView.Init();
         }
 
         protected override void OnStart()

VisualChallenge/VisualChallenge/ViewModels/CropItemViewModel.cs

@@ -0,0 +1,43 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Text;
+using Xamarin.Forms;
+
+namespace VisualChallenge.ViewModels
+{
+    public class CropItemViewModel : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        public void OnPropertyChanged(string propertyName)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private ImageSource imageSource;
+
+        public ImageSource ImageSource
+        {
+            get { return imageSource; }
+            set { imageSource = value; OnPropertyChanged(nameof(ImageSource)); }
+        }
+
+        private string name;
+
+        public string Name
+        {
+            get { return name; }
+            set { name = value; OnPropertyChanged(nameof(name)); }
+        }
+
+        private bool isSelected;
+
+        public bool IsSelected
+        {
+            get { return isSelected; }
+            set { isSelected = value; OnPropertyChanged(nameof(IsSelected)); }
+        }
+
+    }
+}

VisualChallenge/VisualChallenge/ViewModels/VisualChallengePageViewModel.cs

@@ -0,0 +1,48 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Text;
+using Xamarin.Forms;
+
+namespace VisualChallenge.ViewModels
+{
+    public class VisualChallengePageViewModel : INotifyPropertyChanged
+    {
+
+        public VisualChallengePageViewModel()
+        {
+            BuildCrops();
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        public void OnPropertyChanged(string propertyName)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private ObservableCollection<CropItemViewModel> crops;
+
+        public ObservableCollection<CropItemViewModel> Crops
+        {
+            get { return crops; }
+            set { crops = value; OnPropertyChanged(nameof(Crops)); }
+        }
+
+        private void BuildCrops()
+        {
+            Crops = new ObservableCollection<CropItemViewModel>();
+            for(var i = 0; i < 21; i++)
+            {
+                Crops.Add(new CropItemViewModel
+                {
+                    Name = $"Item {i}",
+                    IsSelected = false,
+                    ImageSource = ImageSource.FromResource("VisualChallenge.Images.ico_sprouts_color.png")
+                });
+            }
+        }
+
+    }
+}

VisualChallenge/VisualChallenge/VisualChallenge.csproj

@@ -11,6 +11,15 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <None Remove="Images\ico_sprouts_color.png" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Include="Images\ico_sprouts_color.png" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="DLToolkit.Forms.Controls.FlowListView" Version="2.0.11" />
     <PackageReference Include="Xamarin.Forms" Version="4.0.0.293082-pre8" />
     <PackageReference Include="Xamarin.Forms.Visual.Material" Version="4.0.0.293082-pre8" />  
   </ItemGroup>

VisualChallenge/VisualChallenge/VisualChallengePage.xaml

@@ -2,22 +2,57 @@
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:sys="clr-namespace:System;assembly=mscorlib"
+             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
              x:Class="VisualChallenge.VisualChallengePage"
              Shell.NavBarIsVisible="True"
              BackgroundColor="White"
-             Title="Visual Challenge"
+             Title="Crop List"
              >
 
 	<!-- 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">
+	<ScrollView BackgroundColor="#f0f0f0">
+		<FlexLayout Direction="Column" AlignContent="Center" JustifyContent="SpaceAround">
 
-			<Label Text="Start Here" FontSize="24" HorizontalTextAlignment="Center"/>
+            <StackLayout Margin="0">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <flv:FlowListView FlowColumnCount="3" SeparatorVisibility="Default" HasUnevenRows="False"
+                            FlowItemsSource="{Binding Crops}" HorizontalOptions="Fill" VerticalOptions="Fill"
+                            RowHeight="120"
+                            FlowColumnMinWidth="120"
+                              >
+                        <flv:FlowListView.FlowColumnTemplate>
+                            <DataTemplate>
+                                <Grid BackgroundColor="#f0f0f0" Padding="3">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*" />
+                                    </Grid.ColumnDefinitions>
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="*" />
+                                    </Grid.RowDefinitions>
+                                    <Frame HasShadow="True" BackgroundColor="White" Padding="0"
+                           HeightRequest="120" WidthRequest="120">
+                                        <Grid Padding="2">
+                                            <Grid BackgroundColor="White">
+                                                <Image Source="{Binding ImageSource}" HeightRequest="20" />
+                                                <Label Text="{Binding Name}" Margin="2" />
+                                                <Label Text="✓" TextColor="#4CAF50" IsVisible="{Binding IsSelected}"
+                             FontSize="40"
+                             HorizontalOptions="End" />
+                                            </Grid>
+                                        </Grid>
+                                    </Frame>
+                                </Grid>
+                            </DataTemplate>
+                        </flv:FlowListView.FlowColumnTemplate>
+                    </flv:FlowListView>
+                </Grid>
+            </StackLayout>
 
-			<Button Text="Read More About Visual" Clicked="Button_Clicked" />
-
-		</FlexLayout>
+        </FlexLayout>
 	</ScrollView>
 </ContentPage>

VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs

@@ -1,5 +1,5 @@
 using System;
-
+using VisualChallenge.ViewModels;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
@@ -10,11 +10,7 @@ public partial class VisualChallengePage : ContentPage
         public VisualChallengePage()
         {
             InitializeComponent();
-        }
-
-        private void Button_Clicked(object sender, EventArgs e)
-        {
-            Device.OpenUri(new Uri("https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual"));
+            this.BindingContext = new VisualChallengePageViewModel();
         }
     }
 }