For those who value security in their applications then this code post is for you. In this application we are designing, we will take the Textbox Text value and encrypt it using the methods provided by C# and Windows Phone 7. We will want to show the user the value after converting the byte array to a base64 string and then the value after it has been unprotected. To start out with let us look to the design of the application before exploring the back end code. If any are unfamiliar with the coding of the GUI let them look to Windows Phone 7 Development 101 tutorial series hosted on Binary Wasteland as well.


<phone:PhoneApplicationPage 
    x:Class="DataProtection.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="PROTECT YOUR DATA" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="data protect" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="16,0,8,0">
        	<TextBlock HorizontalAlignment="Left" Margin="8,17,0,0" TextWrapping="Wrap" Text="Text String:" VerticalAlignment="Top" Height="28" Width="154"/>
        	<TextBox Margin="8,49,8,0" TextWrapping="Wrap" VerticalAlignment="Top" Name="txtData" />
        	<TextBlock HorizontalAlignment="Left" Margin="8,121,0,0" TextWrapping="Wrap" Text="Encrypt Data" VerticalAlignment="Top" Height="28" Width="147"/>
        	<Button Content="Encrypt" Margin="8,153,8,0" VerticalAlignment="Top" Name="btnEncrypt" Click="btnEncrypt_Click" />
        	<TextBlock HorizontalAlignment="Left" Margin="8,226,0,0" TextWrapping="Wrap" Text="Decrypt Data" VerticalAlignment="Top"/>
        	<Button Content="Decrypt" Margin="8,257,8,281" d:LayoutOverrides="Height" Name="btnDecrypt" Click="btnDecrypt_Click" /></Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

The code above is very straight forward and can be pasted into the MainPage.XAML of your application once created. Once this is done you can double click on the Encrypt and Decrypt buttons to bring us into the code view and their methods. These are some fairly simplistic methods but can be used to protect your data from being used and give your data some semblance of privacy. Check out the code for the MainPage.XAML.cs file to see what we did behind the scenes.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

// Used for the protection of data
using System.Security.Cryptography;

namespace DataProtection
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Global variables
        byte[] dataString;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void btnEncrypt_Click(object sender, RoutedEventArgs e)
        {
            // Convert Text data to byte array
            byte[] conversionData = System.Text.Encoding.UTF8.GetBytes(txtData.Text);
            // Convert byte array to Base 64 String
            string tempString = Convert.ToBase64String(conversionData);
            // Protect Data using encryption
            dataString = ProtectedData.Protect(conversionData, null);
            // Show encrypted data in message box
            MessageBox.Show("Encrypted data is : " + tempString);
        }

        private void btnDecrypt_Click(object sender, RoutedEventArgs e)
        {
            // unprotect data and send to a byte array
            byte[] conversionData = ProtectedData.Unprotect(dataString, null);
            // Write the string to the textbox and then show the text in a message box
            txtData.Text = System.Text.Encoding.UTF8.GetString(conversionData, 0, conversionData.Length);            
            MessageBox.Show("Decrypted data is : " + txtData.Text);
        }

    }
}

Here we can also paste this into your application and as long as you have not renamed the default MainPage.XAML file it will work as is. The key for the protection is using the System.Security.Cryptography using statement. All of what is done in the code above is explained for an easy walkthrough. If those of you have questions on the code hit us up in the comments below. For those of you looking to grab the full code you can fork us on GitHub to get the complete solution. Until the next Windows Phone 7 Development application, Happy Hacking!

Share This