Dynamic Button UWP: Navigate Array Content

Create a simple proof-of-concept UWP application with a dynamic button. Navigate linear content stored in an array with one 'Next' button.

After all content has been shown, button text changes from 'Next' to 'Start Over'.

Notes

This post is an update of the Dynamic Button (Windows Form).

This tutorial assumes some prior knowledge and experience with Visual Studio. If you would like to make this application along with this tutorial, it is recommended that you:

• Have Visual Studio installed (.NET framework and UWP components)
• Have experience with C#, or understand fundamental programming concepts

Set Up

Create a new Universal Windows Platform (UWP) application.

Add a Button and a TextBox from the common XAML controls.

In this example the TextBlock is named 'textBlockStory', and the button is named 'buttonStory'.

The layout is simple - the TextBlock at the top and the button underneath. Modify the appearance and font if you like.

Dynamic Button UWP Code

MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
//programmingisfun.com

namespace PIFoneButton
{
 public sealed partial class MainPage : Page
    {
        public int Section = 1;
        public bool Pause = true;

        private string[] Story = new string[] {
            "This example shows how to use one button to move through content in a UWP application. ",
            "There is a TextBlock and a button on the Page. The TextBlock is named 'textBlockStory', and the button is named 'buttonStory'.",
            "The text shown is stored in an array named 'Story'. A variable named 'Section' is set at 0 originally, and tracks which index element is currently being shown from the array.",
            "When the button is clicked, Section is incremented and what is shown in the TextBlock is updated to show the next element's contents.",
            "At the end of the array, the Section variable is set back to 0 and the text on the button is changed (to 'Start Over').",
            "This is the last element in the array. On the next button click this text will be changed to 'The End', and the button will change to say 'Start Over'."

        };

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

        private void buttonStory_Click(object sender, RoutedEventArgs e)
        {
            if ((string)buttonStory.Content == "Start Over")
            {
                Section = 0;
                buttonStory.Content = "Next";
                UpdateContent();
            }
            else
            {
                UpdateContent();
            }
        }

        private void UpdateContent()
        {

            if (Section < Story.Length)
            {
                textBlockStory.Text = Story[Section];
                Pause = !Pause;
            }
            else
            {
                textBlockStory.Text = "The End";
                buttonStory.Content = "Start Over";
                Pause = !Pause;
            }
            Section++;
            Pause = true;
        }

        private void textBlockStory_Loaded(object sender, RoutedEventArgs e)
        {
            textBlockStory.Text = Story[0];

    }
}
}

Screenshots

Screenshots show the TextBlock displaying content from the array. The font used in this example is Sweetie Pie.