GhostEngine/Ghost.Editor/View/Controls/ProjectBrowser.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="Ghost.Editor.View.Controls.ProjectBrowser"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:community="using:CommunityToolkit.WinUI.Controls"
    xmlns:converter="using:Ghost.Editor.Utilities.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ghost="using:Ghost.Editor.Core.Controls"
    xmlns:local="using:Ghost.Editor.View.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:model="using:Ghost.Editor.Models"
    xmlns:sys="using:System"
    mc:Ignorable="d">

    <UserControl.Resources>
        <converter:ExplorerItemToIconUriConverter x:Key="ExplorerItemToIconUriConverter" />
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Toolbar  -->
        <Grid
            Height="36"
            Padding="4"
            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
            BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
            BorderThickness="0,0,0,1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Orientation="Horizontal">
                <Button Style="{StaticResource ToolbarButton}">
                    <Button.Content>
                        <FontIcon FontSize="{StaticResource ToolbarIconSize}" Glyph="&#xE710;" />
                    </Button.Content>
                    <Button.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="Folder" />
                            <MenuFlyoutItem Text="Script" />
                            <MenuFlyoutSubItem Text="Rendering">
                                <MenuFlyoutItem Text="Material" />
                                <MenuFlyoutItem Text="Volume Profile" />
                            </MenuFlyoutSubItem>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
            </StackPanel>
            <StackPanel Grid.Column="2" Orientation="Horizontal">
                <AutoSuggestBox Width="250" QueryIcon="Find" />
                <AppBarSeparator />
                <Button Style="{StaticResource ToolbarButton}">
                    <Button.Content>
                        <FontIcon FontSize="{StaticResource ToolbarIconSize}" Glyph="&#xE97C;" />
                    </Button.Content>
                    <Button.Flyout>
                        <MenuFlyout>
                            <ToggleMenuFlyoutItem Text="Animation" />
                            <ToggleMenuFlyoutItem Text="Audio" />
                            <ToggleMenuFlyoutItem Text="Material" />
                            <ToggleMenuFlyoutItem Text="Script" />
                            <ToggleMenuFlyoutItem Text="Texture" />
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
                <Button Style="{StaticResource ToolbarButton}">
                    <Button.Content>
                        <FontIcon FontSize="{StaticResource ToolbarIconSize}" Glyph="&#xE8EC;" />
                    </Button.Content>
                </Button>
            </StackPanel>
        </Grid>

        <!--  Conent Viewer  -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Border
                Grid.Column="0"
                Width="200"
                Padding="4,0,0,0"
                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                BorderThickness="0,0,1,0">
                <TreeView
                    x:Name="PART_DirectoriesView"
                    ItemsSource="{x:Bind ViewModel.Directories, Mode=OneWay}"
                    SelectionChanged="PART_DirectoriesView_SelectionChanged"
                    SelectionMode="Single">
                    <TreeView.ItemTemplate>
                        <DataTemplate x:DataType="model:ExplorerItem">
                            <TreeViewItem ItemsSource="{x:Bind Children}">
                                <StackPanel Orientation="Horizontal" Spacing="4">
                                    <!--  TODO: Open/Close folder icon based on state  -->
                                    <FontIcon
                                        VerticalAlignment="Center"
                                        FontSize="12"
                                        Glyph="&#xE8B7;" />
                                    <TextBlock
                                        VerticalAlignment="Center"
                                        Style="{StaticResource CaptionTextBlockStyle}"
                                        Text="{x:Bind Name}"
                                        TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </TreeViewItem>
                        </DataTemplate>
                    </TreeView.ItemTemplate>
                </TreeView>
            </Border>

            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <!--<RowDefinition Height="Auto" />-->
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!--<Border
                    Grid.Row="0"
                    Height="24"
                    Background="{ThemeResource LayerFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                    BorderThickness="0,0,0,1">
                    <BreadcrumbBar />
                </Border>-->

                <ItemsView
                    x:Name="PART_FilesView"
                    Grid.Row="0"
                    Padding="8"
                    DoubleTapped="PART_FilesView_DoubleTapped"
                    IsDoubleTapEnabled="True"
                    ItemsSource="{x:Bind ViewModel.Files, Mode=OneWay}"
                    SelectionChanged="PART_FilesView_SelectionChanged"
                    SelectionMode="Single">
                    <ItemsView.ItemTemplate>
                        <DataTemplate x:DataType="model:ExplorerItem">
                            <ItemContainer>
                                <Grid
                                    Padding="8"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    RowSpacing="4"
                                    ToolTipService.ToolTip="{x:Bind Name}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>

                                    <Grid.ContextFlyout>
                                        <MenuFlyout>
                                            <MenuFlyoutItem Text="Open" />
                                            <MenuFlyoutItem Text="Rename" />
                                            <MenuFlyoutItem Text="Delete" />
                                            <MenuFlyoutItem Text="Show in Explorer" />
                                        </MenuFlyout>
                                    </Grid.ContextFlyout>

                                    <community:ConstrainedBox Grid.Row="0" AspectRatio="1:1">
                                        <Image HorizontalAlignment="Center">
                                            <Image.Source>
                                                <BitmapImage DecodePixelWidth="48" UriSource="{x:Bind Converter={StaticResource ExplorerItemToIconUriConverter}}" />
                                            </Image.Source>
                                        </Image>
                                    </community:ConstrainedBox>
                                    <TextBlock
                                        Grid.Row="1"
                                        HorizontalAlignment="Center"
                                        Style="{StaticResource CaptionTextBlockStyle}"
                                        Text="{x:Bind Name}"
                                        TextTrimming="CharacterEllipsis"
                                        TextWrapping="NoWrap" />
                                </Grid>
                            </ItemContainer>
                        </DataTemplate>
                    </ItemsView.ItemTemplate>
                    <ItemsView.Layout>
                        <UniformGridLayout
                            ItemsStretch="Fill"
                            MinColumnSpacing="4"
                            MinItemWidth="72"
                            MinRowSpacing="4" />
                    </ItemsView.Layout>
                    <ItemsView.ContextFlyout>
                        <ghost:ContextFlyout Tag="project-browser" />
                    </ItemsView.ContextFlyout>
                </ItemsView>

                <Border
                    Grid.Row="1"
                    Height="24"
                    Padding="8,2"
                    Background="{ThemeResource LayerFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                    BorderThickness="0,1,0,0">
                    <StackPanel>
                        <TextBlock Text="{x:Bind sys:String.Format('{0} items', ViewModel.Files.Count), Mode=OneWay}" />
                    </StackPanel>
                </Border>
            </Grid>
        </Grid>
    </Grid>
</UserControl>