1

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!

1
  • I have added a simple code-example to my answer to clear things out.. :)
    – Abbas
    Nov 25, 2011 at 8:48

3 Answers 3

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>
1
  • Thanks Abbas. It pointed me in the right direction, but the styles you specified are not the same ones used by the Settings app. I gave you some reputation points for it anyways :) Nov 26, 2011 at 9:25
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>
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.