Пошаговое руководство: Создание элемента управления панели элементов WPF

Статья
05/18/2015

Шаблон элемента управления панели элементов, который включен в WPF SDK для Visual Studio 2010 позволяет создать элементы управления Windows Presentation Foundation (WPF), автоматически добавляются к Панель элементов если расширение устанавливается. В этом пошаговом руководстве показано, как использовать шаблон для создания счетчика элемент управления, который можно распределять другим пользователям.

Обязательные компоненты

Чтобы выполнить это пошаговое руководство, необходимо устанавливать SDK для Visual Studio 2010.

Примечание

Дополнительные сведения о пакете SDK для Visual Studio см. в разделе интеграция SDK Visual Studio.Чтобы узнать, как загрузить пакет SDK для Visual Studio см. в разделе Центр разработчиков расширяемости Visual Studio на веб-сайте MSDN.

Найти шаблон элемента управления панели элементов WPF в Visual Studio

Шаблон элемента управления WPF в панели элементов Создать проект диалоговое окно вниз Установленные шаблоныв этих местах:

Visual Basic" Расширение среды. Язык проекта Visual Basic.
Visual c#" Расширение среды. Язык проекта c#.

Создание проекта элемента управления панели элементов WPF

Шаблон элемента управления панели элементов WPF создает неопределенный пользовательского элемента управления и предоставляет всю функциональность, необходимую для добавляет элемент управления в Панель элементов.

Создание проекта

В меню Файл последовательно выберите пункты Создать и Проект.
в Создать проект диалоговое окно вниз Установленные шаблоныщелкните узел для предпочитаемого языка программирования и затем установите Расширение среды. В списке типов проекта выберите Элемент управления панели элементов WPF.
в Имя окно, введите имя, которое будет использоваться для проекта. (В данном пошаговом руководстве используется имя Счетчик.) Нажмите кнопку ОК.

Это создает решение, которое содержит пользовательский элемент управления, атрибут для размещения элемента управления Панель элементови манифест VSIX для развертывания. Имя окно задает имя решения и имя пространства имен, но не устанавливает имя элемента управления, как оно выглядит в Панель элементов. Необходимо задать то позже в данном пошаговом руководстве.

Построение пользовательского интерфейса элемента управления

Счетчик элемент управления требуется 3 дочерних элементов управления. 2 Label элементы управления для отображения текста и текущего количества и a Button мониторинг, чтобы сбросить счетчик до 0. Никакие другие дочерние элементы управления не требуется, поскольку размещение приложений увеличивает счетчик программно.

Построение пользовательского интерфейса

IN Обозреватель решенийдважды щелкните ToolboxControl.cs, чтобы открыть его в конструкторе.

Конструктор отображает a Grid элемент управления, содержащий a Button элемент управления.
Выберите Grid мониторинг и нажмите кнопку синие полосы, отображаемых на верхнюю и левую стороны сетки разбивают ее в 2 строк и 2 столбцов.
От Панель элементовперетащите a Label мониторинг к каждой из ячеек в верхней строке сетки.

На этом этапе можно задать макет элемента управления, чтобы расположить элементы в сетке. Вместо этого можно изменить расширяемый язык XAML напрямую, так как элемент управления автоматически изменяет размер в соответствии с размером текста.
в язык XAML панель, необходимо задать высоту RowDefinition элементы и ширина ColumnDefinition элементы "auto".
Правка разметки для кнопки и 2 меток для напоминать следующий пример.
```
<Button Content="Reset" Name="button1" Click="button1_Click" Grid.Row="1" Grid.ColumnSpan="2" />
<Label Content="{Binding Text}" Grid.Row="0" Grid.Column="0" Name="label1" />
<Label Content="{Binding Count}" Grid.Row="0" Grid.Column="1" Name="label2" />
```
Grid.Row и Grid.Column атрибуты задают положение элементов в сетке. Grid.ColumnSpan атрибут на кнопке включает первый столбец, подлежащий изменению размера независимо от ширины кнопки.

Content атрибуты меток используют a {Binding} синтаксис для привязки к свойствам, которые будут определены позже в данном пошаговом руководстве.

Кодировать пользовательский элемент управления

Счетчик элемент управления предоставляет метод для приращения счетчика событие, создаваемое, когда счетчик увеличивается, a Сброс кнопка и 3 свойства для хранения текущий объем, отображаемый текст и следует ли отображать или скрывать Сброс кнопка. ProvideTolboxControl атрибут определяет, где в Панель элементовСчетчик элемент управления отображается.

Можно написать этот элемент управления таким же образом следует написать элемент управления Windows Forms, т е с помощью обработчиков событий и методов, открытый для задания содержимого меток. Однако в WPF можно задать контекст данных для элемента управления, чтобы привязать атрибуты элемента XAML напрямую к свойствам в коде. Эта модель также обеспечивает уровень абстракции для разделения основные функциональные возможности пользовательского интерфейса (из элемента управления пользовательского интерфейса).

В этом пошаговом руководстве показано, как создать класс модели данных, а затем связывает контекст данных элемента управления в модели данных.

Создание модели данных

Дважды нажмите кнопку, чтобы открыть окно кода.
В верхней части файла добавьте a using для директива System.ComponentModel пространство имен.
После созданного класса, создайте открытый класс для определения контекста данных.
```
public class MyDataModel : INotifyPropertyChanged
```
Этот класс реализует INotifyPropertyChanged интерфейс, который позволяет элементам XAML для привязки к конкретным свойствам.
Щелкните правой кнопкой мыши INotifyPropertyChanged объявление интерфейса, нажмите кнопку Реализовать интерфейс, а затем нажмите кнопку Реализовать интерфейс опять-таки.

Объявляет a Visual Studio PropertyChanged событие.

После объявления события, создайте следующий закрытый метод для вызова события.

public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, 
            new PropertyChangedEventArgs(propertyName));
    }
}

Создайте следующие закрытые поля и открытые свойства для хранения значений 2 меток в элементе управления.
```
private string text = "Count:";
public string Text
{
    get { return this.text; }
    set
    {
        this.text = value;
        RaisePropertyChanged("Text");
    }
}

private int count = 0;
public int Count
{
    get { return this.count; }
    set
    {
        this.count = value;
        RaisePropertyChanged("Count");
    }
}
```
Создание PropertyChanged событие вызывает привязки XAML обновить содержимое связанных элементов управления. Настройка свойств как public делает их доступными в конструктор, но не к другим программам, если они не будут выполнять привязку к этому контексту данных.

Теперь, после создания модели данных, можно реализовать код программной части функциональными возможностями элемента управления.

Реализация элемента управления

Определение разделяемого класса, который реализует элемент управления, щелкните правой кнопкой мыши щелкните имя класса Рефакторингщелкните Переименовать, а затем измените имя класса Счетчик. Это имя, которое будет отображаться на Панель элементов если расширение устанавливается.
Непосредственно перед определением класса, в ProvideToolboxControl объявление атрибута изменяет значение первого параметра из "Счетчик" В "Общие". Это задает имя номенклатурной группы, которая будет узел элемента управления Панель элементов.

В следующем примере показан ProvideToolboxControl атрибут и скорректированное определение класса.
```
[ProvideToolboxControl("General", true)]
public partial class Counter : UserControl
```
Создайте закрытое поле для хранения контекст данных для элемента управления и затем в конструкторе, присвойте контекст данных MyDataModel класс, как показано в следующем примере.
```
private MyDataModel dm;
public Counter()
{
    this.DataContext = new MyDataModel();
    dm = (MyDataModel)DataContext;
    InitializeComponent();            
}
```
Создайте следующие открытые свойства для зеркального отображения Text и Count свойства из контекста данных.
```
public string Text
{
    get { return dm.Text; }
    set { dm.Text = value; }
}

public int Count { get { return dm.Count; } }
```
Эти свойства позволяют содержимое из доступного контекста данных к любому приложению, включающий в себя элемент управления.
Создайте следующий открытый метод, для которого следует выполнить приращение счетчика и события для оповещения приложение размещения.
```
public event EventHandler Incremented;
public void Increment()
{
    dm.Count ++;
    if (Incremented != null)
    {
        Incremented(this, EventArgs.Empty);
    }
}
```
Реализуйте обработчик click для Сброс кнопка выглядит следующим образом.
```
private void button1_Click(object sender, RoutedEventArgs e)
{
    dm.Count = 0;
}
```
Добавьте следующее открытое свойство, чтобы показать или скрыть Сброс кнопка.
```
public Visibility ShowReset
{
    get { return button1.Visibility; }
    set { button1.Visibility = value; }
}
```

Проверка элемента управления

Тестирование a Панель элементов наблюдение за первый тест в интегрированной среде разработки, а затем проверьте его в приложении размещения.

Чтобы протестировать элемент управления

Нажмите клавишу F5.

Это создает проект и открывается второй экземпляр Visual Studio, установленный элемент управления.
В новом экземпляре Visual Studio создайте проект приложения WPF.
IN Обозреватель решенийдважды щелкните MainWindow.xaml, чтобы открыть его в конструкторе.
От Общие раздел Панель элементовперетащите a Счетчик элемент управления в форму, а затем выберите его.

Text и ShowReset свойства должны отображаться в Свойства окно вместе с другими свойствами унаследованными от UserControl. Count свойства не должно отображаться, поскольку он только для чтения.
Измените значение свойства Text.

Текст метки, отображаемые в конструкторе изменяется.
Установка ShowReset свойство Hiddenи задайте его обратно к Visible.

Сброс кнопка в элементе управления должна исчезнуть, а затем снова появляться.
Перетащите a Button устанавливайте его элементов управления в форму Contentатрибут Тест, а затем дважды нажмите кнопку, чтобы открыть его обработчик в представлении кода.
Реализуйте обработчик щелчка для вызова Increment метод элемента управления.
```
private void button1_Click(object sender, RoutedEventArgs e)
{
    counter1.Increment();
}
```
В функции конструктора, после вызова InitializeComponentтип counter1.Implemented +=, а затем дважды нажмите клавишу ключ tab, чтобы создать обработчик для Counter.Incremented событие.

Реализуйте новый обработчик, как показано в следующем примере.

public MainWindow()
{
    InitializeComponent();
    counter1.Incremented += new EventHandler(counter1_Incremented);
}

void counter1_Incremented(object sender, EventArgs e)
{
    button1.Opacity -= .2;
}

Нажмите клавишу F5.

Должно открыться приложение WPF.
Выберите Тест.

Счетчик увеличивается и должен кнопку должна увянуть незначительно.
Нажать Тест 4 больше времени.

Счетчик увеличивается и должен увянуть кнопка должна продолжаться до тех пор, пока она не будет исчезать. Если продолжить щелкните, где кнопка была счетчик увеличивается следует продолжить.
Нажмите кнопку Сброс.

В должен сбросить счетчик 0.

Следующие действия

При построении a Панель элементов элемент управления, Visual Studio создает файл Название проектаvsix в папку \ bin \ \ отладки проекта. Можно развернуть элемент управления, передав файл vsix в сети или на веб-сайте. Когда пользователь открывает файл vsix, элемент управления устанавливается и добавляется в Visual Studio Панель элементов. Кроме того, при передаче в vsix-файл коллекция Visual Studio Веб-сайт, чтобы пользователи могли найти, открыв in Диспетчер расширений.

См. также

Поделиться через