archive/FoxTube
Archived
1
0
Fork 0
Code Actions Activity

Updated home page layout

Browse Source 
Updated some controls layouts
This commit is contained in:
Michael Gordeev
2019-11-10 21:09:14 +03:00
parent 893a86517b
commit 1853d18fab
9 changed files with 117 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
FoxTube/Controls/Cards/ChannelCard.xaml
+4 -1
View File
@@ -43,7 +43,10 @@
<controls:ImageEx CornerRadius="999" Background="Red"
Width="75" Height="75" PlaceholderSource="/Assets/Icons/Contact.png" PlaceholderStretch="UniformToFill"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="██████████" Style="{StaticResource SubtitleTextBlockStyle}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="██████████" Style="{StaticResource SubtitleTextBlockStyle}"/>
<FontIcon Glyph="&#xEC61;" VerticalAlignment="Bottom" Margin="10,0,10,5" FontSize="12" ToolTipService.ToolTip="Verified"/>
</StackPanel>
<TextBlock Text="██████ • ██████"/>
<Grid ColumnSpacing="2" Margin="0,5,0,0">
<Grid.ColumnDefinitions>
FoxTube/Controls/ItemGrid.xaml
-18
View File
@@ -1,18 +0,0 @@
<UserControl
x:Class="FoxTube.Controls.ItemGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FoxTube.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
d:DesignHeight="1080"
d:DesignWidth="1920">
<ScrollViewer>
<controls:StaggeredPanel>
</controls:StaggeredPanel>
</ScrollViewer>
</UserControl>
FoxTube/Controls/ItemGrid.xaml.cs
-27
View File
@@ -1,27 +0,0 @@
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.Controls
{
public sealed partial class ItemGrid : UserControl
{
public ItemGrid()
{
this.InitializeComponent();
}
}
}
FoxTube/Controls/ItemsGrid.xaml
+21
View File
@@ -0,0 +1,21 @@
<UserControl
x:Class="FoxTube.Controls.ItemsGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
d:DesignHeight="1080"
d:DesignWidth="1920">
<Grid>
<controls:StaggeredPanel x:Name="grid" DesiredColumnWidth="350"/>
<controls:DropShadowPanel x:Name="empty" HorizontalAlignment="Center" VerticalAlignment="Center"
BlurRadius="10" ShadowOpacity=".5"
OffsetX="2" OffsetY="2">
<TextBlock Text="&#xD8;" FontSize="100" Foreground="Gray"/>
</controls:DropShadowPanel>
</Grid>
</UserControl>
FoxTube/Controls/ItemsGrid.xaml.cs
+30
View File
@@ -0,0 +1,30 @@
using FoxTube.Controls.Cards;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace FoxTube.Controls
{
public sealed partial class ItemsGrid : UserControl
{
UIElementCollection Items => grid.Children;
public int ItemsCount => Items.Count;
public ItemsGrid() =>
InitializeComponent();
public void Add(UIElement item)
{
empty.Opacity = 0;
if (ItemsCount % 5 == 0 && ItemsCount > 0)
Items.Add(new AdvertCard());
Items.Add(item);
}
public void Clear()
{
Items.Clear();
empty.Opacity = 1;
}
}
}
FoxTube/FoxTube.csproj
+3 -3
View File
@@ -120,8 +120,8 @@
<Compile Include="Controls\Cards\VideoCard.xaml.cs">
<DependentUpon>VideoCard.xaml</DependentUpon>
</Compile>
<Compile Include="Controls\ItemGrid.xaml.cs">
<DependentUpon>ItemGrid.xaml</DependentUpon>
<Compile Include="Controls\ItemsGrid.xaml.cs">
<DependentUpon>ItemsGrid.xaml</DependentUpon>
</Compile>
<Compile Include="Helpers\Utils.cs" />
<Compile Include="MainPage.xaml.cs">
@@ -220,7 +220,7 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Controls\ItemGrid.xaml">
<Page Include="Controls\ItemsGrid.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
FoxTube/Themes/Resources.xaml
+4
View File
@@ -10,5 +10,9 @@
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="32"/>
</Style>
<Style TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}"/>
<Style TargetType="PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</ResourceDictionary>
FoxTube/Views/Home.xaml
+44 -26
View File
@@ -5,37 +5,55 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:cards="using:FoxTube.Controls.Cards"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:controls="using:FoxTube.Controls"
mc:Ignorable="d">
<Pivot>
<PivotItem Header="Recommended">
<controls:StaggeredPanel DesiredColumnWidth="350">
<controls:StaggeredPanel.ChildrenTransitions>
<TransitionCollection>
<ReorderThemeTransition/>
</TransitionCollection>
</controls:StaggeredPanel.ChildrenTransitions>
<cards:VideoCard/>
<cards:PlaylistCard/>
<cards:ChannelCard/>
<cards:AdvertCard/>
<cards:VideoCard/>
<cards:PlaylistCard/>
<cards:ChannelCard/>
<cards:AdvertCard/>
<cards:VideoCard/>
<cards:PlaylistCard/>
<cards:ChannelCard/>
<cards:AdvertCard/>
</controls:StaggeredPanel>
<PivotItem Header="Recommended" Margin="0">
<Grid>
<RefreshContainer>
<ScrollViewer Padding="5,0">
<controls:ItemsGrid x:Name="recommendedItems"/>
</ScrollViewer>
</RefreshContainer>
<toolkit:Loading IsLoading="False" x:Name="recommendedLoading" VerticalContentAlignment="Center">
<toolkit:Loading.Background>
<AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemColorBackgroundColor}" TintOpacity=".5"/>
</toolkit:Loading.Background>
<ProgressRing Height="100" Width="100" IsActive="True"/>
</toolkit:Loading>
</Grid>
</PivotItem>
<PivotItem Header="Trending">
<PivotItem Header="Trending" Margin="0">
<Grid>
<RefreshContainer>
<ScrollViewer Padding="5,0">
<controls:ItemsGrid x:Name="trendingItems"/>
</ScrollViewer>
</RefreshContainer>
<toolkit:Loading IsLoading="False" x:Name="trendingLoading" VerticalContentAlignment="Center">
<toolkit:Loading.Background>
<AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemColorBackgroundColor}" TintOpacity=".5"/>
</toolkit:Loading.Background>
<ProgressRing Height="100" Width="100" IsActive="True"/>
</toolkit:Loading>
</Grid>
</PivotItem>
<PivotItem Header="Subscriptions">
<PivotItem Header="Subscriptions" Margin="0">
<Grid>
<RefreshContainer>
<ScrollViewer Padding="5,0">
<controls:ItemsGrid x:Name="subscriptionsItems"/>
</ScrollViewer>
</RefreshContainer>
<toolkit:Loading IsLoading="False" x:Name="subscriptionsLoading" VerticalContentAlignment="Center">
<toolkit:Loading.Background>
<AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemColorBackgroundColor}" TintOpacity=".5"/>
</toolkit:Loading.Background>
<ProgressRing Height="100" Width="100" IsActive="True"/>
</toolkit:Loading>
</Grid>
</PivotItem>
</Pivot>
</Page>
FoxTube/Views/Home.xaml.cs
+11 -14
View File
@@ -1,16 +1,5 @@
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 FoxTube.Controls.Cards;
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
@@ -22,9 +11,17 @@ namespace FoxTube.Views
/// </summary>
public sealed partial class Home : Page
{
public Home()
public Home() =>
InitializeComponent();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.InitializeComponent();
base.OnNavigatedTo(e);
for (int i = 0; i < 25; i++)
{
recommendedItems.Add(new VideoCard());
}
}
}
}