In this tutorial we are going to learn about a couple of different objects on the toolbar that can be used to make life easier.  In the previous post we covered the basic “Hello World” program that most people make when starting a new language but it is time to explore a little further in this tutorial.  It has always been my personal standard to keep Development 101 tutorials fairly ubiquitous across the various programming languages. So for this tutorial we will cover the visual aspect of the statistics tracker and leave the backbone work for another day. To begin we will need to create a project again, it will be a standard Windows Phone Application with a project name of WP7StatsTracker and leaving the solution name as the same title.   After we press OK and the project is created we can now start changing the titles and dragging tools from the toolbar.

We need to change the Application Title to “Statistics Tracker” and the Page Title to “Rewards Data” to look like above.  After this is done we need to make a label and a textbox to hold the number of “Rewards” the user has accumulated and to do this we will drag the textblock (label) onto the screen and drop it near the top of the blank space.  We can then change the title of the textblock to “Number of Rewards:” in the XAML code – <TextBlock x:Name=”NumRewTitle” Text=”Number Of Rewards:” Style=”{StaticResource PhoneTextNormalStyle}” Margin=”0,0,0,578″ /> – which can also be referenced for the Margin variable as well as the x:Name.  We can then drag the Textbox from from the toolbar and drop it onto the blank space and changing the variables of the textbox in the XAML to <TextBox Height=”72″ HorizontalAlignment=”Left” Margin=”0,22,0,0″ Name=”txtNumRew” Text=”” VerticalAlignment=”Top” Width=”460″ /> looking like the image above.

With the initial release of Windows Phone 7 there is not a Date Picker included with the toolkit but the Nov 2010 Silverlight update which can be used to include a number of new tools including the Date Picker tool.  To add a reference to the assembly so we may use the tool we need to right click on the references icon in the solution explorer and click Add Reference and navigate to the Browse tab.  Then navigate to “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin\” on a x64 bit machine or “C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin\” for a x32 bit machine and grab the .dll labeled Microsoft.Phone.Controls.Toolkit.dll after selected press OK to add to your references. To be able to use the check mark and the X mark images in your application the files must be copied (from “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin\Icons” – x64 – or from “C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin\Icons” – x32) to a folder called Toolkit.Content (which you must create by right clicking on the project in the solution explorer and navigating to Add > New Folder.

 

After the reference has been added we are able to add additional tools using the preface of “<toolbox:” in the XAML.  So to be able to add the stock Date Picker to our project all that is needed is a line of code as such – “<toolbox:DatePicker x:Name=”BirthDate” ValueChanged=”BirthDate_ValueChanged” Margin=”0,134,0,-134″ />” and of course adding in the label above the Date Picker, naming the text appearing on the screen “Date:” and making the overall application look like the photo above.  When clicked the Date Picker will look like the following photos with a confirmation of the date coming up when the check mark is clicked.  The code to add the labels, text-boxes and Date Picker will follow the pictures.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock x:Name="NumRewTitle" Text="Number Of Rewards:" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,0,0,578" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="0,22,0,0" Name="txtNumRew" Text="" VerticalAlignment="Top" Width="460" />
<TextBlock x:Name="DateTitle" Text="Date:" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,100,24,479" />
<toolbox:DatePicker x:Name="BirthDate" ValueChanged="BirthDate_ValueChanged" Margin="0,134,0,-134" />

<Button Content="Submit" Click="Button_Click" Margin="0,210,0,322" />
</Grid>

After this, all that is left is to do is add a button for the user to click when they are done adding in all of the data.  To do this we can simply drag one over from the Toolbox and name the text that the user will see to “Submit“.  When clicked the users information will ideally be submitted to either a local or remote database.  This will be covered in a separate tutorial.  The final solution and code should look something like this.


<phone:PhoneApplicationPage

x:Class="WP7StatsTracker.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:toolbox="clr-namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone.Controls.Toolkit"

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="Statistics Tracker" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Rewards Data" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<TextBlock x:Name="NumRewTitle" Text="Number Of Rewards:" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,0,0,578" />

<TextBox Height="72" HorizontalAlignment="Left" Margin="0,22,0,0" Name="txtNumRew" Text="" VerticalAlignment="Top" Width="460" />

<TextBlock x:Name="DateTitle" Text="Date:" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,100,24,479" />

<toolbox:DatePicker x:Name="BirthDate" ValueChanged="BirthDate_ValueChanged" Margin="0,134,0,-134" />

<Button Content="Submit" Click="Button_Click" Margin="0,210,0,322" />

</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>

With the final piece of this graphical user interface puzzle complete we are now free to move on to the next phase of the Statistic Tracker; Databases.  If your looking for additional resources on databases there is some good information at http://rongchaua.net that will cover some of what will be in the next tutorial.  Until next time, happy hacking!

<– Hello World Isolated Storage –>
Share This