Adaptive video card grid

FoxTube/About.xaml

@@ -23,34 +23,34 @@
                     <TextBlock Text="Contacts" FontSize="22" FontWeight="SemiBold"/>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Twitter:" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="@XFox_Mike" Padding="0" NavigateUri="https://twitter.com/XFox_Mike"/>
+                        <HyperlinkButton Foreground="Red" Content="@XFox_Mike" Padding="0" NavigateUri="https://twitter.com/XFox_Mike"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal" Visibility="Collapsed">
                         <TextBlock Text="Facebook:" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="@XFox.Mike" Padding="0"/>
+                        <HyperlinkButton Foreground="Red" Content="@XFox.Mike" Padding="0"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="VKontakte:" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="@XFox.Mike" Padding="0" NavigateUri="https://vk.com/XFox.Mike"/>
+                        <HyperlinkButton Foreground="Red" Content="@XFox.Mike" Padding="0" NavigateUri="https://vk.com/XFox.Mike"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="YouTube:" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="@FoxGameStudioChannel" Padding="0" NavigateUri="https://youtube.com/c/FoxGameStudioChannel"/>
+                        <HyperlinkButton Foreground="Red" Content="@FoxGameStudioChannel" Padding="0" NavigateUri="https://youtube.com/c/FoxGameStudioChannel"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="E-mail:" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="foxgameofficial@gmail.com" Padding="0" NavigateUri="mailto:foxgameofficial+foxtube@gmail.com"/>
+                        <HyperlinkButton Foreground="Red" Content="foxgameofficial@gmail.com" Padding="0" NavigateUri="mailto:foxgameofficial+foxtube@gmail.com"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Official website (Russian language only):" Margin="0,0,5,0"/>
-                        <HyperlinkButton Content="http://foxgame.hol.es/" Padding="0" NavigateUri="http://foxgame.hol.es/"/>
+                        <HyperlinkButton Foreground="Red" Content="http://foxgame.hol.es/" Padding="0" NavigateUri="http://foxgame.hol.es/"/>
                     </StackPanel>
                     <TextBlock/>
                     <TextBlock Text="Legal stuff" FontSize="22" FontWeight="SemiBold"/>
-                    <HyperlinkButton Content="Our Privacy Policy" NavigateUri="http://foxgame.hol.es/foxtubepp.txt" Padding="0,5,0,0"/>
+                    <HyperlinkButton Foreground="Red" Content="Our Privacy Policy" NavigateUri="http://foxgame.hol.es/foxtubepp.txt" Padding="0,5,0,0"/>
-                    <HyperlinkButton Content="Privacy Policy" NavigateUri="https://youtube.com/t/privacy" Padding="0"/>
+                    <HyperlinkButton Foreground="Red" Content="Privacy Policy" NavigateUri="https://youtube.com/t/privacy" Padding="0"/>
-                    <HyperlinkButton Content="Terms of use" NavigateUri="https://youtube.com/t/terms" Padding="0"/>
+                    <HyperlinkButton Foreground="Red" Content="Terms of use" NavigateUri="https://youtube.com/t/terms" Padding="0"/>
-                    <HyperlinkButton Content="Community Guidelines" NavigateUri="https://youtube.com/t/community_guidelines" Padding="0,0,0,10"/>
+                    <HyperlinkButton Foreground="Red" Content="Community Guidelines" NavigateUri="https://youtube.com/t/community_guidelines" Padding="0,0,0,10"/>
                     <TextBlock Text="© 2018 Michael Gordeev"/>
                     <TextBlock Text="© 2018 YouTube, LLC"/>
                     <Image Source="Assets/FoxGame.png" Width="300" HorizontalAlignment="Left" Visibility="Collapsed"/>

FoxTube/Channel.xaml

@@ -59,16 +59,7 @@
                             <!--&#xE781;&#xE93E;&#xEDAC;-->
                         </Grid>
                         <StackPanel Grid.Row="2" Name="videos" Orientation="Horizontal">
-                            <local:VideoCard/>
+                            
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
-                            <local:VideoCard/>
                         </StackPanel>
                     </Grid>
                 </PivotItem>

FoxTube/MainPage.xaml

@@ -5,7 +5,8 @@
     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">
+    mc:Ignorable="d"
+    SizeChanged="Page_SizeChanged">
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid.RowDefinitions>

FoxTube/MainPage.xaml.cs

@@ -38,10 +38,17 @@ namespace FoxTube
     /// <summary>
     /// An empty page that can be used on its own or navigated to within a Frame.
     /// </summary>
+
+    public enum RightPaneState { Full, Collapsed, Hidden }
+
     public sealed partial class MainPage : Page
     {
         private bool loggedIn = false;
         UserCredential credential;
+
+        RightPaneState paneState = RightPaneState.Full;
+        bool isForcedCollapsed = false;
+
         public bool Logged
         {
             get
@@ -231,6 +238,7 @@ namespace FoxTube
                 content.Navigate(typeof(Home));
                 headerText.Text = "Home";
                 menu.DisplayMode = SplitViewDisplayMode.CompactInline;
+                isForcedCollapsed = false;
                 menu.IsPaneOpen = true;
             }
             else if (topHamburger.SelectedIndex == 1)
@@ -239,6 +247,7 @@ namespace FoxTube
                 headerText.Text = "Video";
                 menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
                 menu.IsPaneOpen = false;
+                isForcedCollapsed = true;
             }
             else if (bottomHaburger.SelectedIndex == 4)
             {
@@ -246,6 +255,7 @@ namespace FoxTube
                 headerText.Text = "Settings";
                 menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
                 menu.IsPaneOpen = false;
+                isForcedCollapsed = true;
             }
             else if (bottomHaburger.SelectedIndex == 1)
             {
@@ -253,6 +263,7 @@ namespace FoxTube
                 headerText.Text = "Channel overview";
                 menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
                 menu.IsPaneOpen = false;
+                isForcedCollapsed = true;
             }
             else if (bottomHaburger.SelectedIndex == 3)
             {
@@ -571,5 +582,45 @@ namespace FoxTube
             Channel page = content.Content as Channel;
             page.Initialize(id);
         }
+
+        private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if(isForcedCollapsed)
+            {
+                if (e.NewSize.Width >= 600 && paneState != RightPaneState.Collapsed)
+                {
+                    menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
+                    menu.IsPaneOpen = false;
+                    paneState = RightPaneState.Collapsed;
+                }
+                else if (e.NewSize.Width < 600 && paneState != RightPaneState.Hidden)
+                {
+                    menu.DisplayMode = SplitViewDisplayMode.Overlay;
+                    menu.IsPaneOpen = false;
+                    paneState = RightPaneState.Hidden;
+                }
+            }
+            else
+            {
+                if (e.NewSize.Width >= 1000 && paneState != RightPaneState.Full)
+                {
+                    menu.DisplayMode = SplitViewDisplayMode.CompactInline;
+                    menu.IsPaneOpen = true;
+                    paneState = RightPaneState.Full;
+                }
+                else if(e.NewSize.Width >= 600 && e.NewSize.Width < 1000 && paneState != RightPaneState.Collapsed)
+                {
+                    menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
+                    menu.IsPaneOpen = false;
+                    paneState = RightPaneState.Collapsed;
+                }
+                else if(e.NewSize.Width < 600 && paneState != RightPaneState.Hidden)
+                {
+                    menu.DisplayMode = SplitViewDisplayMode.Overlay;
+                    menu.IsPaneOpen = false;
+                    paneState = RightPaneState.Hidden;
+                }
+            }
+        }
     }
 }

FoxTube/VideoCard.xaml

@@ -10,9 +10,7 @@
     VerticalAlignment="Top"
     SizeChanged="UserControl_SizeChanged"
     d:DesignHeight="290"
-    d:DesignWidth="384"
+    d:DesignWidth="384">
-    MaxHeight="300"
-    MaxWidth="400">
 
     <Button Padding="0" Background="Transparent" VerticalAlignment="Top">
         <Grid Background="WhiteSmoke" BorderBrush="LightGray" BorderThickness="1">

FoxTube/VideoGrid.xaml

@@ -5,42 +5,51 @@
     xmlns:local="using:FoxTube"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    x:Name="root"
     mc:Ignorable="d">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="5">
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="5" Name="grid" SizeChanged="grid_SizeChanged">
-        <ScrollViewer>
+        <Grid.ColumnDefinitions>
-            <Grid>
+            <ColumnDefinition Width="*"/>
-                <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="*"/>
+        </Grid.ColumnDefinitions>
-                </Grid.ColumnDefinitions>
+        <StackPanel Orientation="Vertical" Grid.Column="0" Name="col0">
-                <StackPanel Orientation="Vertical" Grid.Column="0">
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                </StackPanel>
+        </StackPanel>
-                <StackPanel Orientation="Vertical" Grid.Column="1">
+        <StackPanel Orientation="Vertical" Grid.Column="1" Name="col1">
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                </StackPanel>
+            <local:VideoCard/>
-                <StackPanel Orientation="Vertical" Grid.Column="2">
+        </StackPanel>
-                    <local:VideoCard/>
+        <StackPanel Orientation="Vertical" Grid.Column="2" Name="col2">
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                </StackPanel>
+            <local:VideoCard/>
-                <StackPanel Orientation="Vertical" Grid.Column="3">
+            <local:VideoCard/>
-                    <local:VideoCard/>
+        </StackPanel>
-                    <local:VideoCard/>
+        <StackPanel Orientation="Vertical" Grid.Column="3" Name="col3">
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                    <local:VideoCard/>
+            <local:VideoCard/>
-                </StackPanel>
+            <local:VideoCard/>
-            </Grid>
+            <local:VideoCard/>
-        </ScrollViewer>
+            <local:VideoCard/>
+        </StackPanel>
+        <StackPanel Orientation="Vertical" Grid.Column="4" Name="col4">
+            <local:VideoCard/>
+            <local:VideoCard/>
+            <local:VideoCard/>
+            <local:VideoCard/>
+            <local:VideoCard/>
+        </StackPanel>
     </Grid>
 </Page>

FoxTube/VideoGrid.xaml.cs

@@ -12,6 +12,9 @@ using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
+using System.Diagnostics;
+using System.Timers;
+using Windows.UI.Core;
 
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
 
@@ -22,9 +25,114 @@ namespace FoxTube
     /// </summary>
     public sealed partial class VideoGrid : Page
     {
+        int cols = 0;
+        List<VideoCard> cards = new List<VideoCard>();
+
         public VideoGrid()
         {
             this.InitializeComponent();
+            for (int k = 0; k < 25; k++)
+                cards.Add(new VideoCard());
+        }
+
+        void SetColumns(int num)
+        {
+            cols = num;
+            for (int k = 0; k < grid.ColumnDefinitions.Count; k++)
+                grid.ColumnDefinitions[k].Width = new GridLength(1, GridUnitType.Star);
+            for (int k = num; k < grid.ColumnDefinitions.Count; k++)
+                grid.ColumnDefinitions[k].Width = new GridLength(0);
+
+            col0.Children.Clear();
+            col1.Children.Clear();
+            col2.Children.Clear();
+            col3.Children.Clear();
+            col4.Children.Clear();
+
+            for (int k = 0; k < cards.Count; k += num)
+                col0.Children.Add(cards[k]);
+            if(num > 1)
+            {
+                for (int k = 1; k < cards.Count; k += num)
+                    col1.Children.Add(cards[k]);
+                if(num > 2)
+                {
+                    for (int k = 2; k < cards.Count; k += num)
+                        col2.Children.Add(cards[k]);
+                    if(num > 3)
+                    {
+                        for (int k = 3; k < cards.Count; k += num)
+                            col3.Children.Add(cards[k]);
+                        if(num == 5)
+                        {
+                            for (int k = 4; k < cards.Count; k += num)
+                                col4.Children.Add(cards[k]);
+                        }
+                    }
+                }
+            }
+
+            /*switch(num)
+            {
+                case 1:
+                    foreach (VideoCard card in cards)
+                        col0.Children.Add(card);
+                    break;
+
+                case 2:
+                    for (int k = 0; k < cards.Count; k += 2)
+                        col0.Children.Add(cards[k]);
+                    for (int k = 1; k < cards.Count; k += 2)
+                        col1.Children.Add(cards[k]);
+                    break;
+
+                case 3:
+                    for (int k = 0; k < cards.Count; k += 3)
+                        col0.Children.Add(cards[k]);
+                    for (int k = 1; k < cards.Count; k += 3)
+                        col1.Children.Add(cards[k]);
+                    for (int k = 2; k < cards.Count; k += 3)
+                        col2.Children.Add(cards[k]);
+                    break;
+
+                case 4:
+                    for (int k = 0; k < cards.Count; k += 4)
+                        col0.Children.Add(cards[k]);
+                    for (int k = 1; k < cards.Count; k += 4)
+                        col1.Children.Add(cards[k]);
+                    for (int k = 2; k < cards.Count; k += 4)
+                        col2.Children.Add(cards[k]);
+                    for (int k = 3; k < cards.Count; k += 4)
+                        col3.Children.Add(cards[k]);
+                    break;
+
+                case 5:
+                    for (int k = 0; k < cards.Count; k += 5)
+                        col0.Children.Add(cards[k]);
+                    for (int k = 1; k < cards.Count; k += 5)
+                        col1.Children.Add(cards[k]);
+                    for (int k = 2; k < cards.Count; k += 5)
+                        col2.Children.Add(cards[k]);
+                    for (int k = 3; k < cards.Count; k += 5)
+                        col3.Children.Add(cards[k]);
+                    for (int k = 4; k < cards.Count; k += 5)
+                        col4.Children.Add(cards[k]);
+                    break;
+            }*/
+        }
+
+        private void grid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if (e.NewSize.Width >= 1500 && cols != 5)
+                SetColumns(5);
+            else if (e.NewSize.Width >= 1000 && e.NewSize.Width < 1500 && cols != 4)
+                SetColumns(4);
+            else if (e.NewSize.Width >= 800 && e.NewSize.Width < 1000 && cols != 3)
+                SetColumns(3);
+            else if (e.NewSize.Width >= 600 && e.NewSize.Width < 800 && cols != 2)
+                SetColumns(2);
+            else if (e.NewSize.Width < 600 && cols != 1)
+                SetColumns(1);
         }
     }
 }