How to construct a settings page similar to the stock one in Windows Phone 7?

Question

When I launch the Windows Phone Settings app, what is presented is a pivot control with a bunch of items on each page. For example, the first item is:

THEME
blue

What is the standard way of creating these items? I want them to have the same font style and look. Is there any control to represent the item above?

Thanks!

Answer 1

My suggestion:

<Button>
<Button.Template>
    <ControlTemplate>
        <StackPanel>
            <TextBlock Text="Label" Style="{StaticResource PhoneTextExtraLargeStyle}" Margin="0 18 0 0"/>
            <TextBlock Text="Sub" Style="{StaticResource PhoneTextSubtleStyle}" Margin="0 -6 0 0"/>
        </StackPanel>
    </ControlTemplate>
</Button.Template>

Answer 2

After playing with this for 2 hours pixel by pixel and using a paint program to compare screenshots with the real thing side by side (there's gotta be a better way!), I found the following solution.

Here is the settings page replicated exactly. I've created a custom user control so that adding an item to xaml is as easy as this:

<MyApp:SettingsItem Label="theme" Sub="blue"/>

Here's the code:

SettingsItem.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyApp
{
  // This custom control class is to show a standard item in a settings page.

  public partial class SettingsItem : UserControl
  {
    private const string TAG = "SettingsItem";

    public SettingsItem()
    {
      // Required to initialize variables
      InitializeComponent();
    }

    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register(
            "Label",
            typeof(string),
            typeof(SettingsItem),
            new PropertyMetadata(new PropertyChangedCallback
              (OnLabelChanged)));

    public string Label
    {
      get
      {
        return (string)GetValue(LabelProperty);
      }
      set
      {
        SetValue(LabelProperty, value);
      }
    }

    private static void OnLabelChanged(DependencyObject d,
      DependencyPropertyChangedEventArgs e)
    {
      SettingsItem item = (SettingsItem)d;
      string newValue = (string)e.NewValue;
      item.m_label.Text = newValue.ToLower();
    }

    public static readonly DependencyProperty SubProperty =
        DependencyProperty.Register(
            "Sub",
            typeof(string),
            typeof(SettingsItem),
            new PropertyMetadata(new PropertyChangedCallback
              (OnSubChanged)));

    public string Sub
    {
      get
      {
        return (string)GetValue(SubProperty);
      }
      set
      {
        SetValue(SubProperty, value);
      }
    }

    private static void OnSubChanged(DependencyObject d,
      DependencyPropertyChangedEventArgs e)
    {
      SettingsItem item = (SettingsItem)d;
      string newValue = (string)e.NewValue;
      item.m_sub.Text = newValue;
    }
  }
}

SettingsItem.xaml

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  x:Class="MyApp.SettingsItem"
  d:DesignWidth="428" d:DesignHeight="0">

  <Grid x:Name="LayoutRoot" Background="Transparent">

    <StackPanel 
      Orientation="Vertical"
      >

      <TextBlock 
        x:Name="m_label"
        Text="label" 
        Style="{StaticResource PhoneTextExtraLargeStyle}"
        Margin="0, 18, 0, 0"
        />

      <TextBlock 
        x:Name="m_sub"
        Text="Sub" 
        Style="{StaticResource PhoneTextSubtleStyle}"
        TextWrapping="Wrap"
        Margin="0, -6, 0, 0"
        />

    </StackPanel>
  </Grid>
</UserControl>

and here's the page xaml:

<phone:PhoneApplicationPage 
    x:Class="MyApp.SettingsPage"
    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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

    xmlns:MyApp="clr-namespace:MyApp;assembly=MyApp" 

    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--Pivot Control-->
        <controls:Pivot Title="MY APP" SelectedIndex="0">

            <controls:PivotItem 
                Name="PIVOT_GENERAL"
                Margin="0" 
                Header="settings">
                <Grid Margin="26,9,0,0">
                    <StackPanel>

                        <MyApp:SettingsItem
                            Label="theme"
                            Sub="blue"
                            />

                        <MyApp:SettingsItem
                            Label="date+time"
                            Sub="UTC-08 Pacific Time (US + Canada)"
                            />

                        <MyApp:SettingsItem
                            Label="region+language"
                            Sub="United States"
                            />

                    </StackPanel>

                </Grid>
            </controls:PivotItem>

        </controls:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

Answer 3

It is a ListBox control and a DataTemplate for eacht item. The template defines two TextBox controls, one for the 'title' and one for a 'description/value'. You can set the style for each TextBox.

Edit: here's an example code

<ListBox x:Name="YourListBox" Margin="0" ItemsSource="{Binding YourItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding ItemTitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle2Style}"/>
                <TextBlock Text="{Binding ItemValue}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>