Implementation of Repeat Button in Windows Store App

Introduction

In this article we will use the Repeat button control of XAML in a Metro style application. The concept behind the Repeat button is that we can do a click event multiple times as needed and each time we do, it performs the associated action.

Here we used two repeat buttons, Grow and Shrink and we use a rectangle control. On a click event of the buttons the height and width of the rectangle will be changed, no matter how many times you click on the button. It has no limitation.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# ->Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the BlankPage.xaml and BlankPage.xaml.cs files.

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page

    x:Class="Application7.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Application7"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Name="LayoutRoot" Background="BlueViolet">

        <Grid.RowDefinitions>

            <RowDefinition Height="0.033*"/>

            <RowDefinition Height="0.033*"/>

            <RowDefinition Height="0.333*"/>

        </Grid.RowDefinitions>

        <TextBlock Text="Repeat Button in Metro Style Apps" Grid.Row="0"

                   FontSize="40" HorizontalAlignment="Center"

                   VerticalAlignment="Center">

        </TextBlock>

        <RepeatButton Margin="10,10,0,0" VerticalAlignment="Top"

                      HorizontalAlignment="Center"                     

                      Name="GrowButton"  Width="80" Height="50"

                      Delay="500" Interval="100"

                      Click="GrowButton_Click" Grid.Row="1"

                      Background="Red">

            Grow

        </RepeatButton>

        <RepeatButton Margin="200,10,0,0" VerticalAlignment="Top"

                      HorizontalAlignment="Center"                     

                      Name="ShrinkButton"  Width="80" Height="50"

                      Delay="500" Interval="100"

                      Click="ShrinkButton_Click" Grid.Row="1"

                      Background="Green">

            Shrink

        </RepeatButton>

 

        <Rectangle Name="Rect" Height="200" Width="200" Fill="Blue"

                   Grid.Row="2" HorizontalAlignment="Center"

                   VerticalAlignment="Top" Margin="100,100,0,0">

        </Rectangle>

     </Grid>

</Page>

Step 4 : The BlankPage.xaml.cs file is as in the following code:

Code :

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Xml.Linq;

using System.Text;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

 

namespace Application7

{

    public sealed partial class BlankPage : Page

    {

        public BlankPage()

        {

            this.InitializeComponent();

           

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

        private void GrowButton_Click(object sender, RoutedEventArgs e)

        {

            Rect.Width += 10;

            Rect.Height += 10;

        }

        private void ShrinkButton_Click(object sender, RoutedEventArgs e)

        {

            Rect.Width -= 10;

            Rect.Height -= 10;

        }

    }

}

Step 5 : After running this code the output looks like this:

Clink on the Grow button; we can increase the size as we want.

Click on the Shrink button; we can decrease the size as much as we want.