Add Drag and Drop For Environment Variables

[Darkace01]

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.

PR Checklist

• Closes: Environment Variables - allow changing order of paths by dragging #33554 33554
• 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 for new binaries
  • WXS for installer for new binaries and localization folder
  • YML for CI pipeline for new test projects
  • YML for signed pipeline
• Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

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.

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.

[Darkace01]

@microsoft-github-policy-service agree

[Copilot]

Pull Request Overview

Adds drag-and-drop reordering to the environment variable values list and synchronizes the reordered values back into the edit dialog’s text box.

• Swaps the ItemsControl for a ListView with CanDragItems/CanReorderItems enabled.
• Introduces EditVariableValuesList_DragItemsCompleted to rebuild the semicolon-delimited value string.
• Updates the item template to include a drag handle icon and repositioned action button.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
EnvironmentVariablesMainPage.xaml.cs	Added EditVariableValuesList_DragItemsCompleted handler to sync reordered items into the text box.
EnvironmentVariablesMainPage.xaml	Replaced ItemsControl with ListView, enabled drag-and-drop, and updated the data template.

Comments suppressed due to low confidence (1)

src/modules/EnvironmentVariables/EnvironmentVariablesUILib/EnvironmentVariablesMainPage.xaml.cs:552

• Add unit tests or UI automation tests for the drag-and-drop handler to verify that the text box is updated correctly when the ValuesList is reordered.

        private void EditVariableValuesList_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)

[Copilot]

Add an AutomationProperties.Name (or appropriate accessible name) to the FontIcon used as a drag handle so that screen readers can announce its purpose.

[Copilot]

Extract the literal separator ";" into a constant (e.g., ValueListSeparator) to avoid magic strings and improve maintainability.

Suggested change

	var newValues = string.Join(";", variable.ValuesList.Select(x => x.Text));
	var newValues = string.Join(ValueListSeparator, variable.ValuesList.Select(x => x.Text));