In this step you'll begin in Visual Studio to create a Windows Phone application using MaskedTextBox for Windows Phone. When you add a C1MaskedTextBox control to your application, you'll have a complete, functional input editor. You can further customize the control to your application.
To set up your project and add C1MaskedTextBox controls to your application, complete the following steps:
1. In Visual Studio, select File | New | Project to open the New Project dialog box.
2. In the New Project dialog box, select a language in the left pane, and in the templates list select Windows Phone Application. Enter a Name for your project and click OK. The New Windows Phone Application dialog box will appear.
3. Click OK to close the New Windows Phone Application dialog box and create your project.
4. Right-click the project in the Solution Explorer and select Add Reference.
5. In the Add Reference dialog box, locate and select the C1.Phone.dll assembly and select OK.
6. Add the XAML namespace to the <phone:PhoneApplicationPage> tag by adding xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" so it appears similar to the following:
<phone:PhoneApplicationPage x:Class="C1WP.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" xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" 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">
7. Edit the TitlePanel content to change the text in the TextBlock controls. It will appear similar to the following:
<!--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="ComponentOne Studio for Windows Phone" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="MaskedTextBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="64"/>
</StackPanel>
8. In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.
9. Add the following XAML markup cursor between the <Grid x:Name="ContentPanel"></Grid> tags to add a StackPanel to the application:
<StackPanel x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
</StackPanel>
Elements in the panel will appear centered and vertically positioned.
10. In the XAML window of the project, place the cursor between the <StackPanel x:Name="sp1"> and </StackPanel> tags.
11. Add the following markup between the <StackPanel x:Name="sp1"> and </StackPanel> tags:
<TextBlock Margin="2,2,2,10" Name="tb1" Text="Employee Information" />
<TextBlock FontSize="16" Margin="2,2,2,0" Text="Employee ID" />
<c1:C1MaskedTextBox Name="c1mtb1" VerticalAlignment="Top" Margin="2" Mask="000-00-0000" TextChanged="c1mtb1_TextChanged"></c1:C1MaskedTextBox>
<TextBlock x:Name="tb2" FontSize="16" Margin="2" />
<TextBlock FontSize="16" Margin="2,2,2,0" Text="Name"/>
<c1:C1MaskedTextBox Name="c1mtb2" VerticalAlignment="Top" Margin="2" TextChanged="c1mtb2_TextChanged"></c1:C1MaskedTextBox>
<TextBlock x:Name="tb3" FontSize="16" Margin="2"/>
<TextBlock FontSize="16" Margin="2" Text="Hire Date"/>
<c1:C1MaskedTextBox Name="c1mtb3" VerticalAlignment="Top" Margin="2" Mask="00/00/0000" TextChanged="c1mtb3_TextChanged"></c1:C1MaskedTextBox>
<TextBlock x:Name="tb4" FontSize="16" Margin="2"/>
<TextBlock FontSize="16" Margin="2,2,2,0" Text="Phone Number"/>
<c1:C1MaskedTextBox Name="c1mtb4" VerticalAlignment="Top" Margin="2" Mask="(999) 000-0000" TextChanged="c1mtb4_TextChanged"></c1:C1MaskedTextBox>
<TextBlock x:Name="tb5" FontSize="16" Margin="2"/>
You added several TextBlock controls and four C1MaskedTextBox controls to the application. Note that you set several options in each C1MaskedTextBox control: you added a Name to give each control a unique identifier to access the control in code, you set the Margin, you added a Mask to control what users can enter into the control, and added the TextChanged event handler. Note that you will add the event handler code later in the tutorial.
You've successfully set up your application's user interface. In the next step you'll add code to your application.