AssetBrowserUserControl.xaml

<UserControl
    x:Class="UWP_Visual_Asset_Generator.UserControls.AssetBrowserUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Windows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:UWP_Visual_Asset_Generator.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mucx="using:Microsoft.UI.Xaml.Controls"
    xmlns:muimedia="using:Microsoft.UI.Xaml.Media"
    xmlns:muxc="using:Windows.UI.Xaml.Controls"
    xmlns:tkcon="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:viewModels="using:UWP_Visual_Asset_Generator.ViewModels">

    <Grid Padding="12,40,0,0" Background="{ThemeResource SystemChromeMediumColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <StackPanel HorizontalAlignment="Center">
            <TextBlock
                Margin="8,12,8,0"
                HorizontalAlignment="Center"
                HorizontalTextAlignment="Center"
                Text="{x:Bind mainViewModel.AssetTypes.Current.Title, Mode=OneWay}" />
            <TextBlock
                Margin="8,0,8,4"
                HorizontalAlignment="Center"
                FontStyle="Italic"
                HorizontalTextAlignment="Center"
                Style="{ThemeResource CaptionTextBlockStyle}"
                Text="{x:Bind mainViewModel.AssetTypes.Current.Notes, Mode=OneWay}"
                TextWrapping="Wrap" />
        </StackPanel>

        <muxc:Button
            x:Name="toggleAllButton"
            Margin="0"
            Padding="8"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Click="toggleAllButton_Click"
            Content="Toggle All"
            ToolTipService.ToolTip="Toggles all assets in this category" />

        <GridView
            Grid.Row="1"
            animations:ItemsReorderAnimation.Duration="0:0:0.350"
            ItemsSource="{x:Bind mainViewModel.AssetTypes.Current.Assets.Items, Mode=OneWay}"
            SelectedItem="{x:Bind mainViewModel.AssetTypes.Current.Assets.Current, Mode=TwoWay}"
            SelectionMode="Extended">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="viewModels:AssetViewModel">
                    <Grid
                        Width="350"
                        Height="470"
                        Margin="0"
                        Padding="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" MinHeight="50" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>

                        <StackPanel>
                            <TextBlock
                                Margin="4"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Top"
                                Text="{x:Bind FileName, Mode=OneWay}"
                                TextAlignment="Center"
                                TextWrapping="Wrap" />

                            <TextBlock
                                Margin="0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Bottom">

                                <Run Text="(" />
                                <Run Text="{x:Bind ImageWidth, Mode=OneWay}" />
                                <Run Text="*" />
                                <Run Text="{x:Bind ImageHeight, Mode=OneWay}" />
                                <Run Text=")" />

                            </TextBlock>
                        </StackPanel>

                        <tkcon:ImageEx
                            Grid.Row="1"
                            MaxWidth="{x:Bind Logo.PixelWidth, Mode=OneWay}"
                            MaxHeight="{x:Bind Logo.PixelHeight, Mode=OneWay}"
                            Margin="8"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            BorderBrush="Silver"
                            BorderThickness="1"
                            DecodePixelHeight="{x:Bind Logo.PixelHeight, Mode=OneWay}"
                            DecodePixelWidth="{x:Bind Logo.PixelWidth, Mode=OneWay}"
                            PlaceholderSource="/Images/Logo.png"
                            PlaceholderStretch="Uniform"
                            Source="{x:Bind ReadOnlyLogoForDisplay, Mode=OneWay}"
                            Stretch="Uniform">
                            <tkcon:ImageEx.Background>
                                <SolidColorBrush Color="{x:Bind mainViewModel.PreviewWithAccentColourBrush, Mode=OneWay}" />
                            </tkcon:ImageEx.Background>
                        </tkcon:ImageEx>

                        <CheckBox
                            Margin="12,8"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            IsChecked="{x:Bind SelectedForExport, Mode=TwoWay}"
                            ToolTipService.ToolTip="Include in export" />

                        <TextBlock
                            Grid.Row="0"
                            Margin="8,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="32"
                            Foreground="Green"
                            Text=""
                            ToolTipService.ToolTip="Saved!"
                            Visibility="{x:Bind SavedSuccessfully, Mode=OneWay}" />

                        <StackPanel
                            Grid.Row="2"
                            Margin="4"
                            HorizontalAlignment="Center"
                            Orientation="Horizontal">
                            <mucx:NumberBox
                                x:Name="text_TopMargin"
                                MinWidth="120"
                                Margin="4"
                                Header="Top Padding"
                                SpinButtonPlacementMode="Compact"
                                Value="{x:Bind TopPadding, Mode=TwoWay}" />
                            <mucx:NumberBox
                                x:Name="text_BottomMargin"
                                MinWidth="120"
                                Margin="4"
                                Header="Bottom Padding"
                                SpinButtonPlacementMode="Compact"
                                Value="{x:Bind BottomPadding, Mode=TwoWay}" />

                        </StackPanel>

                        <tkcon:Loading
                            Grid.RowSpan="3"
                            Margin="0"
                            Background="{ThemeResource SystemControlBackgroundAccentBrush}"
                            IsLoading="{x:Bind Thinking, Mode=OneWay}"
                            Opacity="0.8">
                            <StackPanel
                                Padding="12"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">

                                <Image
                                    Height="100"
                                    Margin="8"
                                    VerticalAlignment="Center"
                                    Source="/Images/Logo.png" />

                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource SubtitleTextBlockStyle}"
                                    Text="{x:Bind ThinkingText, Mode=OneWay}"
                                    TextAlignment="Center" />

                            </StackPanel>
                        </tkcon:Loading>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</UserControl>