Как создать страницу настроек, аналогичную стандартной в Windows Phone 7?

Question

Когда я запускаю приложение «Настройки Windows Phone», я представляю собой сводный элемент управления с кучей элементов на каждой странице. Например, первый элемент:

THEME
blue

Каков стандартный способ создания этих предметов? Я хочу, чтобы они имели одинаковый стиль шрифта и внешний вид. Есть ли какой-либо элемент управления для представления элемента выше?

Спасибо!

Answer 1

Это элемент управления ListBox и шаблон данных для каждого элемента. Шаблон определяет два элемента управления TextBox, один для «заголовка» и один для «описания / значения». Вы можете установить стиль для каждого TextBox.

Редактировать: вот пример кода

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

Answer 2

Поработав с этим в течение 2 часов попиксельно и используя программу рисования для сравнения снимков экрана с реальными вещами рядом (должен быть лучший способ!), Я нашел следующее решение.

Вот страница настроек точно копируется. Я создал пользовательский элемент управления, чтобы добавить элемент в xaml так просто:

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

Вот код:

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>

и вот страница 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

Мое предложение:

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