Passing Value from Child Page to Parent Page

Nov 2, 2010 Update: Microsoft releases a toolkit which includes a control ListPicker–which my article tried to emulate. I’ve downloaded it and it looks good so far. I no longer need to employ a separate page to list options. The concept in this article is still useful if you want to allow selecting multiple items. As far as I know, ListPicker control won’t let you set up such thing.

When presenting an input with a list of options, normally we will see a drop down menu (or a list box, combo box, and the like) or a child window employed to present the options. On Windows Phone 7, there aren’t such controls (there are hacks and workarounds, though), so one of the methods to display the options is to present them in another page.

Passing Value from a Child to a Parent Page


Say we have a page (MainPage.xaml) where a user could select his favorite color. The following is the (portion of) XAML code.

    <!--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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="about me" 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">
            <StackPanel>
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener Tap="GestureListener_Tap" />
                </toolkit:GestureService.GestureListener>
                <TextBlock Text="my fave color" Style="{StaticResource PhoneTextExtraLargeStyle}" />
                <TextBlock x:Name="txtFaveColor" Style="{StaticResource PhoneTextSubtleStyle}" />
            </StackPanel>
        </Grid>
    </Grid>

When the user taps on my fave color, he will be redirected to another page (ChildPage.xaml) where he can specify his selection. In the parent page (MainPage.xaml), we need to specify a public property which the child page will set. The following is how the public property FaveColor defined in the code behind (MainPage.xaml.cs)

    public partial class MainPage : PhoneApplicationPage
    {
        public string FaveColor;

        public MainPage()
        {
            InitializeComponent();
        }

        private void GestureListener_Tap(object sender, GestureEventArgs e)
        {
            this.NavigationService.Navigate(new Uri("/ChildPage.xaml", UriKind.Relative));
        }
    }

The child page is to set the property FaveColor of parent page within the OnNavigatedFrom event where the parent page context is available.

    public partial class ChildPage : PhoneApplicationPage
    {
        private string selectedColor;

        public ChildPage()
        {
            InitializeComponent();
        }

        private void lstColors_Tap(object sender, GestureEventArgs e)
        {
            if (lstColors.SelectedItem == null)
                return;

            selectedColor = ((TextBlock)lstColors.SelectedItem).Tag.ToString();

            NavigationService.GoBack();
        }

        protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            if (e.Content is MainPage &&
                selectedColor != null)
            {
                (e.Content as MainPage).FaveColor = selectedColor;
            }

            base.OnNavigatedFrom(e);
        }
    }

Now, we can use the the property FaveColor as the content of the control which displays user’s favorite color.

    public partial class MainPage : PhoneApplicationPage
    {
        public string FaveColor;

        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            txtFaveColor.Text = FaveColor;
        }

        private void GestureListener_Tap(object sender, GestureEventArgs e)
        {
            this.NavigationService.Navigate(new Uri("/ChildPage.xaml", UriKind.Relative));
        }
    }

This technique is originally found in Charles Petzold’s “Programming Windows Phone 7.”

Windows Phone 7 System Styles

When you add a new page to your WP7 application project, the default XAML page is likely to contain references to style definitions such as PhoneTextNormalStyle and PhoneTextTitle1Style.

<!--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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

Those two style definitions are applied to the application title and page title of the page with the goal that all WP7 applications will share similar look.

Application Title and Page Title in WP7 Application

Just as you would use .NET libraries (as opposed to crafting your own wheels), you should use the built-in styles available. To discover more style definition that you can use, browse the file ThemeResources.xaml found in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design. Using these styles will guarantee that the application’s look will still be presentable when users change the color theme.

Edit Post Screen (Variant II)

I thought of this during the long wait at In-n-Out drive-thru (yes, it was good).

Utilizing the pivot control, I could place the writing area in one view and the auxiliary components (less used features) in another view. Which components are more or less used is up for pointless debate, though.

I can see how this is beneficial for the workflow of writing a blog post. When writing a post, I would normally start with a title and move on to writing the content. While writing, I’m focusing on writing and only writing. When I’m finished, I would set the categories. Writing the post content and setting the attributes of the post are two separate tasks in the post writing workflow; hence, the separation of the views.

Edit Post Screen with Pivot Control

The UI Design and Interaction Guide for Windows Phone 7 does not recommend pivot control for this kind of usage, however. The following are excerpts from the guide that the pivot control in Edit Post screen violates.

Pivot pages should not be used for task flow.

The pivot control should only be used to display items or data of similar type.

I understood why the first item of guideline is there. A task flow requires a strict order; user has to complete task one before proceeding to task two. Pivot control does not enforce that. User can navigate to views in pivot control in any order (except there is always one same initial view). This is less of an issue for this scenario. The big issue is that pivot control does not guarantee that a user will navigate to all views. I could click [save] and realize that I forgot to assign categories in the other view.

For the second item in the guideline. I could argue that I do use the control to display items of similar type: blog post’s properties of most used, and less used. But the author(s) of the guideline may disagree with that. Microsoft uses the email reader to show how a pivot control should be used. In the email reader, pivot control is used to display emails with status unread, flag, and the like in the different views.

Whether a pivot control is appropriate for the Edit Post screen, I need a usability testing to know if it will work for users.

Using Your Physical, Full-size Keyboard with Windows Phone 7 Emulator

When you click your mouse on one of the input fields in a form, you will get the onscreen keyboard on Windows Phone 7 emulator. It’s worse than using your thumbs on your real phone because you actually has to click one character at a time with your mouse.

Now, while you still can see the onscreen keyboard, press the [Pause/Break] key (to the right of [Scroll Lock] key, at least on my keyboard–my computer keyboard). If you do it right, the onscreen will disappear and you can do your form entry with your physical, full-size keyboard.