Когда я работал над проектом Windows Phone 8, мне нужен был стержень, который мог бы скрыть его заголовок, возвращая некоторую часть экрана при необходимости. Основной свод, включенный в Windows Phone SDK, не имеет такого поведения, поэтому это была отличная возможность опробовать пользовательские элементы управления в Windows Phone. Ранее я создавал пользовательские элементы управления в XAML, но никогда не основывался на существующем, так что веселые времена впереди. Позвольте мне начать с параллельного сравнения обоих представлений моего центра.
не обращайте внимания на перекрывающиеся текстовый блок и кнопку, дело в том, что при нажатии кнопки заголовок сводки исчезает.
Создание пользовательского элемента управления XAML
Собрать пользовательский элемент управления в XAML довольно просто, если вы будете следовать инструкциям. Требуется добавить папку с именем Темы, а в папку — файл generic.xaml. Файл generic.xaml является словарем ресурсов, код файла не требуется. Соблюдайте правила именования, иначе ваш контроль не будет работать. Следующим шагом является добавление класса, который наследуется от ContentControl (или элемента управления, который уже наследует от ContentControl). Проект для моего ExtendedPivot выглядит так
Тип проекта — это библиотека классов WP8, содержащая два пользовательских элемента управления, один для сводного элемента и один для сводных элементов.
Расширение стержня
Поскольку я хочу добавить функциональность только в существующий элемент управления, Pivot, мой класс ExtendedPivot наследуется от Pivot, а не от CustomControl.
public class ExtendedPivot : Pivot
{
public static readonly DependencyProperty HeaderVisibilityProperty =
DependencyProperty.Register("HeaderVisibilityProperty", typeof (Visibility), typeof (ExtendedPivot), new PropertyMetadata(null));
public Visibility HeaderVisibility
{
get { return (Visibility)GetValue(HeaderVisibilityProperty); }
set { SetValue(HeaderVisibilityProperty, value); }
}
public ExtendedPivot()
{
DefaultStyleKey = typeof(ExtendedPivot);
}
}
Мы начнем с конструктора, строка 14 необходима при разработке пользовательского элемента управления, он устанавливает стиль элемента управления в соответствии со стилем, определенным в generic.xaml (мы перейдем к этому стилю через минуту). Строки 6 — 10 — это свойство, которое будет использоваться DependencyProperty. Свойство DependencyProperty (строки 3-4) — это свойство, с которым мы можем связать значение при использовании элемента управления в проекте, на первый взгляд это может показаться немного сложным, но в VS2012 есть отличный фрагмент, чтобы легко их написать. По сути, параметрами для функции Register являются имя, тип свойства, тип владельца (тип элемента управления, в котором вы объявляете DP) и некоторые метаданные.
Метод get и set обычного свойства использует DP для получения и установки значений через привязку данных.
Generic.xaml
Это стиль для ExtendedPivot, объявленный в generic.xaml
<Style TargetType="local:ExtendedPivot">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ExtendedPivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.RowSpan="3" Background="{TemplateBinding Background}" />
<ContentControl Grid.Row="0"
Margin="24,17,0,-7"
HorizontalAlignment="Left"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
Visibility="{TemplateBinding HeaderVisibility}" />
<primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" />
<ItemsPresenter x:Name="PivotItemPresenter"
Grid.Row="2"
Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
По сути, я создал страницу xaml в каком-то очень простом проекте Windows Phone, щелкнул по нему правой кнопкой мыши, выбрал «Редактировать шаблон»> «Редактировать копию». Это дает вам копию шаблона для Pivot. Я скопировал этот шаблон в стиле generic.xaml. ContentControl в строках 23-28 показывает заголовок в сводной таблице. Я добавил здесь свойство Visiblity и связал его со свойством HeaderVisibility в классе ExtendedPivot. Чтобы связать свойство в стиле, вам нужно использовать ключевое слово TemplateBinding вместо обычного Binding.
Не забудьте установить TargetType на тип вашего пользовательского элемента управления.
Использование пользовательского элемента управления в приложении
Элемент управления готов, теперь пришло время его использовать. Создайте новое приложение для Windows Phone и укажите ссылку на проект или DLL пользовательского элемента управления. Это главная страница примера приложения.
<phone:PhoneApplicationPage x:Class="ExtendedPivot.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control="clr-namespace:ExtendedPivot.Control;assembly=ExtendedPivot.Control"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
SupportedOrientations="Portrait"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d">
<!-- LayoutRoot is the root grid where all page content is placed -->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!-- Pivot Control -->
<control:ExtendedPivot HeaderVisibility="{Binding Visibility}" Title="MY APPLICATION">
<control:ExtendedPivotItem Header="item 1">
<Grid>
<TextBlock Text="item1" />
<Button Click="ButtonBase_OnClick" Content="button" />
</Grid>
</control:ExtendedPivotItem>
<control:ExtendedPivotItem Header="item 2">
<TextBlock Text="item2" />
</control:ExtendedPivotItem>
</control:ExtendedPivot>
</Grid>
</phone:PhoneApplicationPage>
Строка 4 определяет пространство имен, которое содержит ExtendedPivot. Строка 20 помещает элемент управления на фактическую страницу. Обратите внимание, что мы связываем свойство HeaderVisibility нашего элемента управления. Я определил текст данных этой страницы в коде сзади, чтобы иметь тип MainViewModel. MainViewModel реализует INotifyPropertyChanged и содержит только одно свойство типа Visibility, это свойство связано с HeaderVisibility ExtendedPivot.
Кнопка в сводной области переключит HeaderVisibility между Collapsed и Visible, это происходит в коде позади этой страницы.
public partial class MainPage : PhoneApplicationPage
{
private MainViewModel _mainViewModel;
// Constructor
public MainPage()
{
InitializeComponent();
_mainViewModel = new MainViewModel();
DataContext = _mainViewModel;
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
if (_mainViewModel.Visibility == Visibility.Collapsed)
{
_mainViewModel.Visibility = Visibility.Visible;
}
else
{
_mainViewModel.Visibility = Visibility.Collapsed;
}
}
}
Не совсем лучший способ написать приложение для Windows Phone, но это просто для того, чтобы 
Вывод
Расширить элемент управления Windows Phone не сложно, если вы соблюдаете соглашения об именах, добавить некоторые дополнительные функции так же просто, как скопировать шаблон xaml и добавить некоторые свойства зависимостей.
Пример кода можно найти на моем SkyDrive