Archived
1
0

Adaptive video card grid

This commit is contained in:
Michael Gordeev
2018-05-19 23:37:42 +03:00
parent 0ebaee13e6
commit 031d9ab368
7 changed files with 217 additions and 59 deletions
+10 -10
View File
@@ -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 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 Content="Community Guidelines" NavigateUri="https://youtube.com/t/community_guidelines" Padding="0,0,0,10"/>
<HyperlinkButton Foreground="Red" Content="Our Privacy Policy" NavigateUri="http://foxgame.hol.es/foxtubepp.txt" Padding="0,5,0,0"/>
<HyperlinkButton Foreground="Red" Content="Privacy Policy" NavigateUri="https://youtube.com/t/privacy" Padding="0"/>
<HyperlinkButton Foreground="Red" Content="Terms of use" NavigateUri="https://youtube.com/t/terms" Padding="0"/>
<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"/>
+1 -10
View File
@@ -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>
+2 -1
View File
@@ -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>
+51
View File
@@ -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;
}
}
}
}
}
+1 -3
View File
@@ -10,9 +10,7 @@
VerticalAlignment="Top"
SizeChanged="UserControl_SizeChanged"
d:DesignHeight="290"
d:DesignWidth="384"
MaxHeight="300"
MaxWidth="400">
d:DesignWidth="384">
<Button Padding="0" Background="Transparent" VerticalAlignment="Top">
<Grid Background="WhiteSmoke" BorderBrush="LightGray" BorderThickness="1">
+44 -35
View File
@@ -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">
<ScrollViewer>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="3">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
</Grid>
</ScrollViewer>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="5" Name="grid" SizeChanged="grid_SizeChanged">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Name="col0">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Name="col1">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2" Name="col2">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="3" Name="col3">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="4" Name="col4">
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
<local:VideoCard/>
</StackPanel>
</Grid>
</Page>
+108
View File
@@ -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);
}
}
}