UWP Development, Change the Output Order of Repeated Buttons in the Body

UWP (Universal Windows Platform) is a platform provided by Microsoft for building applications on Windows 10 and later versions. With UWP, you can deliver a more consistent user experience across a variety of devices. In this article, we will explore in detail how to dynamically change the output order of repeating buttons among the UI components in UWP development. This will increase the flexibility of the user interface and help you learn to configure apps tailored to user needs.

1. Creating a UWP Project

First, you need to create a basic UWP project using Visual Studio. You can follow these steps:

1. Run Visual Studio and select <New Project>.
2. Search for <UWP> and select <Blank App> to create the project.
3. Complete the project setup and click <Create>.

2. Basic UI Configuration in XAML

To configure the basic UI, open the XAML file and add controls to place the buttons that will be output repetitively. Here, we will use a StackPanel to list the buttons.

<Page
    x:Class="ButtonOrderApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ButtonOrderApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="ButtonPanel" Orientation="Vertical">

        </StackPanel>
    </Grid>
    

3. Creating and Outputting Buttons

To dynamically create buttons and add them to the StackPanel, write a method in C# code to create the buttons. Add the following code to the MainPage.xaml.cs file.

using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using System.Collections.Generic;
    using System.Diagnostics;

    namespace ButtonOrderApp
    {
        public sealed partial class MainPage : Page
        {
            private List buttons = new List();

            public MainPage()
            {
                this.InitializeComponent();
                CreateButtons();
            }

            private void CreateButtons()
            {
                for (int i = 1; i <= 5; i++)
                {
                    Button button = new Button
                    {
                        Content = $"Button {i}",
                        Name = $"Button{i}",
                        Width = 200,
                        Height = 100,
                        Margin = new Thickness(5)
                    };
                    button.Click += Button_Click;
                    ButtonPanel.Children.Add(button);
                    buttons.Add(button);
                }
            }

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button clickedButton = sender as Button;
                Debug.WriteLine($"{clickedButton.Content} clicked");
            }
        }
    }
    

4. Changing the Output Order of Buttons

To change the output order of the buttons, we will add logic to move a specific button to the last position whenever a user clicks it. To do this, we will modify the Button_Click method.

private void Button_Click(object sender, RoutedEventArgs e)
    {
        // Move the clicked button to the end of the StackPanel
        Button clickedButton = sender as Button;

        // Remove the button from ButtonPanel
        ButtonPanel.Children.Remove(clickedButton);

        // Add the button to the end of ButtonPanel
        ButtonPanel.Children.Add(clickedButton);
        
        // Output for the button click
        Debug.WriteLine($"{clickedButton.Content} clicked");
    }
    

5. Testing the App

Now that we have written all the code, let’s run the app to check its functionality. Press the F5 key to run the app in debug mode, and try clicking the buttons. The clicked button will move to the end of the list, changing the output order.

6. Code Explanation

To briefly explain the code:

• CreateButtons: Creates buttons from 1 to 5 and adds them to the StackPanel.
• Button_Click: This method is called when a button is clicked, removing the clicked button from the StackPanel and adding it again to change the order.

7. Additional Improvements

Currently, the order changes with each button click, but various enhancements could be added for more UI design diversity. For example:

• Add animations on button click
• Change the color or size of buttons to capture user visual interest
• Fix certain buttons to always remain in a designated position

8. Conclusion

In this post, we learned how to change the output order of repeating buttons using UWP. This was a good example demonstrating that dynamic UI behavior can be implemented with simple code. Such techniques can greatly help improve the user experience of an app. Practice the code and add your enhancements to develop an even better application.

9. References

• Getting Started with UWP
• UWP Design Guidelines
• Button Class Documentation