Merge pull request #3 from jancoow/help

Help

Breda-Tour/App.xaml

@@ -44,7 +44,12 @@
                 <GradientStop Color="#185a9d" Offset="0"/>
                 <GradientStop Color="#43cea2" Offset="1"/>
             </LinearGradientBrush>
+            <LinearGradientBrush x:Key="BredaTourDropShadowBrush" StartPoint="0,0" EndPoint="0,1" SpreadMethod="Reflect">
+                <GradientStop Color="#44000000" Offset="0"/>
+                <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
+                <GradientStop Color="#44000000" Offset="1"/>
 
+            </LinearGradientBrush>
             <Style TargetType="TextBlock" x:Key="SettingsHeaderStyle">
                 <Setter Property="Margin" Value="20,15,0,15"/>
                 <Setter Property="FontSize" Value="14"/>

Breda-Tour/Breda-Tour.csproj

@@ -75,6 +75,7 @@
     <UseVSHostingProcess>false</UseVSHostingProcess>
     <ErrorReport>prompt</ErrorReport>
     <Prefer32Bit>true</Prefer32Bit>
+    <Optimize>false</Optimize>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
     <OutputPath>bin\x86\Release\</OutputPath>
@@ -99,15 +100,27 @@
     </Content>
     <PRIResource Include="en-US\Resources.resw" />
     <None Include="project.json" />
+    <Content Include="Storage\helpimages\taal_1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Storage\helpimages\taal_2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="Storage\Routes\routes.json">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="Storage\helpitems\helpitems.json">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <PRIResource Include="nl-NL\Resources.resw" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Data\HelpItem.cs" />
+    <Compile Include="Data\HelpItemStep.cs" />
+    <Compile Include="Data\HelpPageDatabase.cs" />
     <Compile Include="Data\Route.cs" />
     <Compile Include="Data\RouteDatabase.cs" />
     <Compile Include="Data\Waypoint.cs" />
@@ -117,7 +130,6 @@
     <Compile Include="CustomControls\DefaultTopBar.xaml.cs">
       <DependentUpon>DefaultTopBar.xaml</DependentUpon>
     </Compile>
-    <Compile Include="HelpScreen\HelpItem.cs" />
     <Compile Include="HelpScreen\HelpPage.xaml.cs">
       <DependentUpon>HelpPage.xaml</DependentUpon>
     </Compile>

Breda-Tour/Data/HelpItem.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Breda_Tour.Data
+{
+    public class HelpItem
+    {
+        public string Title { get; private set; }
+        public string Language { get; private set; }
+        public List<HelpItemStep> HelpItemSteps { get; private set; }
+
+        public HelpItem(string Language, string Title, List<HelpItemStep> Steps)
+        {
+            this.Language = Language;
+            this.Title = Title;
+            this.HelpItemSteps = Steps;
+        }
+    }
+}

Breda-Tour/Data/HelpItemStep.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Breda_Tour.Data
+{
+    public class HelpItemStep
+    {
+        public string Title { get; private set; }
+        public string Description { get; private set; }
+        public string ImageSource { get; private set; }
+
+        public HelpItemStep(string Title, string Description, string ImageSource)
+        {
+            this.Title = Title;
+            this.Description = Description;
+            this.ImageSource = "ms-appx:///Storage/helpimages/"+ImageSource;
+        }
+
+    }
+}

Breda-Tour/Data/HelpPageDatabase.cs

@@ -0,0 +1,34 @@
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Breda_Tour.Data
+{ 
+
+    public class HelpPageDatabase
+    {
+        public ObservableCollection<HelpItem> HelpItems;
+        public HelpPageDatabase()
+        {
+            HelpItems = new ObservableCollection<HelpItem>();
+            readHelpItems();
+        }
+
+        private void readHelpItems()
+        {
+            string json = File.ReadAllText("Storage/helpitems/helpitems.json");
+            JObject JsonObject = JObject.Parse(json);
+            IList<JToken> JsonList = JsonObject["HelpItems"].ToList();
+            foreach (JToken helpitem in JsonList)
+            {
+                HelpItems.Add(JsonConvert.DeserializeObject<HelpItem>(helpitem.ToString()));
+            }
+        }
+    }
+}

Breda-Tour/HelpScreen/HelpItem.cs

@@ -1,13 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Breda_Tour.HelpScreen
-{
-    public class HelpItem
-    {
-        public string Title { get; set; }
-    }
-}

Breda-Tour/HelpScreen/HelpPage.xaml

@@ -14,19 +14,35 @@
             <RowDefinition Height="*"/>
             <RowDefinition Height="75"/>
         </Grid.RowDefinitions>
-        <c:DefaultTopBar MySymbol="{StaticResource SymbolClose}" Header="HelpItem" />
-        <StackPanel Background="White" Grid.Row="1">
+        <c:DefaultTopBar MySymbol="{StaticResource SymbolClose}" Tapped="Close_Tapped" x:Name="Topbar"/>
+        <ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" Background="White"  Grid.Row="1" Padding="20,20,20,0">
+            <StackPanel Orientation="Vertical" Height="Auto">
+                <TextBlock Text="{Binding Title}" FontWeight="Bold"/>
+                <Image
+                Name="HelpImage"
+                Height="400"
+                Source="{Binding ImageSource}"    
+                    >
 
-        </StackPanel>
+                </Image>
+                <TextBlock Margin="0,10,0,0" Text="Description" FontWeight="Bold"/>
+                <TextBlock Margin="0,10,0,0"
+                       TextWrapping="Wrap"
+                       Text="{Binding Description}">
+                </TextBlock>
+
+            </StackPanel>
+        </ScrollViewer>
+       
         <Grid Grid.Row="2">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
             </Grid.ColumnDefinitions>
-            <TextBlock x:Uid="HelpPagetxtBack" Foreground="White" FontSize="18" Text="Back" Margin="20,0,0,0" VerticalAlignment="Center"/>
-            <TextBlock Foreground="White" FontSize="18" Text="Page 1 of 4" VerticalAlignment="Center" HorizontalAlignment="Center"  Grid.Column="1"/>
-            <TextBlock x:Uid="HelpPagetxtNext" Foreground="White" FontSize="18" Text="Next" Margin="0,0,20,0" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2"/>
+            <TextBlock Tapped="PageBack_Tapped" Foreground="White" FontSize="18" Text="Back" Margin="20,0,0,0" VerticalAlignment="Center"/>
+            <TextBlock Name="PageNumberTextBlock" Foreground="White" FontSize="18" Text="Page 1 of 4" VerticalAlignment="Center" HorizontalAlignment="Center"  Grid.Column="1"/>
+            <TextBlock Tapped="PageForward_Tapped" Foreground="White" FontSize="18" Text="Next" Margin="0,0,20,0" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2"/>
         </Grid>
     </Grid>
 </Page>

Breda-Tour/HelpScreen/HelpPage.xaml.cs

@@ -1,30 +1,51 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
-using Windows.UI.Xaml;
+using Breda_Tour.Data;
+using Breda_Tours.SettingsScreen;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 
-// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
-
 namespace Breda_Tour.HelpScreen
 {
-    /// <summary>
-    /// An empty page that can be used on its own or navigated to within a Frame.
-    /// </summary>
+
     public sealed partial class HelpPage : Page
     {
+        HelpItem helpitem;
+        int currentpage;
+
         public HelpPage()
         {
             this.InitializeComponent();
         }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            helpitem = ((HelpItem)e.Parameter);
+            SetPage(0);
+            Topbar.Header = helpitem.Title;
+        }
+
+        private void SetPage(int pagenumber)
+        {
+            if(pagenumber >= 0 && pagenumber < helpitem.HelpItemSteps.Count)
+            {
+                currentpage = pagenumber;
+                this.DataContext = helpitem.HelpItemSteps[currentpage];
+                PageNumberTextBlock.Text = "Page " + (currentpage+1) + " of " + helpitem.HelpItemSteps.Count;
+            }
+        }
+
+        private void Close_Tapped(object sender, TappedRoutedEventArgs e)
+        {
+            MainPage.RootFrame.Navigate(typeof(SettingsPage));
+        }
+
+        private void PageBack_Tapped(object sender, TappedRoutedEventArgs e)
+        {
+            SetPage(currentpage - 1);
+        }
+        private void PageForward_Tapped(object sender, TappedRoutedEventArgs e)
+        {
+            SetPage(currentpage + 1);
+        }
     }
 }

Breda-Tour/SettingsScreen/SettingsPage.xaml

@@ -6,7 +6,7 @@
     xmlns:c="using:Breda_Tour.CustomControls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:data="using:Breda_Tour.HelpScreen"
+    xmlns:data="using:Breda_Tour.Data"
     mc:Ignorable="d">
     <Grid Background="Transparent">
         <Grid.RowDefinitions>
@@ -17,39 +17,38 @@
         <c:DefaultTopBar Header="Instellingen" x:Uid="AppSettingstxtSettings"/>
         <c:DefaultPivotControl x:Name="DefaultPivot" Grid.Row="1"/>
         <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Hidden">
-            <StackPanel Orientation="Vertical">
-                <TextBlock x:Uid="AppSettingsLanguageSettings" Style="{StaticResource SettingsHeaderStyle}" Foreground="White" Text="{StaticResource AppSettingsLanguageSettings}"></TextBlock>
+            <StackPanel Orientation="Vertical" Background="White">
+                <TextBlock x:Uid="AppSettingsLanguageSettings"  Style="{StaticResource SettingsHeaderStyle}" Foreground="{StaticResource BredaToursMainColorBrush}" Text="{StaticResource AppSettingsLanguageSettings}"></TextBlock>
                 <ListViewItem Name="listViewItemSetupLanguage" Tapped="listViewItemSetupLanguage_Tapped">
                     <StackPanel Margin="8,0,0,0">
-                        <TextBlock x:Uid="AppSettingstxtSetupLanguage" FontSize="18" Text="Taal instellen" Foreground="White"></TextBlock>
-                        <TextBlock x:Uid="AppSettingstxtLanguageString" Margin="0,-1,0,0" FontSize="12" Foreground="White" Text="Nederlands"></TextBlock>
+                        <TextBlock x:Uid="AppSettingstxtSetupLanguage" FontSize="18" Text="Taal instellen" ></TextBlock>
+                        <TextBlock x:Uid="AppSettingstxtLanguageString" Margin="0,-1,0,0" FontSize="12"  Text="Nederlands"></TextBlock>
                     </StackPanel>
                 </ListViewItem>
-                <Rectangle Margin="0,15,0,0" Fill="#99FFFFFF" Height="1" />
-                <TextBlock x:Uid="AppSettingsHelp" Style="{StaticResource SettingsHeaderStyle}" Foreground="White" Text="{StaticResource AppSettingsHelp}"></TextBlock>
-                <ListView ItemsSource="{x:Bind HelpItems}" >
-                    <ListView.ItemTemplate>
-                        <DataTemplate x:DataType="data:HelpItem">
+                <Rectangle Margin="0,15,0,0" Fill="#99000000" Height="1" />
+                <TextBlock x:Uid="AppSettingsHelp" Style="{StaticResource SettingsHeaderStyle}" Foreground="{StaticResource BredaToursMainColorBrush}" Text="{StaticResource AppSettingsHelp}"></TextBlock>
+                <ListView ItemsSource="{x:Bind HelpItems}" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" >
+                    <ListView.ItemTemplate >
+                        <DataTemplate  x:DataType="data:HelpItem">
                             <ListBoxItem Padding="0" Background="Transparent" IsEnabled="False">
-                                <Grid Height="50">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="50"/>
-                                        <ColumnDefinition Width="*"/>
-                                    </Grid.ColumnDefinitions>
-                                    <Ellipse Height="40" Width="40" Stroke="White" StrokeThickness="0.5"
-                                         Margin="5"
-                                         Name="FolderEllipse"/>
+                                    <Grid Height="50">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="50"/>
+                                            <ColumnDefinition Width="*"/>
+                                        </Grid.ColumnDefinitions>
+                                        <Ellipse Height="40" Width="40" Stroke="{StaticResource BredaToursMainColorBrush}" StrokeThickness="0.5"
+                                             Margin="5"
+                                             Name="FolderEllipse"/>
                                     <SymbolIcon Symbol="Folder"
-                                                
-                                            Foreground="White"
-                                            Margin="10"
-                                            >
+                                                Foreground="{StaticResource BredaToursMainColorBrush}"
+                                                Margin="10"
+                                                >
                                         <SymbolIcon.RenderTransform>
                                             <RotateTransform Angle="270" CenterX="15" CenterY="15"/>
                                         </SymbolIcon.RenderTransform>
                                     </SymbolIcon>
-                                    <TextBlock RelativePanel.RightOf="FolderEllipse" Foreground="White" Margin="10,14" Text="{x:Bind Title}" Grid.Column="1"/>
-                                </Grid>
+                                    <TextBlock RelativePanel.RightOf="FolderEllipse" Margin="10,14" Text="{x:Bind Title}" Grid.Column="1"/>
+                                </Grid>                                
                             </ListBoxItem>
                         </DataTemplate>
                     </ListView.ItemTemplate>

Breda-Tour/SettingsScreen/SettingsPage.xaml.cs

@@ -8,6 +8,7 @@ using System.Runtime.InteropServices.WindowsRuntime;
 using Breda_Tour;
 
 using Breda_Tour.HelpScreen;
+using Breda_Tour.Data;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
 using Windows.UI.Xaml;
@@ -42,15 +43,18 @@ namespace Breda_Tours.SettingsScreen
             this.InitializeComponent();
 
             DefaultPivot.SetCheckedButton(Breda_Tour.CustomControls.DefaultPivotControl.Tab.Settings);
-            HelpItems = new ObservableCollection<HelpItem>();
-            for (int i = 0; i < 10; i++)
-                HelpItems.Add(new HelpItem
-                {
-                    Title = "HelpItem" + i
-                });
+            HelpPageDatabase helpDatabase = new HelpPageDatabase();
+            HelpItems = helpDatabase.HelpItems;
+            
             DataContext = this;
         }
 
+        private void ListView_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            HelpItem helpitem = (HelpItem)e.ClickedItem;
+            MainPage.RootFrame.Navigate(typeof(HelpPage), helpitem);
+		}
+		
         private void listViewItemSetupLanguage_Tapped(object sender, TappedRoutedEventArgs e)
         {
             if (App.Language == "nl-NL")

Breda-Tour/Storage/helpitems/helpitems.json

@@ -0,0 +1,26 @@
+{
+  "HelpItems": [
+        {
+            "Language" : "nl_NL",
+            "Title" : "Taal selecteren",
+            "Steps" : 
+            [
+                {
+                    "Title":"Ga naar het instellingen menu",
+                    "Description":"Druk hiervoor op het 3e icoontje bovenin het menu. ",
+                    "ImageSource" :"taal_1.jpg"
+                },
+                {
+                    "Title":"Druk op taal instellen",
+                    "Description":"Eerste optie in het menu.",
+                    "ImageSource" :"taal_2.jpg"
+                },
+                {
+                    "Title":"Selecteer de gewenste taal",
+                    "Description":"Hier kunt u kiezen uit de beschikbare talen van deze applicatie.",
+                    "ImageSource" :"taal_3.jpg"
+                }
+            ] 
+        },
+    ]
+}

Breda-Tour/project.lock.json

@@ -11523,7 +11523,7 @@
       ]
     },
     "Microsoft.ApplicationInsights.WindowsApps/1.0.0": {
-      "sha512": "fNCAjIwvbTV+G0dT14bgM5tptsqeSaKQaCrlq7QknOq1Xdm8ZmgsDYddMgXkvykyKLjWyU6fKuOpj6fsQJy+wQ==",
+      "sha512": "NvBQnFeiFd0O1QdBz06UGApD7zn7ztVi7qO18IsM3EjiXRNgfrEBXB+azNm8XqLY8xGFAqh3HAuSd/wHZMe0XA==",
       "type": "Package",
       "files": [
         "[Content_Types].xml",