preload
May 29

In the previous article I defined the project structure for the PinCodeKeeper WP7 app, in this post I will write the code to complete the Pin code list screen.

Creating the GUI

I start by creating GUI for the “PinCodeListView.xaml”. The GUI for this view contains a header, a list and an application bar.

Below you can see the xaml code for the “PinCodeListView.xaml”, notice the data binding capabilities I use for the pin code list. I also needed to add some icons for the application bar buttons. I found a free set of Mono Icons 32×32 that suited my app. I created a new folder called “Images” and added “plus32.png”, “questionbook32.png” and “stop32.png” to that folder. Remember that the images must be set to Build action: Content and Copy to output directory: Copy Always.

<phone:PhoneApplicationPage
    x:Class="PinCodeKeeper.View.PinCodeListView"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    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="PinCodeKeeper" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Pin Codes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--Pin code list with databinding-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Margin="0,0,0,113" Name="pinCodeList" ItemsSource="{Binding PinCodes}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Button Width="460" Height="80" Click="PinCodeListClicked">
                            <Button.Content>
                                <StackPanel Orientation="Vertical" Height="60">
                                    <StackPanel Orientation="Horizontal" Height="40">
                                        <TextBlock Width="300" Height="40" Text="{Binding Name}" FontSize="32"/>
                                    </StackPanel>
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

    <!--ApplicationBar with "New" and "About" buttons-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="/Images/plus32.png" Text="Add New" Click="AddNewBtnClicked"/>
                <shell:ApplicationBarIconButton IconUri="/Images/questionbook32.png" Text="About" Click="AboutBtnClicked"/>
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

Creating the data objects

I completed the data objects kept in the Model name space.

namespace PinCodeKeeper.Model
{
    public class PinCode
    {
        public string Name { get; set; }
        public int[][] PinCodeMatrix { get; set; }
    }
}
using System.Collections.ObjectModel;

namespace PinCodeKeeper.Model
{
    public class PinCodeList
    {
        public ObservableCollection PinCodes { get; set; }
    }
}

I also created a new object called MainModel, this will be an Instance and is used to set data used outside just one view. For this view I will set the selected pin code in the MainModel so the next view know what pin code was selected.

namespace PinCodeKeeper.Model
{
    public class MainModel
    {
        private static MainModel _instance;

        public static MainModel Instance
        {
            get { return _instance ?? (_instance = new MainModel()); }
        }

        public PinCode SelectedPinCode { get; set; }

    }
}

Creating the Presenter

Then I create the PinCodeListPresenter.cs and this is the class responsible for passing data from the view. Take notice that I’m only using mocked up data for the pin code list at this point, this way I can focus on the functionality and come back and complete the part with the isolated storage later on.

using System.Collections.ObjectModel;
using PinCodeKeeper.Model;
using PinCodeKeeper.View;

namespace PinCodeKeeper.Presenter
{
    public class PinCodeListPresenter
    {
        private readonly PinCodeListView _view;
        private PinCodeList _viewData;

        public PinCodeListPresenter(PinCodeListView view)
        {
            _view = view;
        }

        // Initialize view with PinCodeList.
        public void InitializeView()
        {
            _viewData = new PinCodeList();
            _viewData.PinCodes = new ObservableCollection();

            //GetPinCodesFromIsolatedStorage();
            MockUpPinCodes();

            _view.InitializeView(_viewData);
        }

        // Set selected pin code in MainModel so that
        // the next view know what pin code was selected.
        public void PinCodeSelected(PinCode pinCode)
        {
            MainModel.Instance.SelectedPinCode = pinCode;
        }

        // Read pin codes from isolated storage and
        // add them to viewData.
        private void GetPinCodesFromIsolatedStorage()
        {
           //TODO retrieve pin codes from isolated storage
        }

        // Mockup pin codes so the we can test the
        // app with fake data and don't care about the
        // isolated storage.
        private void MockUpPinCodes()
        {
            //Mock some pin codes
            _viewData.PinCodes.Add(new PinCode()
            {
                Name = "Visa"
            });
            _viewData.PinCodes.Add(new PinCode()
            {
                Name = "Mastercard"
            });
            _viewData.PinCodes.Add(new PinCode()
            {
                Name = "Company door"
            });
        }
    }
}

Creating the code behind the view

The last class we need to complete is the PinCodeListView.xaml.cs class. This class asks the presenter for viewdata and set the viewdata as DataContext to ensure data binding. The class also have three methods to handle when item in pin code list is selected, add new button is clicked and when about button is clicked.

using System;
using System.Windows;
using System.Windows.Controls;
using PinCodeKeeper.Model;
using PinCodeKeeper.Presenter;

namespace PinCodeKeeper.View
{
    public partial class PinCodeListView
    {
        private PinCodeListPresenter _presenter;

        public PinCodeListView()
        {
            InitializeComponent();
            Loaded += PinCodeListViewLoaded;
        }

        // When view is loaded create the presenter and tell the presenter that
        // the view wants to be initialized.
        void PinCodeListViewLoaded(object sender, RoutedEventArgs e)
        {
            if (_presenter == null)
            {
                _presenter = new PinCodeListPresenter(this);
                _presenter.InitializeView();
            }
        }

        // Presenter passes viewData and the PinCodeList is set
        // as DataContext to ensure databinding.
        public void InitializeView(PinCodeList viewData)
        {
            DataContext = viewData;
        }

        // An item in the pin code list is selected, send the selected
        // item to the presenter and navigate to PinCodeView.
        private void PinCodeListClicked(object sender, RoutedEventArgs e)
        {
            var item = ((sender as Button).DataContext as PinCode);
            _presenter.PinCodeSelected(item);

            NavigationService.Navigate(new Uri("/View/PinCodeView.xaml", UriKind.Relative));
        }

        // Add new pin code application bar button is clicked,
        // navigate to NewPinCodeView.
        private void AddNewBtnClicked(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/View/NewPinCodeView.xaml", UriKind.Relative));
        }

        // About application bar button is clicked,
        // navigate to AboutView.
        private void AboutBtnClicked(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/View/AboutView.xaml", UriKind.Relative));
        }
    }
}

When running the application the Pin code list screen looks like image below.

 

Pin code list screen

The next step now will be to start creating the Pin code screen where we need the custom control for drawing pin code images.

Follow me on twitter @PerOla

Share & enjoy
You can subscribe to my comments feed to keep track of new comments.

No Comments to “Completing the Pin code list screen for the PinCodeKeeper WP7 app”

4 Pingbacks to “Completing the Pin code list screen for the PinCodeKeeper WP7 app”

  1. […] Completing the Pin code list screen for the PinCodeKeeper WP7 app (Per Ola Sæther) […]

  2. […] Completing the Pin code list screen for the PinCodeKeeper WP7 app May 31 […]

  3. […] screen with a custom control to display the pin code card. I will continue from where I left when I previously completed the Pin code list screen. The Pin code card screen will display the name of the card and a matrix with numbers on a […]

  4. […] I’m working on the PinCodeKeeper Windows Phone 7 app and in this article I will walk you through how I made the Pin code card screen with a custom control to display the pin code card. I will continue from where I left when I previously completed the Pin code list screen. […]

Leave a Reply

Subscribe to my comments feed

Subscribe to my feeds Follow me on Twitter
DZone MVB