[PowerRename] Tweak UI and fix performance issues (#14365)

* Init

* Update MainWindow.xaml

* Add identation

* Remove template selector

* Vertical UI

* Update PowerRenameUILib.vcxproj

* Revert "Vertical UI"

This reverts commit d0b3d264fb.

* Revert "Update PowerRenameUILib.vcxproj"

This reverts commit ba18503db2.

* Tweaks to margins

* Updated tweaks

* Update MainWindow.xaml

* Wire counters

* Improve perf: Constant O(1) find-item-by-id time instead of O(n)

Co-authored-by: Laute <Niels.Laute@philips.com>

src/modules/powerrename/PowerRenameUILib/MainWindow.xaml

@@ -1,78 +1,6 @@
 <UserControl x:Class="PowerRenameUILib.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PowerRenameUILib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:Microsoft.UI.Xaml.Controls" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" controls:BackdropMaterial.ApplyToRootOrPageBackground="True" xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals" mc:Ignorable="d">
 
-    <UserControl.Resources>
-
-        <local:ExplorerItemTemplateSelector x:Key="ExplorerItemTemplateSelector" FolderTemplate="{StaticResource FolderTemplate}" FileTemplate="{StaticResource FileTemplate}" />
-        <local:ExplorerItemTemplateSelector x:Key="RenamedExplorerItemTemplateSelector" FolderTemplate="{StaticResource RenamedFolderTemplate}" FileTemplate="{StaticResource RenamedFileTemplate}" />
-
-        <DataTemplate x:Key="FileTemplate" x:DataType="local:ExplorerItem">
-            <Grid Height="24" Margin="0,4,0,0">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="36" />
-                    <ColumnDefinition Width="36" />
-                    <ColumnDefinition Width="300" />
-                    <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
-
-                <CheckBox TabIndex="0" Grid.Column="0" XYFocusKeyboardNavigation="Enabled" Checked="Checked_ids" IsTabStop="True" Unchecked="Checked_ids" Content="" Name="{x:Bind IdStr}" AutomationProperties.Name="{x:Bind Original}" AutomationProperties.HelpText="{x:Bind Renamed}" IsChecked="{x:Bind Checked, Mode=TwoWay}" />
-                <Image Width="16" Source="ms-appx:///Assets/file.png" HorizontalAlignment="Left" Grid.Column="1" />
-
-                <TextBlock Text="{x:Bind Original, Mode=OneWay}" Foreground="{ThemeResource TextFillColorSecondaryBrush}" VerticalAlignment="Center" FontSize="12" Grid.Column="2" />
-            </Grid>
-        </DataTemplate>
-
-        <DataTemplate x:Key="FolderTemplate" x:DataType="local:ExplorerItem">
-            <Grid Margin="0,4,0,0">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="36" />
-                    <ColumnDefinition Width="36" />
-                    <ColumnDefinition Width="300" />
-                    <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="24" />
-                    <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-
-                <CheckBox TabIndex="0" IsTabStop="True" XYFocusKeyboardNavigation="Enabled" Grid.Row="0" Grid.Column="0" Checked="Checked_ids" Unchecked="Checked_ids" Content="" Name="{x:Bind IdStr}" AutomationProperties.Name="{x:Bind Original}" AutomationProperties.HelpText="{x:Bind Renamed}" IsChecked="{x:Bind Checked, Mode=TwoWay}" />
-                <Image Width="16" Source="ms-appx:///Assets/folder.png" HorizontalAlignment="Left" Grid.Column="1" />
-
-                <TextBlock Text="{x:Bind Original, Mode=OneWay}" Foreground="{ThemeResource TextFillColorSecondaryBrush}" VerticalAlignment="Center" FontSize="12" Grid.Column="2" />
-
-                <ListView Grid.ColumnSpan="3" IsTabStop="false" XYFocusKeyboardNavigation="Enabled" SelectionMode="None" IsItemClickEnabled="False" ItemsSource="{x:Bind Children}" Grid.Row="1" ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}">
-                    <ListView.ItemContainerStyle>
-                        <Style TargetType="ListViewItem">
-                            <Setter Property="IsTabStop" Value="False" />
-                        </Style>
-                    </ListView.ItemContainerStyle>
-                </ListView>
-            </Grid>
-        </DataTemplate>
-
-        <DataTemplate x:Key="RenamedFileTemplate" x:DataType="local:ExplorerItem">
-            <Grid Height="24" Margin="0,4,0,0">
-                <TextBlock Text="{x:Bind Renamed, Mode=OneWay}" FontWeight="SemiBold" VerticalAlignment="Center" FontSize="14" />
-            </Grid>
-        </DataTemplate>
-        <DataTemplate x:Key="RenamedFolderTemplate" x:DataType="local:ExplorerItem">
-            <Grid Margin="0,4,0,0">
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="24" />
-                    <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-                <TextBlock Text="{x:Bind Renamed, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center" FontSize="14" />
-                <ListView IsTabStop="false" Margin="-12,0,0,0" SelectionMode="None" IsItemClickEnabled="False" ItemsSource="{x:Bind Children}" Grid.Row="1" ItemTemplateSelector="{StaticResource RenamedExplorerItemTemplateSelector}">
-                    <ListView.ItemContainerStyle>
-                        <Style TargetType="ListViewItem">
-                            <Setter Property="IsTabStop" Value="False" />
-                        </Style>
-                    </ListView.ItemContainerStyle>
-                </ListView>
-            </Grid>
-        </DataTemplate>
-    </UserControl.Resources>
-
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="20">
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="12">
         <Grid.RowDefinitions>
             <RowDefinition Height="0" /> <!-- 48 if we need to draw the title bar ourself -->
             <RowDefinition Height="*" />
@@ -82,27 +10,45 @@
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
 
-        <Grid Grid.Row="1" Grid.Column="1" Background="{ThemeResource LayerFillColorDefaultBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" CornerRadius="8" BorderThickness="1" BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
+        <Grid Grid.Row="1"
+              Grid.Column="1"
+              Background="{ThemeResource LayerFillColorDefaultBrush}"
+              VerticalAlignment="Stretch"
+              HorizontalAlignment="Stretch"
+              CornerRadius="8"
+              BorderThickness="1"
+              BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
             <Grid.RowDefinitions>
-                <RowDefinition Height="48" />
+                <RowDefinition Height="40" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="36" />
-                <ColumnDefinition Width="48" />
-                <ColumnDefinition Width="Auto" MinWidth="324" />
                 <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="48" />
+                <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <CheckBox x:Name="checkBox_selectAll" IsChecked="True" Content="" x:Uid="SelectAllCheckBox" Margin="16,0,0,0" Checked="SelectAll" Unchecked="SelectAll" />
-            <Image Width="16" Grid.Column="1" Source="ms-appx:///Assets/file.png" HorizontalAlignment="Center" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox x:Name="checkBox_selectAll" IsChecked="True" MinWidth="0" Content="" x:Uid="SelectAllCheckBox" Margin="10,0,0,0" Checked="SelectAll" Unchecked="SelectAll" />
+                <Image Width="16" Margin="4,0,0,0" Source="ms-appx:///Assets/file.png" HorizontalAlignment="Left" />
 
-            <TextBlock x:Uid="TxtBlock_Original" Grid.Column="2" FontWeight="Medium" Margin="2,-2,0,0" VerticalAlignment="Center" />
-            <AppBarSeparator Grid.Column="3" Margin="-6,4,0,4" HorizontalAlignment="Left" />
-            <TextBlock x:Uid="TxtBlock_Renamed" FontWeight="Medium" Grid.Column="3" Margin="4,-2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" />
-            <Button Content="&#xE16E;" Background="Transparent" FontFamily="{ThemeResource SymbolThemeFontFamily}" Height="32" x:Uid="FilterButton" Grid.Column="4" BorderThickness="0" HorizontalAlignment="Right" Margin="0,0,8,0">
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Grid.Column="2" Margin="6,-2,0,0" >
+                    <TextBlock x:Uid="TxtBlock_Original" FontWeight="Medium" />
+                    <TextBlock FontWeight="Medium" Margin="4,0,0,0" >
+                        <Run Text="(" /><Run Text="{x:Bind UIUpdatesItem.OriginalCount, Mode=OneWay}" /><Run Text=")" />
+                    </TextBlock>
+                </StackPanel>
+            </StackPanel>
+            <AppBarSeparator Margin="-6,4,0,4" HorizontalAlignment="Right" />
+            
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Grid.Column="2" Margin="4,-2,0,0" >
+                <TextBlock x:Uid="TxtBlock_Renamed" FontWeight="Medium" />
+                <TextBlock FontWeight="Medium" Margin="4,0,0,0" >
+                        <Run Text="(" /><Run Text="{x:Bind UIUpdatesItem.RenamedCount, Mode=OneWay}" /><Run Text=")" />
+                </TextBlock>
+            </StackPanel>
+            
+            <Button Content="&#xE16E;" Background="Transparent" FontFamily="{ThemeResource SymbolThemeFontFamily}" Height="32" x:Uid="FilterButton" Grid.Column="1" BorderThickness="0" HorizontalAlignment="Right" Margin="0,0,8,0">
                 <Button.Flyout>
                     <MenuBarItemFlyout Placement="Bottom">
                         <controls:RadioMenuFlyoutItem x:Name="button_showAll" Click="ShowAll" x:Uid="ShowAll" IsChecked="True" GroupName="Filter" />
@@ -112,45 +58,78 @@
             </Button>
 
             <Rectangle Height="1" Grid.ColumnSpan="5" Fill="{ThemeResource CardStrokeColorDefaultBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
-            <ScrollViewer Grid.ColumnSpan="6" HorizontalScrollMode="Enabled" Grid.Row="1">
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto" MinWidth="286" />
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
-                    <ListView IsTabStop="false" SelectionMode="None" XYFocusKeyboardNavigation="Enabled" IsItemClickEnabled="False" ItemsSource="{x:Bind ExplorerItems, Mode=OneWay}" Margin="4,0,0,0" ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}">
-                        <ListView.ItemContainerStyle>
-                            <Style TargetType="ListViewItem">
-                                <Setter Property="IsTabStop" Value="False" />
-                            </Style>
-                        </ListView.ItemContainerStyle>
-                    </ListView>
-                    <!--<controls:ItemsRepeater ItemsSource="{x:Bind ExplorerItems, Mode=OneWay}"
-                                            Margin="16,0,0,0"
-                                            ItemTemplate="{StaticResource ExplorerItemTemplateSelector}" />-->
-                    <ListView Grid.Column="1" IsTabStop="false" SelectionMode="None" IsItemClickEnabled="False" ItemsSource="{x:Bind ExplorerItems, Mode=OneWay}" ItemTemplateSelector="{StaticResource RenamedExplorerItemTemplateSelector}">
-                        <ListView.ItemContainerStyle>
-                            <Style TargetType="ListViewItem">
-                                <Setter Property="IsTabStop" Value="False" />
-                            </Style>
-                        </ListView.ItemContainerStyle>
-                    </ListView>
-                    <!--<controls:ItemsRepeater ItemsSource="{x:Bind ExplorerItems, Mode=OneWay}"
-                                            Grid.Column="1"
-                                            ItemTemplate="{StaticResource RenamedExplorerItemTemplateSelector}" />-->
-                </Grid>
-            </ScrollViewer>
+            <ListView IsTabStop="false"
+                        SelectionMode="None"
+                        XYFocusKeyboardNavigation="Enabled"
+                        IsItemClickEnabled="False"
+                        Grid.ColumnSpan="6" 
+                        ItemsSource="{x:Bind ExplorerItems, Mode=OneWay}"
+                        Margin="0,0,0,0"
+                        Grid.Row="1">
+                <ListView.ItemContainerStyle>
+                    <Style TargetType="ListViewItem">
+                        <Setter Property="IsTabStop" Value="False" />
+                        <Setter Property="Padding" Value="0"/>
+                        <Setter Property="Margin" Value="0"/>
+                        <Setter Property="MinHeight" Value="0"/>
+                        <Setter Property="HorizontalContentAlignment"  Value="Stretch"/>
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="ListViewItem">
+                                    <StackPanel Orientation="Vertical">
+                                        <ContentPresenter />
+                                        <Rectangle Height="1" Margin="0,4,0,0" Opacity="0.8" Grid.ColumnSpan="5" Fill="{ThemeResource CardStrokeColorDefaultBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
+
+                                    </StackPanel>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                </ListView.ItemContainerStyle>
+                <ListView.ItemTemplate>
+                    <DataTemplate x:Name="ExplorerItemTemplate" x:DataType="local:ExplorerItem">
+                        <Grid Height="20" Margin="10,4,0,0">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+
+                            <StackPanel Orientation="Horizontal" Grid.Column="0">
+                                <StackPanel MinWidth="{x:Bind Indentation}"/>
+                                <CheckBox TabIndex="0"
+                             MinWidth="0"
+                              XYFocusKeyboardNavigation="Enabled"
+                              Checked="Checked_ids"
+                              IsTabStop="True"
+                              Unchecked="Checked_ids"
+                              Content=""
+                              Name="{x:Bind IdStr}"
+                              AutomationProperties.Name="{x:Bind Original}"
+                              AutomationProperties.HelpText="{x:Bind Renamed}"
+                              IsChecked="{x:Bind Checked, Mode=TwoWay}" />
+                                <Image Width="16" Margin="4,0,0,0" Source="{x:Bind ImagePath}" HorizontalAlignment="Left" />
+                                <TextBlock Margin="6,0,0,0"
+                               Text="{x:Bind Original, Mode=OneWay}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               VerticalAlignment="Center"
+                               FontSize="12" />
+                            </StackPanel>
+                            <TextBlock Text="{x:Bind Renamed, Mode=OneWay}" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="12" />
+                        </Grid>
+                    </DataTemplate>
+                </ListView.ItemTemplate>
+            </ListView>
         </Grid>
 
-        <Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
+        <Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
                 <RowDefinition Height="48" />
             </Grid.RowDefinitions>
             <ScrollViewer>
-                <StackPanel Orientation="Vertical" Padding="0,0,0,16" Margin="0,0,20,0">
+                <StackPanel Orientation="Vertical" Padding="0,0,0,16" Margin="0,0,12,0">
                     <Grid>
-                        <AutoSuggestBox x:Name="textBox_search" x:Uid="SearchBox" Height="48" VerticalContentAlignment="Center" ItemsSource="{x:Bind SearchMRU}" />
+                        <AutoSuggestBox x:Name="textBox_search" x:Uid="SearchBox" Height="40" VerticalContentAlignment="Center" ItemsSource="{x:Bind SearchMRU}" />
 
                         <Button FontFamily="{ThemeResource SymbolThemeFontFamily}" VerticalAlignment="Center" Visibility="{Binding ElementName=checkBox_regex, Path=IsChecked}" MinHeight="32" Margin="4" x:Uid="RegExButton" Background="Transparent" BorderBrush="Transparent" Content="&#xE946;" HorizontalAlignment="Right">
                             <Button.Flyout>
@@ -189,13 +168,13 @@
                     </Grid>
 
 
-                    <CheckBox x:Name="checkBox_regex" x:Uid="CheckBox_RegEx" Margin="2,12,0,0" />
-                    <CheckBox x:Name="checkBox_matchAll" x:Uid="CheckBox_MatchAll" Margin="2,4,0,0" />
-                    <CheckBox x:Name="checkBox_case" x:Uid="CheckBox_Case" Margin="2,4,0,0" />
+                    <CheckBox x:Name="checkBox_regex" x:Uid="CheckBox_RegEx" Margin="2,6,0,0" />
+                    <CheckBox x:Name="checkBox_matchAll" x:Uid="CheckBox_MatchAll" Margin="2,0,0,0" />
+                    <CheckBox x:Name="checkBox_case" x:Uid="CheckBox_Case" Margin="2,0,0,0" />
 
                     <Rectangle Height="1" Fill="{ThemeResource CardStrokeColorDefaultBrush}" HorizontalAlignment="Stretch" Margin="0,16,0,20" />
                     <Grid>
-                        <AutoSuggestBox x:Name="textBox_replace" Margin="0,0,0,0" x:Uid="ReplaceBox" Height="48" VerticalContentAlignment="Center" Padding="12,12,0,0" ItemsSource="{x:Bind ReplaceMRU}" />
+                        <AutoSuggestBox x:Name="textBox_replace" Margin="0,0,0,0" x:Uid="ReplaceBox" Height="40" VerticalContentAlignment="Center" Padding="12,12,0,0" ItemsSource="{x:Bind ReplaceMRU}" />
 
                         <Button FontFamily="{ThemeResource SymbolThemeFontFamily}" VerticalAlignment="Center" MinHeight="32" Margin="4" x:Uid="FileCreationButton" Background="Transparent" BorderBrush="Transparent" Content="&#xE946;" HorizontalAlignment="Right">
                             <Button.Flyout>
@@ -230,7 +209,7 @@
                         </Button>
                     </Grid>
 
-                    <TextBlock x:Uid="TextBox_ApplyTo" x:Name="ApplyToLabel" FontSize="12" Margin="0,20,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                    <TextBlock x:Uid="TextBox_ApplyTo" x:Name="ApplyToLabel" FontSize="12" Margin="0,12,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
 
                     <StackPanel Orientation="Horizontal" Grid.Column="1" Spacing="4" Grid.Row="1">
                         <ComboBox x:Name="comboBox_renameParts" SelectedIndex="0" Width="200" AutomationProperties.LabeledBy="{Binding ElementName=ApplyToLabel}" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1">
@@ -239,20 +218,20 @@
                             <x:String>Extension only</x:String>
                         </ComboBox>
                         <AppBarSeparator Margin="5,0,5,0" />
-                        <ToggleButton x:Name="toggleButton_includeFiles" Content="&#xE160;" MinHeight="32" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeFiles" Style="{StaticResource CustomToggleButtonStyle}" />
-                        <ToggleButton x:Name="toggleButton_includeFolders" Content="&#xE8B7;" MinHeight="32" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeFolders" Style="{StaticResource CustomToggleButtonStyle}" />
-                        <ToggleButton x:Name="toggleButton_includeSubfolders" Content="&#xE12F;" MinHeight="32" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeSubFolders" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_includeFiles" Content="&#xE160;" MinHeight="0" Height="31" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeFiles" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_includeFolders" Content="&#xE8B7;" MinHeight="0" Height="31" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeFolders" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_includeSubfolders" Content="&#xE12F;" MinHeight="0" Height="31" IsChecked="True" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="ToggleButton_IncludeSubFolders" Style="{StaticResource CustomToggleButtonStyle}" />
                     </StackPanel>
 
 
-                    <TextBlock x:Uid="TextBlock_TextFormatting" FontSize="12" Foreground="{ThemeResource TextFillColorSecondaryBrush}" Margin="0,20,0,8" />
+                    <TextBlock x:Uid="TextBlock_TextFormatting" FontSize="12" Foreground="{ThemeResource TextFillColorSecondaryBrush}" Margin="0,12,0,8" />
 
 
                     <StackPanel Orientation="Horizontal" Spacing="4">
-                        <ToggleButton x:Name="toggleButton_lowerCase" Content="aa" FontWeight="Medium" MinHeight="32" x:Uid="ToggleButton_Lowercase" Style="{StaticResource CustomToggleButtonStyle}" />
-                        <ToggleButton x:Name="toggleButton_upperCase" Content="AA" FontWeight="Medium" MinHeight="32" x:Uid="ToggleButton_Uppercase" Style="{StaticResource CustomToggleButtonStyle}" />
-                        <ToggleButton x:Name="toggleButton_titleCase" Content="Aa" FontWeight="Medium" MinHeight="32" x:Uid="ToggleButton_TitleCase" Style="{StaticResource CustomToggleButtonStyle}" />
-                        <ToggleButton x:Name="toggleButton_capitalize" Content="Aa Aa" FontWeight="Medium" MinHeight="32" x:Uid="ToggleButton_Capitalize" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_lowerCase" Content="aa" FontWeight="Medium" MinHeight="0" Height="31" x:Uid="ToggleButton_Lowercase" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_upperCase" Content="AA" FontWeight="Medium" MinHeight="0" Height="31" x:Uid="ToggleButton_Uppercase" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_titleCase" Content="Aa" FontWeight="Medium" MinHeight="0" Height="31" x:Uid="ToggleButton_TitleCase" Style="{StaticResource CustomToggleButtonStyle}" />
+                        <ToggleButton x:Name="toggleButton_capitalize" Content="Aa Aa" FontWeight="Medium" MinHeight="0" Height="31" x:Uid="ToggleButton_Capitalize" Style="{StaticResource CustomToggleButtonStyle}" />
                         <AppBarSeparator Margin="5,0,5,0" />
 
                         <ToggleButton x:Name="toggleButton_enumItems" Content="&#xEA40;" FontFamily="{ThemeResource SymbolThemeFontFamily}" MinHeight="32" x:Uid="ToggleButton_EnumItems" Style="{StaticResource CustomToggleButtonStyle}" />
@@ -260,29 +239,38 @@
                 </StackPanel>
             </ScrollViewer>
 
-            <Rectangle Height="1" Fill="{ThemeResource CardStrokeColorDefaultBrush}" HorizontalAlignment="Stretch" Margin="0,0,20,0" VerticalAlignment="Top" Grid.Row="1" />
+            <Rectangle Height="1" Fill="{ThemeResource CardStrokeColorDefaultBrush}" HorizontalAlignment="Stretch" Margin="0,0,12,0" VerticalAlignment="Top" Grid.Row="1" />
 
 
-            <StackPanel Orientation="Horizontal" Grid.Row="1" Spacing="8" Margin="0" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Left">
+      
+        </Grid>
 
-                <Button x:Name="button_settings" Height="32" x:Uid="TxtBlock_ButtonSettings" FontFamily="{ThemeResource SymbolThemeFontFamily}" Grid.Row="5" Padding="6" Background="Transparent" BorderBrush="Transparent" Grid.Column="1">
-                    <Button.Content>
-                        <controls:AnimatedIcon x:Name="SearchAnimatedIcon">
-                            <controls:AnimatedIcon.Source>
-                                <animatedVisuals:AnimatedSettingsVisualSource />
-                            </controls:AnimatedIcon.Source>
-                            <controls:AnimatedIcon.FallbackIconSource>
-                                <controls:SymbolIconSource Symbol="Setting" />
-                            </controls:AnimatedIcon.FallbackIconSource>
-                        </controls:AnimatedIcon>
+        <StackPanel Orientation="Horizontal"
+                    Grid.Row="2"
+                    Spacing="8"
+                    Margin="0"
+                    Grid.Column="0"
+                    VerticalAlignment="Bottom"
+                    HorizontalAlignment="Left">
 
-                    </Button.Content>
-                </Button>
+            <Button x:Name="button_settings" Height="32" x:Uid="TxtBlock_ButtonSettings" FontFamily="{ThemeResource SymbolThemeFontFamily}" Grid.Row="5" Padding="6" Background="Transparent" BorderBrush="Transparent" Grid.Column="1">
+                <Button.Content>
+                    <controls:AnimatedIcon x:Name="SearchAnimatedIcon">
+                        <controls:AnimatedIcon.Source>
+                            <animatedVisuals:AnimatedSettingsVisualSource />
+                        </controls:AnimatedIcon.Source>
+                        <controls:AnimatedIcon.FallbackIconSource>
+                            <controls:SymbolIconSource Symbol="Setting" />
+                        </controls:AnimatedIcon.FallbackIconSource>
+                    </controls:AnimatedIcon>
 
-                <Button x:Name="button_docs" Content="&#xE11B;" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="DocsButton" Background="Transparent" BorderBrush="Transparent" Grid.Row="1" Height="32" VerticalAlignment="Bottom" HorizontalAlignment="Left" Click="OpenDocs" />
+                </Button.Content>
+            </Button>
+
+            <Button x:Name="button_docs" Content="&#xE11B;" FontFamily="{ThemeResource SymbolThemeFontFamily}" x:Uid="DocsButton" Background="Transparent" BorderBrush="Transparent" Grid.Row="1" Height="32" VerticalAlignment="Bottom" HorizontalAlignment="Left" Click="OpenDocs" />
 
 
-                <!--<Button Content="&#xE728;"
+            <!--<Button Content="&#xE728;"
                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
                         ToolTipService.ToolTip="Presets"
                         Background="Transparent"
@@ -300,26 +288,27 @@
                     </Button.Flyout>
                 </Button>-->
 
-            </StackPanel>
+        </StackPanel>
 
-            <muxc:SplitButton Grid.Row="1" Style="{StaticResource SplitAccentButtonStyle}" x:Name="button_rename" Margin="0,0,20,0" x:Uid="ButtonApply" Click="button_rename_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsEnabled="{x:Bind UIUpdatesItem.ButtonRenameEnabled, Mode=OneWay}">
-                <muxc:SplitButton.KeyboardAccelerators>
-                    <KeyboardAccelerator Key="Enter" />
-                    <KeyboardAccelerator Key="Enter" Modifiers="Control" />
-                </muxc:SplitButton.KeyboardAccelerators>
-                <muxc:SplitButton.Content>
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon Glyph="&#xE13E;" FontSize="14" VerticalAlignment="Center" Margin="0,2,10,0" />
-                        <TextBlock x:Uid="TxtBlock_ButtonApply" />
-                    </StackPanel>
-                </muxc:SplitButton.Content>
-                <muxc:SplitButton.Flyout>
-                    <MenuFlyout>
-                        <MenuFlyoutItem x:Uid="TxtBlock_ButtonApplyAndClose" Click="MenuFlyoutItem_Click" />
-                    </MenuFlyout>
-                </muxc:SplitButton.Flyout>
-            </muxc:SplitButton>
-        </Grid>
+    
+       
+        <muxc:SplitButton Grid.Row="2" Style="{StaticResource SplitAccentButtonStyle}" Grid.Column="0" Margin="0,0,12,1" x:Name="button_rename" x:Uid="ButtonApply" Click="button_rename_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsEnabled="{x:Bind UIUpdatesItem.ButtonRenameEnabled, Mode=OneWay}">
+            <muxc:SplitButton.KeyboardAccelerators>
+                <KeyboardAccelerator Key="Enter" />
+                <KeyboardAccelerator Key="Enter" Modifiers="Control" />
+            </muxc:SplitButton.KeyboardAccelerators>
+            <muxc:SplitButton.Content>
+                <StackPanel Orientation="Horizontal">
+                    <FontIcon Glyph="&#xE13E;" FontSize="14" VerticalAlignment="Center" Margin="0,2,10,0" />
+                    <TextBlock x:Uid="TxtBlock_ButtonApply" />
+                </StackPanel>
+            </muxc:SplitButton.Content>
+            <muxc:SplitButton.Flyout>
+                <MenuFlyout>
+                    <MenuFlyoutItem x:Uid="TxtBlock_ButtonApplyAndClose" Click="MenuFlyoutItem_Click" />
+                </MenuFlyout>
+            </muxc:SplitButton.Flyout>
+        </muxc:SplitButton>
 
         <!--<StackPanel x:Name="TitleBar" Orientation="Horizontal">
             <Image Source="Assets/PowerRename.png" Width="16" Height="16" VerticalAlignment="Top" Margin="20,9,0,0"/>