FoxTube/FoxTube/Pages/SettingsPages/Inbox.xaml

<Page
    x:Class="FoxTube.Pages.SettingsPages.Inbox"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Name="grid">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1500"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="grid.ColumnDefinitions[0].Width" Value="*"/>
                        <Setter Target="grid.ColumnDefinitions[1].Width" Value="3*"/>
                        <Setter Target="close.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
                
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1000"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="grid.ColumnDefinitions[0].Width" Value="*"/>
                        <Setter Target="grid.ColumnDefinitions[1].Width" Value="2*"/>
                        <Setter Target="close.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="grid.ColumnDefinitions[0].Width" Value="*"/>
                        <Setter Target="grid.ColumnDefinitions[1].Width" Value="*"/>
                        <Setter Target="close.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="0"/>
        </Grid.ColumnDefinitions>
        
        <StackPanel VerticalAlignment="Stretch" Background="{StaticResource SystemControlBackgroundChromeMediumLowBrush}">
            <ComboBox x:Uid="/Inbox/filter" Header="Filter" Margin="10" HorizontalAlignment="Stretch" SelectedIndex="0" Name="filter" SelectionChanged="filter_SelectionChanged">
                <ComboBoxItem x:Uid="/Inbox/all" Content="All"/>
                <ComboBoxItem x:Uid="/Inbox/messages" Content="Messages"/>
                <ComboBoxItem x:Uid="/Inbox/changelogs" Content="Patch notes"/>
            </ComboBox>
            <ListView Name="list" SelectionChanged="list_SelectionChanged" Background="Transparent">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Padding" Value="10"/>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0, 10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="2*"/>
                            </Grid.ColumnDefinitions>
                            <Grid Margin="0,0,10,0">
                                <Ellipse Fill="Red" Height="40" Width="40"/>
                                <TextBlock Foreground="White" FontFamily="Segoe MDL2 Assets" Text="{Binding Path=Icon}" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Light" FontSize="17"/>
                            </Grid>
                            <StackPanel Grid.Column="1">
                                <TextBlock FontWeight="Bold" Text="{Binding Path=Title}" MaxLines="1" TextWrapping="Wrap"/>
                                <TextBlock FontSize="14" Opacity=".5" Text="{Binding Path=Subtitle}"/>
                                <TextBlock Opacity=".5" FontSize="13" Text="{Binding Path=TimeStampString}" TextWrapping="WrapWholeWords"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>

        <ScrollViewer Grid.Column="1">
            <StackPanel Margin="10">
                <TextBlock FontWeight="Bold" Text="Hello, World!" FontSize="26" Name="title"/>
                <controls:MarkdownTextBlock IsTextSelectionEnabled="True" Text="Content" Name="content" Background="Transparent"/>
            </StackPanel>
        </ScrollViewer>
        <Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE106;" Width="50" Height="50" Name="close" Click="close_Click"/>
        <Grid Grid.Column="1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Name="block">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE7EA;" FontSize="50" Foreground="Gray" Margin="10"/>
                <TextBlock x:Uid="/Inbox/select" Text="Select item from list" FontSize="24" VerticalAlignment="Center" TextWrapping="WrapWholeWords" Foreground="Gray"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>