CarouselViewChallenge LifesavingRules

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -100,5 +100,35 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons1.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons10.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons2.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons3.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons4.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons5.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons6.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons7.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons8.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Safety_logo_icons9.jpg" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj

@@ -139,4 +139,34 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons1.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons10.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons2.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons3.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons4.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons5.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons6.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons7.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons8.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Safety_logo_icons9.jpg" />
+  </ItemGroup>
 </Project>

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengeViewModel.cs

@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Text;
+using Xamarin.Forms;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    public class CarouselViewChallengeViewModel : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        private ObservableCollection<LsrHeader> _cards;
+        public ObservableCollection<LsrHeader> Cards
+        {
+            get
+            {
+                return _cards;
+            }
+            set
+            {
+                if (_cards != value)
+                {
+                    _cards = value;
+                    OnPropertyChanged(new PropertyChangedEventArgs("Cards"));
+                }
+            }
+        }
+
+        private void OnPropertyChanged(PropertyChangedEventArgs eventArgs)
+        {
+            PropertyChanged?.Invoke(this, eventArgs);
+        }
+
+    }
+
+    public class LsrDetails
+    {
+        public string Icon { get; set; }
+        public string Description { get; set; }
+
+    }
+
+    public class LsrHeader
+    {
+        public string Header { get; set; }
+        public List<LsrDetails> CardDetails { get; set; }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -6,8 +6,67 @@
              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>
+        <Grid BackgroundColor="#4682B4">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+            <StackLayout Margin="25,15,25,10" Padding="10" Grid.Row="0">
+                <Label Text="Our Lifesaving Rules" HorizontalTextAlignment="Center" FontSize="29" TextColor="WhiteSmoke" Margin="0,0,0,10"/>
+                <Label Text="These Rules are in place to keep us safe and must never be broken." HorizontalTextAlignment="Center" FontSize="19" TextColor="WhiteSmoke" />
+            </StackLayout>
+
+            <CarouselView ItemsSource="{Binding Cards}" PeekAreaInsets="30" Grid.Row="1">
+                <CarouselView.ItemTemplate>
+                    <DataTemplate>
+                        <StackLayout BackgroundColor="#4682B4" >
+                            <Frame Padding="20"
+                               Margin="8,20,8,20"
+                               BorderColor="Transparent"
+                               CornerRadius="10"
+                               HasShadow="False"
+                               IsClippedToBounds="True"
+                               VerticalOptions="Center">
+
+                                <Grid>
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="*"/>
+                                    </Grid.RowDefinitions>
+                                    <ContentView Grid.Row="0">
+                                        <Label Text="{Binding Header}" FontSize="28" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
+                                    </ContentView>
+                                    <ContentView Grid.Row="1">
+                                        <ListView ItemsSource="{Binding CardDetails}" SeparatorVisibility="None"  HasUnevenRows="True">
+                                            <ListView.ItemTemplate>
+                                                <DataTemplate>
+                                                    <ViewCell>
+                                                        <Grid >
+                                                            <Grid.ColumnDefinitions>
+                                                                <ColumnDefinition Width="Auto"/>
+                                                                <ColumnDefinition Width="*"/>
+                                                            </Grid.ColumnDefinitions>
+
+                                                            <Image Source="{Binding Icon}" HeightRequest="60" Grid.Column="0" Margin="10"/>
+                                                            <Label Text="{Binding Description}" Grid.Column="1" FontSize="Body" VerticalTextAlignment="Center"/>
+                                                        </Grid>
+                                                    </ViewCell>
+
+                                                </DataTemplate>
+                                            </ListView.ItemTemplate>
+                                        </ListView>
+                                    </ContentView>
+                                </Grid>
+                            </Frame>
+                        </StackLayout>
+                    </DataTemplate>
+                </CarouselView.ItemTemplate>
+            </CarouselView>
+            <StackLayout Margin="25,20,25,20" Padding="20" Grid.Row="2">
+                <Label Text="Everyone Home Safe Every Day" HorizontalTextAlignment="Center" FontSize="24" TextColor="#FFF5F5F5" />
+            </StackLayout>
+        </Grid>
+
     </ContentPage.Content>
 </ContentPage>

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml.cs

@@ -1,9 +1,11 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
+using System.Net.Http.Headers;
 using System.Text;
 using System.Threading.Tasks;
-
+using CarouselViewChallenge.ViewModels;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
@@ -12,9 +14,113 @@ namespace CarouselViewChallenge.Views
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class CarouselViewChallengePage : ContentPage
     {
+        public CarouselViewChallengeViewModel _viewModel { get; set; }
         public CarouselViewChallengePage()
         {
             InitializeComponent();
+            _viewModel = new CarouselViewChallengeViewModel();
+
+            SetUpData();
+
+            BindingContext = _viewModel;
+        }
+
+        private void SetUpData()
+        {
+            _viewModel.Cards = new ObservableCollection<LsrHeader>
+            {
+                new LsrHeader()
+                {
+                    Header = "Working Responsibly",
+                    CardDetails = new List<LsrDetails>
+                    {
+                        new LsrDetails
+                        {
+                            Description =
+                                "Always be sure the required plans and permits are in place, before you start a job or go on or near the line.",
+                            Icon = "Safety_logo_icons1.jpg"
+                        },
+                        new LsrDetails
+                        {
+                            Description = "Always use equipment that is fit for its intended purpose.",
+                            Icon = "Safety_logo_icons2.jpg"
+                        },
+                        new LsrDetails
+                        {
+                            Description = "Never undertake any job unless you have been trained and assessed as competent.",
+                            Icon = "Safety_logo_icons3.jpg"
+                        },
+                        new LsrDetails
+                        {
+                            Description = "Never work or drive while under the influence of drugs or alcohol.",
+                            Icon = "Safety_logo_icons4.jpg"
+                        },
+
+                    }
+                },
+                new LsrHeader()
+                {
+                    Header = "Driving",
+                    CardDetails = new List<LsrDetails>
+                    {
+                        new LsrDetails
+                        {
+                            Description =
+                                "Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.",
+                            Icon = "Safety_logo_icons5.jpg"
+                        },
+                        new LsrDetails
+                        {
+                            Description = "Always obey the speed limit and wear a seat belt.",
+                            Icon = "Safety_logo_icons6.jpg"
+                        }
+                    }
+                },
+                new LsrHeader
+                {
+                    Header = "Working with Electricity",
+                    CardDetails = new List<LsrDetails>
+                    {
+                        new LsrDetails
+                        {
+                            Description = "Always test before applying earths or straps.",
+                            Icon = "Safety_logo_icons7.jpg"
+                        },
+                        new LsrDetails
+                        {
+                            Description = "Never assume equipment is isolated – always test before touch. ",
+                            Icon = "Safety_logo_icons8.jpg"
+                        }
+                    }
+                },
+                new LsrHeader
+                {
+                    Header = "Working at height",
+                    CardDetails = new List<LsrDetails>
+                    {
+                        new LsrDetails
+                        {
+                            Description = "Always use a safety harness when working at height, unless other protection is in place.",
+                            Icon = "Safety_logo_icons9.jpg"
+                        }
+                    }
+                },
+                new LsrHeader
+                {
+                    Header = "Working with moving equipment",
+                    CardDetails = new List<LsrDetails>
+                    {
+                        new LsrDetails
+                        {
+                            Description = "Never enter the agreed exclusion zone, unless directed to by the person in charge.",
+                            Icon = "Safety_logo_icons10.jpg"
+                        }
+                    }
+                }
+            };
         }
+
     }
+
+
 }