UWP-Visual-Asset-Generator/UserControls/SidebarUserControl.xaml

<UserControl
    x:Class="UWP_Visual_Asset_Generator.UserControls.SidebarUserControl"
    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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:generic="using:System.Collections.Generic"
    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:tkcon="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:viewmodels="using:UWP_Visual_Asset_Generator.ViewModels"
    xmlns:wui="using:Windows.UI.Xaml.Controls"
    d:DesignHeight="800"
    d:DesignWidth="300"
    mc:Ignorable="d">

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

        <!--  Logo  -->
        <StackPanel
            HorizontalAlignment="Stretch"
            BorderBrush="{ThemeResource SystemControlBackgroundBaseLowBrush}"
            BorderThickness="0,0,0,1">

            <TextBlock
                x:Uid="VisualAssetGenerator"
                Margin="0,12,0,0"
                HorizontalAlignment="Center"
                FontSize="18"
                Text="Visual Asset Generator"
                TextWrapping="Wrap" />

            <!--  Original (Main) Asset  -->
            <tkcon:DropShadowPanel
                MinWidth="48"
                MinHeight="48"
                MaxWidth="240"
                MaxHeight="240"
                Margin="24"
                HorizontalAlignment="Center"
                HorizontalContentAlignment="Stretch"
                BlurRadius="10"
                Canvas.ZIndex="10"
                ShadowOpacity="0.3"
                Color="{ThemeResource SystemAccentColorDark1}">
                <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" CornerRadius="2">
                    <!--  #TODO UI Message (Add image)  -->
                    <StackPanel
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Orientation="Vertical"
                        Visibility="Collapsed">
                        <TextBlock
                            Margin="0,0,0,12"
                            HorizontalAlignment="Center"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="72"
                            FontWeight="SemiBold"
                            Text="&#xE109;" />
                        <TextBlock x:Uid="AddImage" Text="Add image" />
                    </StackPanel>

                    <!--  Main asset  -->
                    <tkcon:ImageEx
                        x:Name="image_Original"
                        x:Uid="DropPNG"
                        extensions:FrameworkElementExtensions.Cursor="Hand"
                        AllowDrop="True"
                        Canvas.ZIndex="60"
                        CornerRadius="8"
                        DecodePixelHeight="240"
                        DecodePixelWidth="240"
                        DragOver="Image_Original_DragOver"
                        Drop="Image_Original_Drop"
                        PlaceholderSource="/Images/Logo.png"
                        PlaceholderStretch="Uniform"
                        Source="{x:Bind mainViewModel.OriginalLogoImageSource, Mode=OneWay}"
                        Stretch="Uniform"
                        Tapped="Image_Original_Tapped"
                        ToolTipService.ToolTip="Drop a PNG image here, or click to browse" />

                    <mucx:TeachingTip
                        Title="Getting started"
                        IsOpen="{x:Bind mainViewModel.IsFirstRun, Mode=OneTime}"
                        Subtitle="Drop a PNG image here, or click to browse"
                        Target="{x:Bind image_Original}">
                        <mucx:TeachingTip.IconSource>
                            <mucx:SymbolIconSource Symbol="Refresh" />
                        </mucx:TeachingTip.IconSource>

                    </mucx:TeachingTip>
                </Grid>
            </tkcon:DropShadowPanel>
        </StackPanel>
        <!--  End of logo  -->

        <!--  Asset Style List  -->
        <ListView
            Grid.Row="1"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            IsMultiSelectCheckBoxEnabled="false"
            ItemsSource="{x:Bind mainViewModel.AssetTypes.Items, Mode=OneWay}"
            SelectedItem="{x:Bind mainViewModel.AssetTypes.Current, Mode=TwoWay}"
            SelectionMode="Single">

            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>

            <ListView.ItemTemplate>
                <DataTemplate x:DataType="viewmodels:AssetTypeViewModel">
                    <Grid BorderBrush="Gray">
                        <TextBlock Text="{x:Bind Title, Mode=OneWay}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <!--  End of Asset Style list  -->

        <wui:Button
            x:Name="btnSetBackgroundColour"
            Grid.Row="3"
            Margin="0,8"
            HorizontalAlignment="Stretch"
            Click="btnSetBackgroundColour_Click"
            Content="Set background color" />

        <mucx:Expander
            Grid.Row="2"
            Margin="0,4"
            Padding="0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Stretch"
            ExpandDirection="Up">

            <mucx:Expander.Header>
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <TextBlock Text="Advanced" />
                </Grid>
            </mucx:Expander.Header>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <ComboBox
                    Grid.Row="0"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    Header="Resampling Mode"
                    ItemsSource="{x:Bind mainViewModel.Resamplers, Mode=OneTime}"
                    SelectedItem="{x:Bind mainViewModel.SelectedResampler, Mode=TwoWay}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

                <ComboBox
                    Grid.Row="1"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    Header="Pixel Colour Blending Mode"
                    ItemsSource="{x:Bind mainViewModel.BlendingModes, Mode=OneTime}"
                    SelectedItem="{x:Bind mainViewModel.SelectedBlendingMode, Mode=TwoWay}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

                <ComboBox
                    Grid.Row="2"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    Header="Pixel Alpha Blending Mode"
                    ItemsSource="{x:Bind mainViewModel.AlphaModes, Mode=OneTime}"
                    SelectedItem="{x:Bind mainViewModel.SelectedAlphaMode, Mode=TwoWay}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

                <ComboBox
                    Grid.Row="3"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    Header="PNG Compression"
                    ItemsSource="{x:Bind mainViewModel.PNGCompressionOptions, Mode=OneTime}"
                    SelectedItem="{x:Bind mainViewModel.SelectedPNGCompression, Mode=TwoWay}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

            </Grid>
        </mucx:Expander>

        <!--  Theme Setting  -->
        <Grid Grid.Row="4">
            <ComboBox
                x:Name="themeSelect"
                Grid.Row="1"
                Margin="0,8"
                HorizontalAlignment="Stretch"
                Header="App Theme"
                SelectedIndex="0"
                SelectionChanged="ComboBox_SelectionChanged">
                <ComboBoxItem Content="System Default" />
                <ComboBoxItem Content="Light" />
                <ComboBoxItem Content="Dark" />
            </ComboBox>
        </Grid>
        <!--  End of Theme Setting  -->

        <!--  Output Picker  -->
        <Grid Grid.Row="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>

            <TextBlock Padding="0,4,0,4" Text="Output path" />

            <TextBox
                x:Uid="OutputFolder"
                Grid.Row="1"
                Grid.ColumnSpan="2"
                Height="34"
                Windows10version1809:CornerRadius="4,0,0,4"
                BorderThickness="1,1,1,1"
                IsEnabled="False"
                PlaceholderText="Output Folder"
                Text="{x:Bind mainViewModel.OutputFolder.Path, Mode=OneWay}" />
            <Button
                x:Uid="SetOutputFolder"
                Grid.Row="1"
                Grid.Column="2"
                Height="34"
                HorizontalAlignment="Right"
                Windows10version1809:CornerRadius="0,2,2,0"
                Background="{ThemeResource SystemAccentColor}"
                BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                BorderThickness="1,1,1,1"
                Click="Btn_OutputFolder_Click"
                Content=""
                FontFamily="Segoe MDL2 Assets" />
        </Grid>
        <!--  End of Output Picker  -->

    </Grid>
</UserControl>