archive/FoxTube
Archived
1
0
Fork 0
Code Actions Activity

Adaptive video card grid

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
FoxTube/About.xaml
+10 -10
View File
@@ -23,34 +23,34 @@
<TextBlock Text="Contacts" FontSize="22" FontWeight="SemiBold"/> <TextBlock Text="Contacts" FontSize="22" FontWeight="SemiBold"/>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="Twitter:" Margin="0,0,5,0"/> <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>
<StackPanel Orientation="Horizontal" Visibility="Collapsed"> <StackPanel Orientation="Horizontal" Visibility="Collapsed">
<TextBlock Text="Facebook:" Margin="0,0,5,0"/> <TextBlock Text="Facebook:" Margin="0,0,5,0"/>
<HyperlinkButton Content="@XFox.Mike" Padding="0"/> <HyperlinkButton Foreground="Red" Content="@XFox.Mike" Padding="0"/>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="VKontakte:" Margin="0,0,5,0"/> <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>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="YouTube:" Margin="0,0,5,0"/> <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>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="E-mail:" Margin="0,0,5,0"/> <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>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="Official website (Russian language only):" Margin="0,0,5,0"/> <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> </StackPanel>
<TextBlock/> <TextBlock/>
<TextBlock Text="Legal stuff" FontSize="22" FontWeight="SemiBold"/> <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 Michael Gordeev"/>
<TextBlock Text="© 2018 YouTube, LLC"/> <TextBlock Text="© 2018 YouTube, LLC"/>
<Image Source="Assets/FoxGame.png" Width="300" HorizontalAlignment="Left" Visibility="Collapsed"/> <Image Source="Assets/FoxGame.png" Width="300" HorizontalAlignment="Left" Visibility="Collapsed"/>
FoxTube/Channel.xaml
+1 -10
View File
@@ -59,16 +59,7 @@
<!--&#xE781;&#xE93E;&#xEDAC;--> <!--&#xE781;&#xE93E;&#xEDAC;-->
</Grid> </Grid>
<StackPanel Grid.Row="2" Name="videos" Orientation="Horizontal"> <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> </StackPanel>
</Grid> </Grid>
</PivotItem> </PivotItem>
FoxTube/MainPage.xaml
+2 -1
View File
@@ -5,7 +5,8 @@
xmlns:local="using:FoxTube" xmlns:local="using:FoxTube"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> mc:Ignorable="d"
SizeChanged="Page_SizeChanged">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions> <Grid.RowDefinitions>
FoxTube/MainPage.xaml.cs
+51
View File
@@ -38,10 +38,17 @@ namespace FoxTube
/// <summary> /// <summary>
/// An empty page that can be used on its own or navigated to within a Frame. /// An empty page that can be used on its own or navigated to within a Frame.
/// </summary> /// </summary>
public enum RightPaneState { Full, Collapsed, Hidden }
public sealed partial class MainPage : Page public sealed partial class MainPage : Page
{ {
private bool loggedIn = false; private bool loggedIn = false;
UserCredential credential; UserCredential credential;
RightPaneState paneState = RightPaneState.Full;
bool isForcedCollapsed = false;
public bool Logged public bool Logged
{ {
get get
@@ -231,6 +238,7 @@ namespace FoxTube
content.Navigate(typeof(Home)); content.Navigate(typeof(Home));
headerText.Text = "Home"; headerText.Text = "Home";
menu.DisplayMode = SplitViewDisplayMode.CompactInline; menu.DisplayMode = SplitViewDisplayMode.CompactInline;
isForcedCollapsed = false;
menu.IsPaneOpen = true; menu.IsPaneOpen = true;
} }
else if (topHamburger.SelectedIndex == 1) else if (topHamburger.SelectedIndex == 1)
@@ -239,6 +247,7 @@ namespace FoxTube
headerText.Text = "Video"; headerText.Text = "Video";
menu.DisplayMode = SplitViewDisplayMode.CompactOverlay; menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
menu.IsPaneOpen = false; menu.IsPaneOpen = false;
isForcedCollapsed = true;
} }
else if (bottomHaburger.SelectedIndex == 4) else if (bottomHaburger.SelectedIndex == 4)
{ {
@@ -246,6 +255,7 @@ namespace FoxTube
headerText.Text = "Settings"; headerText.Text = "Settings";
menu.DisplayMode = SplitViewDisplayMode.CompactOverlay; menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
menu.IsPaneOpen = false; menu.IsPaneOpen = false;
isForcedCollapsed = true;
} }
else if (bottomHaburger.SelectedIndex == 1) else if (bottomHaburger.SelectedIndex == 1)
{ {
@@ -253,6 +263,7 @@ namespace FoxTube
headerText.Text = "Channel overview"; headerText.Text = "Channel overview";
menu.DisplayMode = SplitViewDisplayMode.CompactOverlay; menu.DisplayMode = SplitViewDisplayMode.CompactOverlay;
menu.IsPaneOpen = false; menu.IsPaneOpen = false;
isForcedCollapsed = true;
} }
else if (bottomHaburger.SelectedIndex == 3) else if (bottomHaburger.SelectedIndex == 3)
{ {
@@ -571,5 +582,45 @@ namespace FoxTube
Channel page = content.Content as Channel; Channel page = content.Content as Channel;
page.Initialize(id); 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
+1 -3
View File
@@ -10,9 +10,7 @@
VerticalAlignment="Top" VerticalAlignment="Top"
SizeChanged="UserControl_SizeChanged" SizeChanged="UserControl_SizeChanged"
d:DesignHeight="290" d:DesignHeight="290"
d:DesignWidth="384" d:DesignWidth="384">
MaxHeight="300"
MaxWidth="400">
<Button Padding="0" Background="Transparent" VerticalAlignment="Top"> <Button Padding="0" Background="Transparent" VerticalAlignment="Top">
<Grid Background="WhiteSmoke" BorderBrush="LightGray" BorderThickness="1"> <Grid Background="WhiteSmoke" BorderBrush="LightGray" BorderThickness="1">
FoxTube/VideoGrid.xaml
+44 -35
View File
@@ -5,42 +5,51 @@
xmlns:local="using:FoxTube" xmlns:local="using:FoxTube"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="root"
mc:Ignorable="d"> 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> </Grid>
</Page> </Page>
FoxTube/VideoGrid.xaml.cs
+108
View File
@@ -12,6 +12,9 @@ using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation; 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 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
@@ -22,9 +25,114 @@ namespace FoxTube
/// </summary> /// </summary>
public sealed partial class VideoGrid : Page public sealed partial class VideoGrid : Page
{ {
int cols = 0;
List<VideoCard> cards = new List<VideoCard>();
public VideoGrid() public VideoGrid()
{ {
this.InitializeComponent(); 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);
} }
} }
} }