Using Toggle Button in Windows App

Introduction

In this article we will use a Toggle button control. This is an advanced control introduced in XAML controls with some new properties. As the name implies, it provides the ability to toggle between two operations upon clicking the same button. In this application we are using that same feature in a social networking site to Like and Unlike images posted by the user in their profile. On the first click of the button, it is liked. Suppose there is an image and when a button is clicked it will indicate that you like this image and when you click again on the like button then this would make it unliked.  

In the following we are providing the entire code of the XAML file and the code behind file to create this mini application. 

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 2012
• 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 MainPage.xaml and MainPage.xaml.cs files.

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

Code :

<Page

    x:Class="App8.MainPage"

    IsTabStop="false"

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

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

    xmlns:local="using:App8"

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

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

    mc:Ignorable="d">

 

<Grid x:Name="LayoutRoot" Background="Red">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=".033*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".033*"></RowDefinition>

            <RowDefinition Height=".033*"></RowDefinition>

        </Grid.RowDefinitions>

 

        <TextBlock x:Name="tblVote" Text="Please cast your Vote:" FontSize="40"

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

                   VerticalAlignment="Center">

        </TextBlock>

        <Image Source="Tulips.jpg" Grid.Row="1" Grid.ColumnSpan="2">

        </Image>

        <TextBlock x:Name="tb1" Grid.Row="2" Grid.ColumnSpan="2" FontSize="40"

                   HorizontalAlignment="Center" VerticalAlignment="Center">

        </TextBlock>

        <ToggleButton x:Name="tbtnVote" Checked="tbtnVote_VoteChanged"

                      Unchecked="tbtnVote_VoteChanged" Grid.ColumnSpan="2"

                      Grid.Row="3" Indeterminate="tbtnVote_VoteChanged"

                      IsThreeState="True"  HorizontalAlignment="Center"

                      VerticalAlignment="Center" Content="Like / Dislike">

        </ToggleButton>

</Grid>

</Page>

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

Code :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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 App8
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.tbtnVote.IsChecked = null;
            this.Voting();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
        private void tbtnVote_VoteChanged(object sender, RoutedEventArgs e)
        {
            this.Voting();
        }
        private void Voting()
        {
            switch (this.tbtnVote.IsChecked)
            {
                case null:
                    this.tb1.Text = "--------------";
                    break;
                case true:
                    this.tb1.Text = "You Unlike this image";
                    break;
                case false:
                    this.tb1.Text = "You like this image";
                    break;
            }
        }
    }
}

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