FoxTube/FoxTube/Pages/VideoPage.xaml

<Page
    x:Class="FoxTube.Pages.VideoPage"
    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"
    xmlns:pages="using:FoxTube.Pages"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:ui="using:Microsoft.Advertising.WinRT.UI"
    xmlns:controls1="using:FoxTube.Controls"
    mc:Ignorable="d">


    <Grid Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" SizeChanged="grid_SizeChanged">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="ratingPanel.(Grid.Row)" Value="0"/>
                        <Setter Target="ratingPanel.(HorizontalAlignment)" Value="Right"/>
                        <Setter Target="rating.Width" Value="250"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer Margin="0,0,0,50" Name="mainScroll">
            <StackPanel Orientation="Vertical" Name="mainContent">
                <local:VideoPlayer/>
                <PivotItem Header="Description" Name="descriptionPanel">
                    <StackPanel Margin="0,10">
                        <Button Visibility="Collapsed">
                            <StackPanel Orientation="Horizontal">
                                <FontIcon Glyph="&#xE1AD;" Margin="0,0,10,0"/>
                                <TextBlock Text="Continue watching from HH:MM:SS"/>
                            </StackPanel>
                        </Button>
                        <TextBlock IsTextSelectionEnabled="True" Name="title" Text="[Video title]" FontSize="25" TextWrapping="WrapWholeWords" HorizontalTextAlignment="Start"/>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Button Padding="0" Background="Transparent" Margin="5" Name="gotoChannel" Click="gotoChannel_Click">
                                <StackPanel Orientation="Horizontal">
                                    <PersonPicture Name="channelAvatar" Width="90"/>
                                    <StackPanel Orientation="Vertical" Grid.Column="1" Padding="5" VerticalAlignment="Center">
                                        <TextBlock Name="channelName" Text="[Channel name]" FontSize="18"/>
                                        <TextBlock Name="subscribers" Text="[subscribers]" Foreground="Gray" Margin="0,0,0,5"/>
                                        <Button Click="subscribe_Click" Grid.Column="2" Height="30" Width="200" Background="Red" Foreground="White" FontSize="14" FontWeight="SemiBold" Content="Subscirbe" Name="subscribe"/>
                                    </StackPanel>
                                </StackPanel>
                            </Button>
                            <StackPanel HorizontalAlignment="Stretch" Name="ratingPanel" Grid.Row="1">
                                <TextBlock Name="views" Text="[views]" FontSize="24" Foreground="Gray"/>
                                <ProgressBar Name="rating" Background="Green" Foreground="Red"/>
                                <Grid>
                                    <FontIcon Foreground="Gray"
                                              HorizontalAlignment="Left"
                                              FontSize="40"
                                              Name="dislike" Tapped="dislike_Click"
                                              Glyph="&#xE19E;"/>

                                    <FontIcon Foreground="Gray"
                                              HorizontalAlignment="Right"
                                              FontSize="40"
                                              Name="like" Tapped="like_Click"
                                              Glyph="&#xE19F;"/>
                                </Grid>
                                <Grid>
                                    <TextBlock Foreground="Gray" Text="[dislikes]" Name="dislikes"/>
                                    <TextBlock HorizontalAlignment="Right" Foreground="Gray" Text="[likes]" Name="likes"/>
                                </Grid>
                            </StackPanel>
                        </Grid>
                        <TextBlock Name="description" Text="[Description]" IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords"/>
                        <Grid Margin="0,20,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock Text="Published at: "/>
                            <TextBlock Grid.Row="1" Text="Category: "/>
                            <TextBlock Grid.Row="2" Text="License: "/>

                            <TextBlock Name="publishedAt" Grid.Column="2" Text="[Publishing date]"/>
                            <TextBlock Name="category" Grid.Column="2" Grid.Row="1" Padding="0" Text="[Category]"/>
                            <TextBlock Name="license" Grid.Column="2" Grid.Row="2" Text="[License type]"/>
                        </Grid>
                    </StackPanel>
                </PivotItem>
            </StackPanel>
        </ScrollViewer>

        <CommandBar VerticalAlignment="Bottom" Name="commandbar">
            <AppBarButton Icon="Download" Label="Download video" Name="download">
                <AppBarButton.Flyout>
                    <MenuFlyout x:Name="downloadSelector"/>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Name="addTo" Label="Add to" Icon="Add">
                <AppBarButton.Flyout>
                    <Flyout>
                        <ScrollViewer Margin="-12" MaxHeight="300">
                            <NavigationViewList Width="200" IsMultiSelectCheckBoxEnabled="True" SelectionMode="Multiple">
                                <NavigationViewItem Content="Watch later">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE728;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                                <NavigationViewItem Content="New playlist">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE109;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                                <NavigationViewItemHeader Content="Other playlists"/>
                                <NavigationViewItem Content="My playlist">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE292;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                                <NavigationViewItem Content="Cats">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE292;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                                <NavigationViewItem Content="Dogs">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE292;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                                <NavigationViewItem Content="Another playlist">
                                    <NavigationViewItem.Icon>
                                        <FontIcon Glyph="&#xE292;"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                            </NavigationViewList>
                        </ScrollViewer>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Name="refresh" Click="refresh_Click" Icon="Refresh" Label="Refresh page"/>
            <AppBarButton Name="share" Click="share_Click" Icon="Share" Label="Share"/>
            <AppBarButton Name="openBrowser" Click="openBrowser_Click" Icon="Globe" Label="Open in browser"/>
        </CommandBar>

        <Grid Grid.Column="1" Name="tabsPlaceholder">
            <Pivot Grid.Row="1" Name="pivot" SelectedIndex="0" IsHeaderItemsCarouselEnabled="False">
                <PivotItem Header="Suggestions">
                    <ScrollViewer>
                        <StackPanel>
                            <controls1:Advert/>
                            <StackPanel Name="relatedVideos"/>
                        </StackPanel>
                    </ScrollViewer>
                </PivotItem>
                <PivotItem Header="Comments" Name="commentsPlaceholder">
                    <pages:CommentsPage/>
                </PivotItem>
                <PivotItem Header="Playlist" Name="playlist">
                    <ScrollViewer>
                        <StackPanel>
                            <StackPanel Padding="8" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
                                <TextBlock Text="Music" FontSize="26" TextWrapping="WrapWholeWords" Name="playlistName"/>
                                <TextBlock Text="DAGames" Name="playlistChannel"/>
                                <TextBlock Text="15/155" Name="playlistCounter"/>
                            </StackPanel>
                            <ListBox Background="Transparent" SelectionChanged="ListBox_SelectionChanged" Name="playlistList">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Tag="{Binding Path=Id}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Text="{Binding Path=Number}" VerticalAlignment="Center" Margin="0,0,8,0"/>
                                            <Image Grid.Column="1" Source="{Binding Path=Thumbnail}" Height="65"/>
                                            <TextBlock Grid.Column="2" Margin="8,0,0,0" VerticalAlignment="Center" TextWrapping="WrapWholeWords" Text="{Binding Path=Title}"/>
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                    </ScrollViewer>
                </PivotItem>
            </Pivot>
        </Grid>

        <local:LoadingPage Grid.ColumnSpan="2" Visibility="Collapsed"/>
    </Grid>
</Page>