FoxTube/FoxTube/Controls/CommentCard.xaml

<UserControl
    x:Class="FoxTube.Controls.CommentCard"
    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:DesignWidth="400">
    
    <Grid Background="WhiteSmoke" Margin="2" Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="0"/>
            <RowDefinition Height="0"/>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <PersonPicture Tapped="avatar_Tapped" Name="avatar" Height="50" Margin="5" VerticalAlignment="Top"/>
            <Grid Grid.Column="1" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock Name="meta" TextWrapping="WrapWholeWords" Foreground="Gray" FontSize="13" Text="[Author's name] | [Published time span] [?](edited)"/>
                <TextBlock Name="text" IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords" Grid.Row="1" Text="[Content]"/>

                <StackPanel Grid.Row="1" Name="editor" Visibility="Collapsed">
                    <TextBox Name="editorText" Text="[Content]" AcceptsReturn="True" Height="Auto" TextChanged="editorText_TextChanged"/>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,0,5">
                        <Button Name="editorClose" Content="Cancel" Click="editorClose_Click"/>
                        <Button Name="editorSend" Content="Submit" Margin="5,0,0,0" Click="editorSend_Click"/>
                    </StackPanel>
                    <ProgressBar Name="editorSending" Foreground="Red" IsIndeterminate="True" Visibility="Collapsed"/>
                </StackPanel>

                <StackPanel Grid.Row="2" Orientation="Horizontal">
                    <TextBlock Name="upvote" Foreground="Gray" Padding="0"
                                    VerticalAlignment="Center" Margin="0,0,5,0"
                                    FontFamily="Segoe MDL2 Assets" Text="&#xE19F;" FontSize="20"/>
                    <TextBlock Name="rating" Foreground="Gray" VerticalAlignment="Center" Text="123"/>

                    <Button Visibility="Collapsed" Name="downvote" Background="Transparent" Foreground="Gray" Padding="0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35" Width="35"
                                    FontFamily="Segoe MDL2 Assets" Content="&#xE19E;" FontSize="20"/>

                    <Button Click="showReplies_Click" Name="showReplies" Background="Transparent" Foreground="Gray" Padding="0" Margin="10,0,0,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEC42;" Margin="0,0,5,0" FontSize="20"/>
                            <TextBlock Text="123"/>
                        </StackPanel>
                    </Button>

                    <Button Click="replyBtn_Click" Name="replyBtn" Background="Transparent" Foreground="Gray" Padding="0" Margin="10,0,0,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEE35;" FontSize="20"/>
                            <TextBlock Text="Reply"/>
                        </StackPanel>
                    </Button>
                    
                    <Button Click="editBtn_Click" Visibility="Collapsed" Name="editBtn" Background="Transparent" Foreground="Gray" Padding="0" Margin="10,0,0,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE104;" FontSize="20"/>
                            <TextBlock Text="Edit"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </Grid>

        <TextBox Grid.Row="1" Name="reply" TextChanged="reply_TextChanged" BorderThickness="0" Background="LightGray" AcceptsReturn="True" MaxLength="500"
                             Padding="5" Margin="0,0,32,0"
                             PlaceholderText="Enter your reply..."/>
        <Button Grid.Row="1" Name="send" Click="send_Click" IsEnabled="False" HorizontalAlignment="Right" VerticalAlignment="Top"
                            VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                            Width="32" Height="32" Padding="0"
                            Background="Red" Foreground="White"
                            FontFamily="Segoe MDL2 Assets"
                            Content="&#xE122;" />
        <ProgressBar Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsIndeterminate="True" Foreground="Red" Name="sending" Visibility="Collapsed"/>

        <StackPanel Grid.Row="2" Name="repliesPlaceholder">
            <StackPanel Margin="60,0,0,0" Name="replies"/>
            <local:ShowMore Clicked="more_Click"/>
        </StackPanel>
    </Grid>
</UserControl>