From 83d84330d640ced7ad228fa2ef6af1dcc03a28ad Mon Sep 17 00:00:00 2001
From: Michael Gordeev <mikhailagord@gmail.com>
Date: Mon, 16 Apr 2018 22:13:35 +0300
Subject: [PATCH] Added Google libraries Channel page and video card

---
 FoxTube/Channel.xaml          | 35 ++++--------------
 FoxTube/Channel.xaml.cs       |  1 +
 FoxTube/ChannelVideos.xaml    | 35 ++++++++++++++++++
 FoxTube/ChannelVideos.xaml.cs | 31 ++++++++++++++++
 FoxTube/FoxTube.csproj        | 40 +++++++++++++++++++++
 FoxTube/Home.xaml             | 24 +++++++++++++
 FoxTube/Home.xaml.cs          | 31 ++++++++++++++++
 FoxTube/MainPage.xaml         | 26 +++-----------
 FoxTube/MainPage.xaml.cs      | 67 +++++++++++++++++++----------------
 FoxTube/VideoCard.xaml        | 47 ++++++++++++++++++++++++
 FoxTube/VideoCard.xaml.cs     | 27 ++++++++++++++
 FoxTube/VideoGrid.xaml        | 19 ++++++++++
 FoxTube/VideoGrid.xaml.cs     | 30 ++++++++++++++++
 13 files changed, 333 insertions(+), 80 deletions(-)
 create mode 100644 FoxTube/ChannelVideos.xaml
 create mode 100644 FoxTube/ChannelVideos.xaml.cs
 create mode 100644 FoxTube/Home.xaml
 create mode 100644 FoxTube/Home.xaml.cs
 create mode 100644 FoxTube/VideoCard.xaml
 create mode 100644 FoxTube/VideoCard.xaml.cs
 create mode 100644 FoxTube/VideoGrid.xaml
 create mode 100644 FoxTube/VideoGrid.xaml.cs

diff --git a/FoxTube/Channel.xaml b/FoxTube/Channel.xaml
index cfd0745..ad9abf5 100644
--- a/FoxTube/Channel.xaml
+++ b/FoxTube/Channel.xaml
@@ -10,8 +10,6 @@
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="47"/>
-            <RowDefinition MinHeight="50" MaxHeight="310"/>
-            <RowDefinition Height="75"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="0" Background="Red">
@@ -21,33 +19,14 @@
                 <HyperlinkButton Content="Community" Foreground="White" Margin="10,8,10,10"/>
                 <HyperlinkButton Content="Channels" Foreground="White" Margin="10,8,10,10"/>
                 <HyperlinkButton Content="About channel" Foreground="White" FontStyle="Normal" Margin="10,8,10,10"/>
+                <TextBox Name="searchField" ToolTipService.ToolTip="Search on channel" Margin="4" Width="350" Height="47" Padding="10,10,10,0" PlaceholderText="Search on channel" BorderThickness="0" Background="#7FFFFFFF" AcceptsReturn="True"/>
+                <Button Name="searchButton" HorizontalAlignment="Right"
+                        Width="39" Height="39" Margin="0"
+                        RelativePanel.AlignRightWithPanel="True" 
+                        Background="Transparent"
+                        FontFamily="Segoe MDL2 Assets" Content="&#xE11A;" FontSize="20" FocusVisualSecondaryBrush="#66FFFFFF" FocusVisualPrimaryBrush="White" Foreground="White"/>
             </StackPanel>
         </Grid>
-        <Image Grid.Row="1" Name="ChannelCover" Width="1920"  Source="Assets/ChannelCoverTemplate.png"/>
-        <Grid Grid.Row="2">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="120"/>
-                <ColumnDefinition Width="*"/>
-                <ColumnDefinition Width="250"/>
-                <ColumnDefinition Width="50"/>
-            </Grid.ColumnDefinitions>
-            <PersonPicture Grid.Column="0" HorizontalAlignment="Left" Margin="10,-30,0,0"/>
-            <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,0,0,0">
-                <TextBlock FontWeight="SemiBold" FontSize="22" Text="Channel name"/>
-                <TextBlock Foreground="Gray" Text="1 000 000 subscribers"/>
-            </StackPanel>
-            <Button Grid.Column="2" Height="50" Width="250" Background="Red" Foreground="White" FontSize="18" FontWeight="SemiBold" Content="Subscirbe"/>
-            <Button Grid.Column="3" Height="50" Width="50" FontFamily="Segoe MDL2 Asset" Content=""/>
-        </Grid>
-        <!--<StackPanel Grid.Row="2" Orientation="Horizontal">
-            <PersonPicture HorizontalAlignment="Left" Margin="10,-30,0,0"/>
-            <StackPanel Orientation="Vertical" Margin="10,0,0,0">
-                <TextBlock FontWeight="SemiBold" FontSize="22" Text="Channel name"/>
-                <TextBlock Foreground="Gray" Text="1 000 000 subscribers"/>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Button Content="Subscirbe"/>
-            </StackPanel>
-        </StackPanel>-->
+        <Frame Grid.Row="1" Name="content"/>
     </Grid>
 </Page>
diff --git a/FoxTube/Channel.xaml.cs b/FoxTube/Channel.xaml.cs
index a20f616..d7155dd 100644
--- a/FoxTube/Channel.xaml.cs
+++ b/FoxTube/Channel.xaml.cs
@@ -25,6 +25,7 @@ namespace FoxTube
         public Channel()
         {
             this.InitializeComponent();
+            content.Navigate(typeof(ChannelVideos));
         }
     }
 }
diff --git a/FoxTube/ChannelVideos.xaml b/FoxTube/ChannelVideos.xaml
new file mode 100644
index 0000000..5a553e0
--- /dev/null
+++ b/FoxTube/ChannelVideos.xaml
@@ -0,0 +1,35 @@
+<Page
+    x:Class="FoxTube.ChannelVideos"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <Grid.RowDefinitions>
+            <RowDefinition MinHeight="50" MaxHeight="310"/>
+            <RowDefinition Height="75"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+        <Image Grid.Row="0" Name="ChannelCover" Width="1920"  Source="Assets/ChannelCoverTemplate.png"/>
+        <Grid Grid.Row="1">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="120"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="250"/>
+                <ColumnDefinition Width="60"/>
+            </Grid.ColumnDefinitions>
+            <PersonPicture Grid.Column="0" HorizontalAlignment="Left" Margin="10,-40,0,0" ProfilePicture="Assets/LogoAvatar.png"/>
+            <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,0,0,0">
+                <TextBlock FontWeight="SemiBold" FontSize="22" Text="Channel name"/>
+                <TextBlock Foreground="Gray" Text="1 000 000 subscribers"/>
+            </StackPanel>
+            <ToggleButton Grid.Column="2" Height="50" Width="250" Background="Red" Foreground="White" FontSize="18" FontWeight="SemiBold" Content="Subscirbe"/>
+            <ToggleButton Grid.Column="3" Height="50" Width="50" FontFamily="Segoe MDL2 Assets" FontSize="18" FontWeight="SemiBold" Content="" Foreground="White" Background="Red"/>
+            <!--&#xE781;&#xE93E;-->
+        </Grid>
+        <Frame Name="content" Grid.Row="2"/>
+    </Grid>
+</Page>
diff --git a/FoxTube/ChannelVideos.xaml.cs b/FoxTube/ChannelVideos.xaml.cs
new file mode 100644
index 0000000..345b726
--- /dev/null
+++ b/FoxTube/ChannelVideos.xaml.cs
@@ -0,0 +1,31 @@
+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 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 https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace FoxTube
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class ChannelVideos : Page
+    {
+        public ChannelVideos()
+        {
+            this.InitializeComponent();
+            content.Navigate(typeof(VideoGrid));
+        }
+    }
+}
diff --git a/FoxTube/FoxTube.csproj b/FoxTube/FoxTube.csproj
index fff76c6..121f385 100644
--- a/FoxTube/FoxTube.csproj
+++ b/FoxTube/FoxTube.csproj
@@ -101,12 +101,18 @@
     <Compile Include="Channel.xaml.cs">
       <DependentUpon>Channel.xaml</DependentUpon>
     </Compile>
+    <Compile Include="ChannelVideos.xaml.cs">
+      <DependentUpon>ChannelVideos.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Feedback.xaml.cs">
       <DependentUpon>Feedback.xaml</DependentUpon>
     </Compile>
     <Compile Include="General.xaml.cs">
       <DependentUpon>General.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Home.xaml.cs">
+      <DependentUpon>Home.xaml</DependentUpon>
+    </Compile>
     <Compile Include="MainFrame.xaml.cs">
       <DependentUpon>MainFrame.xaml</DependentUpon>
     </Compile>
@@ -121,6 +127,12 @@
     <Compile Include="Translate.xaml.cs">
       <DependentUpon>Translate.xaml</DependentUpon>
     </Compile>
+    <Compile Include="VideoCard.xaml.cs">
+      <DependentUpon>VideoCard.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="VideoGrid.xaml.cs">
+      <DependentUpon>VideoGrid.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <AppxManifest Include="Package.appxmanifest">
@@ -196,6 +208,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="ChannelVideos.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Feedback.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -204,6 +220,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Home.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="MainFrame.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -220,8 +240,28 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="VideoCard.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="VideoGrid.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="Google.Apis">
+      <Version>1.32.2</Version>
+    </PackageReference>
+    <PackageReference Include="Google.Apis.Auth">
+      <Version>1.32.2</Version>
+    </PackageReference>
+    <PackageReference Include="Google.Apis.Core">
+      <Version>1.32.2</Version>
+    </PackageReference>
+    <PackageReference Include="Google.Apis.YouTube.v3">
+      <Version>1.32.2.1198</Version>
+    </PackageReference>
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.0.8</Version>
     </PackageReference>
diff --git a/FoxTube/Home.xaml b/FoxTube/Home.xaml
new file mode 100644
index 0000000..512678e
--- /dev/null
+++ b/FoxTube/Home.xaml
@@ -0,0 +1,24 @@
+<Page
+    x:Class="FoxTube.Home"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="47"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+        <Grid Grid.Row="0" Background="Red">
+            <StackPanel Orientation="Horizontal">
+                <HyperlinkButton Content="Recommended" Foreground="White" Margin="10,8,10,10"/>
+                <HyperlinkButton Content="Trending" Foreground="White" Margin="10,8,10,10"/>
+                <HyperlinkButton Content="Subscriptions" Foreground="White" Margin="10,8,10,10"/>
+            </StackPanel>
+        </Grid>
+        <Frame Grid.Row="1" Name="content"/>
+    </Grid>
+</Page>
diff --git a/FoxTube/Home.xaml.cs b/FoxTube/Home.xaml.cs
new file mode 100644
index 0000000..9ce28df
--- /dev/null
+++ b/FoxTube/Home.xaml.cs
@@ -0,0 +1,31 @@
+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 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 https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace FoxTube
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class Home : Page
+    {
+        public Home()
+        {
+            this.InitializeComponent();
+            content.Navigate(typeof(VideoGrid));
+        }
+    }
+}
diff --git a/FoxTube/MainPage.xaml b/FoxTube/MainPage.xaml
index 2d789a7..f212191 100644
--- a/FoxTube/MainPage.xaml
+++ b/FoxTube/MainPage.xaml
@@ -45,30 +45,14 @@
             <Button Name="notificationMenu" Grid.Column="6" ToolTipService.ToolTip="Notifications" Click="notification_Click"
                         FontFamily="Segoe MDL2 Assets" Content="&#xED0D;" Foreground="White"
                         Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
-            <Popup Grid.Column="6" Margin="0,50,0,0" Name="notificationPane" IsOpen="True" IsLightDismissEnabled="True">
+            <Popup Grid.Column="6" Margin="0,50,0,0" Name="notificationPane" IsOpen="False" IsLightDismissEnabled="True">
                 <StackPanel Width="350" Background="WhiteSmoke" Padding="0,10,0,0">
                     <TextBlock Text="Notifications" HorizontalAlignment="Center" FontWeight="Bold"/>
                     <StackPanel Margin="0,10,0,0">
-                        <TextBlock Text="You have no any notification" Name="noNotifText" Foreground="Gray" FontStyle="Italic" Padding="10" Visibility="Collapsed"/>
-                        <StackPanel Name="notificationPanel" Visibility="Visible">
+                        <TextBlock Text="You have no any notification" Name="noNotifText" Foreground="Gray" FontStyle="Italic" Padding="10" Visibility="Visible"/>
+                        <StackPanel Name="notificationPanel" Visibility="Collapsed">
                             <ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
-                                <ListBoxItem Padding="10" MinHeight="80">
-                                    <StackPanel Orientation="Horizontal">
-                                        <PersonPicture Height="50" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Top" ProfilePicture="Assets/LogoAvatar.png"/>
-                                        <StackPanel MaxWidth="270">
-                                            <TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
-                                            <TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
-                                            <TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
-                                        </StackPanel>
-                                    </StackPanel>
-                                </ListBoxItem>
-                                <ListBoxItem Padding="10" VerticalAlignment="Stretch" Background="LightGray" MinHeight="80" Height="100">
-                                    <StackPanel>
-                                        <TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
-                                        <TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
-                                        <TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
-                                    </StackPanel>
-                                </ListBoxItem>
+                                
                             </ListBox>
                             <Button Content="Clear all" HorizontalAlignment="Right" Margin="10,0,10,10" Name="clearNotifications" Click="clearNotifications_Click"/>
                         </StackPanel>
@@ -174,7 +158,7 @@
                 </StackPanel>
             </Popup>
         </Grid>
-        <SplitView Name="menu" Grid.Row="1" OpenPaneLength="250" CompactPaneLength="50" DisplayMode="CompactInline" IsPaneOpen="True">
+        <SplitView Name="menu" Grid.Row="1" OpenPaneLength="250" CompactPaneLength="50" DisplayMode="CompactInline" IsPaneOpen="True" PaneClosing="menu_PaneClosed" PaneOpening="menu_PaneOpened">
             <SplitView.Pane>
                 <RelativePanel>
                     <ListBox SelectionChanged="ListBox_SelectionChanged" Name="topHamburger">
diff --git a/FoxTube/MainPage.xaml.cs b/FoxTube/MainPage.xaml.cs
index d8fa494..aa9493e 100644
--- a/FoxTube/MainPage.xaml.cs
+++ b/FoxTube/MainPage.xaml.cs
@@ -32,7 +32,7 @@ namespace FoxTube
         public MainPage()
         {
             this.InitializeComponent();
-            content.Navigate(typeof(Settings));
+            content.Navigate(typeof(Home));
         }
 
         protected override void OnNavigatedTo(NavigationEventArgs e)
@@ -55,23 +55,6 @@ namespace FoxTube
         {
             menu.IsPaneOpen = !menu.IsPaneOpen;
             //AddNotification(new Notification("Internal notification", "Menu state has been changed", DateTime.Now, NotificationType.Update));
-
-            if(menu.IsPaneOpen)
-            {
-                subsMenuTitle.Visibility = Visibility.Visible;
-                subsMenuStroke.X2 = 165;
-                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 10;
-                subscriptionsTitle.Height = 17;
-                subsLogErr.Visibility = Visibility.Visible;
-            }
-            else
-            {
-                subsMenuTitle.Visibility = Visibility.Collapsed;
-                subsMenuStroke.X2 = 40;
-                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 0;
-                subscriptionsTitle.Height = 2;
-                subsLogErr.Visibility = Visibility.Collapsed;
-            }
         }
 
         public void AddNotification(Notification notification , bool needNotify = true)
@@ -200,27 +183,25 @@ namespace FoxTube
         {
             if(topHamburger.SelectedIndex == 0)
             {
-                content.Navigate(typeof(About));
+                content.Navigate(typeof(Home));
                 menu.DisplayMode = SplitViewDisplayMode.CompactInline;
                 menu.IsPaneOpen = true;
-
-                subsMenuTitle.Visibility = Visibility.Visible;
-                subsMenuStroke.X2 = 165;
-                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 10;
-                subscriptionsTitle.Height = 17;
-                subsLogErr.Visibility = Visibility.Visible;
             }
             else if (bottomHaburger.SelectedIndex == 3)
             {
                 content.Navigate(typeof(Settings));
                 menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
                 menu.IsPaneOpen = false;
-
-                subsMenuTitle.Visibility = Visibility.Collapsed;
-                subsMenuStroke.X2 = 40;
-                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 0;
-                subscriptionsTitle.Height = 2;
-                subsLogErr.Visibility = Visibility.Collapsed;
+            }
+            else if (bottomHaburger.SelectedIndex == 0)
+            {
+                content.Navigate(typeof(Channel));
+                menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
+                menu.IsPaneOpen = false;
+            }
+            else if (bottomHaburger.SelectedIndex == 2)
+            {
+                bottomHaburger.SelectedItem = null;
             }
         }
 
@@ -251,5 +232,29 @@ namespace FoxTube
             Settings s = content.Content as Settings;
             s.content.Navigate(typeof(Feedback));
         }
+
+        private void menu_PaneClosed(SplitView sender, object args)
+        {
+            try
+            {
+                subsMenuTitle.Visibility = Visibility.Collapsed;
+                subsMenuStroke.X2 = 40;
+                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 0;
+                subscriptionsTitle.Height = 2;
+                subsLogErr.Visibility = Visibility.Collapsed;
+            } catch { }
+        }
+
+        private void menu_PaneOpened(SplitView sender, object args)
+        {
+            try
+            {
+                subsMenuTitle.Visibility = Visibility.Visible;
+                subsMenuStroke.X2 = 165;
+                subsMenuStroke.Y1 = subsMenuStroke.Y2 = 10;
+                subscriptionsTitle.Height = 17;
+                subsLogErr.Visibility = Visibility.Visible;
+            } catch { }
+        }
     }
 }
diff --git a/FoxTube/VideoCard.xaml b/FoxTube/VideoCard.xaml
new file mode 100644
index 0000000..7fc622a
--- /dev/null
+++ b/FoxTube/VideoCard.xaml
@@ -0,0 +1,47 @@
+<UserControl
+    x:Class="FoxTube.VideoCard"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    d:DesignHeight="290"
+    d:DesignWidth="384">
+
+    <Grid Background="WhiteSmoke">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="75"/>
+        </Grid.RowDefinitions>
+        <StackPanel Background="Red" Padding="0,-35,0,0">
+            <Image Source="https://i.ytimg.com/vi/f8iOcZ43YT0/hqdefault.jpg"/>
+        </StackPanel>
+        <Grid Grid.Row="1">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="20"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+            <Grid Grid.Row="0">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="75"/>
+                    <ColumnDefinition Width="*"/>
+                    <ColumnDefinition Width="160"/>
+                </Grid.ColumnDefinitions>
+                <Ellipse Grid.Column="0" Height="50" Width="50" Margin="10,-30,10,10" Fill="WhiteSmoke"/>
+                <PersonPicture Grid.Column="0" Height="46" Margin="10,-30,10,0" BorderBrush="White" BorderThickness="10" ProfilePicture="https://yt3.ggpht.com/-UOhOJaAitUc/AAAAAAAAAAI/AAAAAAAAAAA/z3WPfWpVuZw/s88-c-k-no-mo-rj-c0xffffff/photo.jpg"/>
+
+                <TextBlock Grid.Column="1" Text="IGP" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
+                <TextBlock Grid.Column="2" Text="1:00:00 | 59 minute ago" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
+            </Grid>
+            <StackPanel Grid.Row="1">
+                <TextBlock Text="Subnautica - SAY GOODBYE TO SUBNAUTICA! We're Back Home! - Subnautica Ending (Full Release Gameplay)" TextWrapping="WrapWholeWords" Margin="5" FontSize="14"/>
+            </StackPanel>
+            <!--<StackPanel Width="75" Padding="0" Grid.Row="0">
+            </StackPanel>
+            <StackPanel Orientation="Vertical">
+                <TextBlock Text="This is veeery looong name of video lalala! It's not a " TextWrapping="WrapWholeWords"/>
+            </StackPanel>-->
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/FoxTube/VideoCard.xaml.cs b/FoxTube/VideoCard.xaml.cs
new file mode 100644
index 0000000..e797d3f
--- /dev/null
+++ b/FoxTube/VideoCard.xaml.cs
@@ -0,0 +1,27 @@
+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 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 User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
+
+namespace FoxTube
+{
+    public sealed partial class VideoCard : UserControl
+    {
+        public VideoCard()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
diff --git a/FoxTube/VideoGrid.xaml b/FoxTube/VideoGrid.xaml
new file mode 100644
index 0000000..a6b97d6
--- /dev/null
+++ b/FoxTube/VideoGrid.xaml
@@ -0,0 +1,19 @@
+<Page
+    x:Class="FoxTube.VideoGrid"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="384"/>
+            <ColumnDefinition Width="384"/>
+            <ColumnDefinition Width="384"/>
+            <ColumnDefinition Width="384"/>
+            <ColumnDefinition Width="384"/>
+        </Grid.ColumnDefinitions>
+    </Grid>
+</Page>
diff --git a/FoxTube/VideoGrid.xaml.cs b/FoxTube/VideoGrid.xaml.cs
new file mode 100644
index 0000000..56a9811
--- /dev/null
+++ b/FoxTube/VideoGrid.xaml.cs
@@ -0,0 +1,30 @@
+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 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 https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace FoxTube
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class VideoGrid : Page
+    {
+        public VideoGrid()
+        {
+            this.InitializeComponent();
+        }
+    }
+}