From 1b6b446915a3dbe7e3240ab1ba2afa48ceca58cd Mon Sep 17 00:00:00 2001
From: Kazeem Quadri <quadrikazeem01@gmail.com>
Date: Mon, 5 Jan 2026 01:30:02 +0000
Subject: [PATCH] Add Drag and Drop For Environment Variables (#40105)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request
This PR introduces drag-and-drop functionality for environment
variables, allowing users to easily update the order of variables based
on their preferences. Users can now rearrange variables directly in the
UI by dragging and dropping, making it more intuitive and efficient to
customise the order without manual editing.

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [X] **Closes:** #33554 33554
- [X] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments
Updated `EnvironmentVariablesMainPage.xaml` to use a `ListView` instead
of an `ItemsControl`, enabling item dragging and reordering. The new
`ListView` features a grid layout with a `FontIcon`, `TextBox`, and
`Button`, while maintaining visibility control through data binding.

Added `EditVariableValuesList_DragItemsCompleted` method in
`EnvironmentVariablesMainPage.xaml.cs` to update the text box with the
new order of items after drag-and-drop operations, ensuring consistency
with the underlying data model.
<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
- Manually tested the affected functionality.
- Change was minimal and did not impact existing automated tests.
- Verified that the new/modified feature works as expected and did not
cause regressions in related areas.

---------

Co-authored-by: Leilei Zhang <leilzh@microsoft.com>
---
 .../EnvironmentVariablesMainPage.xaml         | 22 ++++++++++++----
 .../EnvironmentVariablesMainPage.xaml.cs      | 25 ++++++++++++++-----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml b/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml
index f2628cf375..baa2447cd1 100644
--- a/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml
+++ b/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml
@@ -466,27 +466,39 @@
                         TextChanged="EditVariableDialogValueTxtBox_TextChanged"
                         TextWrapping="Wrap" />
                     <MenuFlyoutSeparator Visibility="{Binding ShowAsList, Converter={StaticResource BoolToVisibilityConverter}}" />
-                    <ItemsControl
+                    <ListView
                         x:Name="EditVariableValuesList"
                         Margin="0,-8,0,12"
                         HorizontalAlignment="Stretch"
+                        AllowDrop="True"
+                        CanDragItems="True"
+                        CanReorderItems="True"
+                        DragItemsCompleted="EditVariableValuesList_DragItemsCompleted"
                         ItemsSource="{Binding ValuesList, Mode=TwoWay}"
                         Visibility="{Binding ShowAsList, Converter={StaticResource BoolToVisibilityConverter}}">
-                        <ItemsControl.ItemTemplate>
+                        <ListView.ItemTemplate>
                             <DataTemplate>
                                 <Grid>
                                     <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="32" />
                                         <ColumnDefinition Width="*" />
                                         <ColumnDefinition Width="40" />
                                     </Grid.ColumnDefinitions>
+                                    <FontIcon
+                                        Grid.Column="0"
+                                        Margin="0,0,8,0"
+                                        FontSize="16"
+                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                        Glyph="&#xE759;" />
                                     <TextBox
+                                        Grid.Column="1"
                                         Background="Transparent"
                                         BorderBrush="Transparent"
                                         LostFocus="EditVariableValuesListTextBox_LostFocus"
                                         Text="{Binding Text}" />
                                     <Button
                                         x:Uid="More_Options_Button"
-                                        Grid.Column="1"
+                                        Grid.Column="2"
                                         VerticalAlignment="Center"
                                         Content="&#xE712;"
                                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
@@ -523,8 +535,8 @@
                                     </Button>
                                 </Grid>
                             </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
+                        </ListView.ItemTemplate>
+                    </ListView>
                 </StackPanel>
             </ScrollViewer>
         </ContentDialog>
diff --git a/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml.cs b/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml.cs
index a70eeeec36..339c13ce6f 100644
--- a/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml.cs
+++ b/src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml.cs
@@ -16,6 +16,8 @@ namespace EnvironmentVariablesUILib
 {
     public sealed partial class EnvironmentVariablesMainPage : Page
     {
+        private const string ValueListSeparator = ";";
+
         private sealed class RelayCommandParameter
         {
             public RelayCommandParameter(Variable variable, VariablesSet set)
@@ -440,7 +442,7 @@ namespace EnvironmentVariablesUILib
                 variable.ValuesList.Move(index, index - 1);
             }
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.Text = newValues;
         }
 
@@ -461,7 +463,7 @@ namespace EnvironmentVariablesUILib
                 variable.ValuesList.Move(index, index + 1);
             }
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.Text = newValues;
         }
 
@@ -476,7 +478,7 @@ namespace EnvironmentVariablesUILib
             var variable = EditVariableDialog.DataContext as Variable;
             variable.ValuesList.Remove(listItem);
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.Text = newValues;
         }
 
@@ -492,7 +494,7 @@ namespace EnvironmentVariablesUILib
             var index = variable.ValuesList.IndexOf(listItem);
             variable.ValuesList.Insert(index, new Variable.ValuesListItem { Text = string.Empty });
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.TextChanged -= EditVariableDialogValueTxtBox_TextChanged;
             EditVariableDialogValueTxtBox.Text = newValues;
             EditVariableDialogValueTxtBox.TextChanged += EditVariableDialogValueTxtBox_TextChanged;
@@ -510,7 +512,7 @@ namespace EnvironmentVariablesUILib
             var index = variable.ValuesList.IndexOf(listItem);
             variable.ValuesList.Insert(index + 1, new Variable.ValuesListItem { Text = string.Empty });
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.TextChanged -= EditVariableDialogValueTxtBox_TextChanged;
             EditVariableDialogValueTxtBox.Text = newValues;
             EditVariableDialogValueTxtBox.TextChanged += EditVariableDialogValueTxtBox_TextChanged;
@@ -532,7 +534,7 @@ namespace EnvironmentVariablesUILib
             listItem.Text = (sender as TextBox)?.Text;
             var variable = EditVariableDialog.DataContext as Variable;
 
-            var newValues = string.Join(";", variable.ValuesList?.Select(x => x.Text).ToArray());
+            var newValues = string.Join(ValueListSeparator, variable.ValuesList?.Select(x => x.Text).ToArray());
             EditVariableDialogValueTxtBox.TextChanged -= EditVariableDialogValueTxtBox_TextChanged;
             EditVariableDialogValueTxtBox.Text = newValues;
             EditVariableDialogValueTxtBox.TextChanged += EditVariableDialogValueTxtBox_TextChanged;
@@ -548,5 +550,16 @@ namespace EnvironmentVariablesUILib
             CancelAddVariable();
             ConfirmAddVariableBtn.IsEnabled = false;
         }
+
+        private void EditVariableValuesList_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)
+        {
+            if (EditVariableDialog.DataContext is Variable variable && variable.ValuesList != null)
+            {
+                var newValues = string.Join(ValueListSeparator, variable.ValuesList.Select(x => x.Text));
+                EditVariableDialogValueTxtBox.TextChanged -= EditVariableDialogValueTxtBox_TextChanged;
+                EditVariableDialogValueTxtBox.Text = newValues;
+                EditVariableDialogValueTxtBox.TextChanged += EditVariableDialogValueTxtBox_TextChanged;
+            }
+        }
     }
 }