Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Completing the Pin code list screen for the PinCodeKeeper WP7 app

DZone's Guide to

Completing the Pin code list screen for the PinCodeKeeper WP7 app

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

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.

pincodekeeper_5-29-2011_22.4.31.489

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






.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:

Published at DZone with permission of Per Ola Sæther, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}