Passo a passo: Criando um controle de caixa de ferramentas do WPF

Artigo
05/18/2015

O modelo de controle de caixa de ferramentas do WPF que está incluído no SDL do Visual Studio 2010 permite que você crie controles de Windows Presentation Foundation (WPF) que são adicionados automaticamente para o caixa de ferramentas quando a extensão está instalada. Esta explicação passo a passo mostra como usar o modelo para criar um controle de contador que você pode distribuir para outros usuários.

Pré-requisitos

Para concluir este passo a passo, você deve instalar o SDL do Visual Studio 2010.

Dica

Para obter mais informações sobre o SDK de Visual Studio, consulte Ampliando a visão geral de Visual Studio.Para descobrir como fazer o download do SDK do Visual Studio, consulte Visual Studio extensibilidade Developer Center no site do MSDN.

Localizando o modelo de controle de caixa de ferramentas do WPF em Visual Studio

O modelo de controle de caixa de ferramentas do WPF está disponível na Novo projeto caixa de diálogo, em Installed Templates, nos seguintes locais:

Visual Basic, extensibilidade. O idioma do projeto é Visual Basic.
Visual C#, extensibilidade. O idioma do projeto é C#.

Criando um projeto de controle de caixa de ferramentas do WPF

O modelo de controle de caixa de ferramentas do WPF cria um controle de usuário indefinido e fornece toda a funcionalidade necessária para adicionar o controle para o caixa de ferramentas.

Para criar o projeto

No menu File, clique em New, e em seguida, clique em Project
No Novo projeto caixa de diálogo, em Modelos instalados, clique no nó de sua linguagem de programação preferida e, em seguida, selecione extensibilidade. Na lista de tipos de projeto, selecione O controle de caixa de ferramentas do WPF.
No nome , digite o nome que você deseja usar para o projeto. (Este passo a passo usa o nome contador.) Clique em OK.

Isso cria uma solução que contém um controle de usuário, um atributo para colocar o controle no caixa de ferramentas, e um VSIX de manifesto de implantação. O nome caixa define o nome da solução e o nome do namespace, mas ele não define o nome do controle como ele aparece no caixa de ferramentas. Você irá definir que posteriormente na explicação.

Criar uma Interface do usuário para o controle

O contador controle requer três controles filho: dois Label controles para exibir o texto e a contagem atual e um Button o controle para redefinir a contagem para 0. Outros controles de filho são necessários, pois a hospedagem de aplicativos incrementará o contador programaticamente.

Para criar a interface do usuário

Em Solution Explorer, clique duas vezes em ToolboxControl.cs para abri-lo no designer.

O designer mostra uma Grid controle que contém um Button controle.
Selecione o Grid de controle e, em seguida, clique nas barras azuis que aparecem nos lados superior e esquerdos da grade dividi-la em duas linhas e duas colunas.
Do caixa de ferramentas, arraste um Label controle para cada uma das células na linha superior da grade.

Neste ponto, você poderia definir o layout do controle organizando os elementos na grade. Em vez disso, você pode editar o XAML Extensible Application Markup Language () diretamente para que o controle será redimensionado dinamicamente para ajustar o texto.
No XAML painel, definir a altura da RowDefinition elementos e a largura da ColumnDefinition elementos para "auto".
Edite a marcação para o botão e os dois rótulos para se parecer com o exemplo a seguir.
```
<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" />
```
O Grid.Row e Grid.Column atributos definir a posição dos elementos na grade. O Grid.ColumnSpan atributo no botão permite que a primeira coluna ser redimensionada independentemente da largura do botão.

O Content atributos do uso de rótulos um {Binding} sintaxe para vincular propriedades que você definirá posteriormente na explicação.

Codificar o controle de usuário

O contador controle irá expor um método para incrementar o contador, um evento a ser gerado sempre que o contador é incrementado, um Redefinir botão e três propriedades para armazenar o texto de exibição, a contagem atual e mostrar ou ocultar o Redefinir botão. O ProvideTolboxControl atributo determina onde na caixa de ferramentas a contador controle será exibido.

Você poderia escrever esse controle da mesma maneira, que você escreveria um controle Windows Forms, isto é, usando manipuladores de eventos e métodos públicos para definir o conteúdo dos rótulos. No entanto, no WPF você pode definir um contexto de dados para o controle para que você pode vincular os atributos do elemento XAML diretamente para propriedades no código. Esse modelo também fornece uma camada de abstração para separar a principal funcionalidade da interface do usuário (UI) do controle.

Esta explicação passo a passo mostra como criar uma classe de modelo de dados e, em seguida, vincule o contexto de dados do controle para o modelo de dados.

Para criar um modelo de dados

Clique duas vezes no botão para abrir a janela de código.
Na parte superior do arquivo, adicione um using diretriz para o System.ComponentModel espaço para nome.
Após a classe gerada, crie uma classe pública para definir o contexto de dados.
```
public class MyDataModel : INotifyPropertyChanged
```
Essa classe implementa o INotifyPropertyChanged interface, que permite que os elementos XAML ligar a definição de propriedades.
Com o botão direito do INotifyPropertyChanged declaração de interface, clique em Implementar Interfacee, em seguida, clique em Implementar Interface novamente.

Visual Studio declara um PropertyChanged evento.

Após a declaração de evento, crie o seguinte método privado para disparar o evento.

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

Crie os seguintes campos particulares e propriedades públicas para armazenar os valores das duas etiquetas no controle.
```
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");
    }
}
```
Aumentando a PropertyChanged evento faz com que a ligação XAML atualizar o conteúdo dos controles acoplados. Definir as propriedades como public fiquem disponíveis para os designer, mas não para outros programas, a menos que eles ligam para este contexto de dados.

Agora que você criou o modelo de dados, você pode implementar a funcionalidade de code-behind do controle.

Implementar o controle

A definição da classe parcial que implementa o controle, clique com o botão direito no nome de classe, clique em Refactor, clique em Renomeare, em seguida, altere o nome da classe para contador. Este é o nome que será exibido na caixa de ferramentas quando a extensão está instalada.
Imediatamente acima da definição de classe, no ProvideToolboxControl a declaração de atributo, altere o valor do primeiro parâmetro de "Counter" para "General". Isso define o nome do grupo de itens que irá hospedar o controle no caixa de ferramentas.

A exemplo a seguir mostra a ProvideToolboxControl atributo e a definição de classe ajustado.
```
[ProvideToolboxControl("General", true)]
public partial class Counter : UserControl
```
Criar um campo privado para manter o contexto de dados para o controle e no construtor, atribua o contexto de dados para o MyDataModel de classe, conforme mostrado no exemplo a seguir.
```
private MyDataModel dm;
public Counter()
{
    this.DataContext = new MyDataModel();
    dm = (MyDataModel)DataContext;
    InitializeComponent();            
}
```
Criar as seguintes propriedades públicas para espelhar a Text e Count propriedades de contexto de dados.
```
public string Text
{
    get { return dm.Text; }
    set { dm.Text = value; }
}

public int Count { get { return dm.Count; } }
```
Essas propriedades fazem com que o conteúdo a partir do contexto de dados disponíveis para qualquer aplicativo que inclui o controle.

Crie o seguinte método público para incrementar o contador e um evento para notificar o aplicativo de hospedagem.

public event EventHandler Incremented;
public void Increment()
{
    dm.Count ++;
    if (Incremented != null)
    {
        Incremented(this, EventArgs.Empty);
    }
}

Implementar o manipulador click para o Redefinir botão da seguinte maneira.

private void button1_Click(object sender, RoutedEventArgs e)
{
    dm.Count = 0;
}

Adicione a seguinte propriedade pública para mostrar ou ocultar o Redefinir botão.

public Visibility ShowReset
{
    get { return button1.Visibility; }
    set { button1.Visibility = value; }
}

Testando o controle

Para testar um caixa de ferramentas controle, primeiro testá-lo no ambiente de desenvolvimento e teste-o em um aplicativo de hospedagem.

Para testar o controle

Pressione F5.

Isso cria o projeto e abre uma segunda instância do Visual Studio que tem o controle instalado.
Na nova instância de Visual Studio, crie um projeto de aplicativo do WPF.
Em Solution Explorer, clique duas vezes em MainWindow. XAML para abri-lo no designer.
Do Geral seção o Toolbox, arraste um contador controle ao formulário e, em seguida, selecioná-lo.

O Text e ShowReset propriedades devem ser exibidas na Propriedades janela, juntamente com outras propriedades herdadas do UserControl. O Count propriedade não deve ser exibida porque é somente leitura.
Alterar o valor da Text propriedade.

Altere o texto do rótulo é exibido no designer.
Definir o ShowReset propriedade para Hiddene defina-o novamente para Visible.

O Redefinir botão no controle deve desaparecer e, em seguida, aparecer mais.
Arrastar um Button o controle para o formulário, defina seu Contentde atributo para testee, em seguida, clique duas vezes no botão para abrir o seu manipulador de clique no modo de exibição de código.

Implementar o manipulador click para chamar o Increment método do controle.

private void button1_Click(object sender, RoutedEventArgs e)
{
    counter1.Increment();
}

Na função do construtor, após a chamada para InitializeComponent, tipo counter1.Implementado + =e então pressione a tecla TAB duas vezes para gerar um manipulador para o Counter.Incremented evento.

Implemente o novo manipulador, conforme mostrado no exemplo a seguir.

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

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

Pressione F5.

O aplicativo WPF deve ser aberto.
Clique em teste.

O contador deve ser incrementada e o botão deve desaparecer um pouco.
Clique em teste quatro vezes mais.

O contador deve ser incrementada e o botão deve continuar esmaecer até que desapareça. Se você continuar clicando em onde o botão foi, o contador deve continuar a incrementar.
Clique em Redefinir.

O contador deve ser redefinido como 0.

Próximas etapas

Quando você constrói uma caixa de ferramentas Visual Studio de controle, cria um arquivo chamado ProjectName.vsix na pasta \bin\debug\ do seu projeto. Você pode implantar o controle carregando o arquivo de .vsix a uma rede ou um site da Web. Quando um usuário abre o arquivo .vsix, o controle é instalado e adicionado ao Visual Studio caixa de ferramentas. Como alternativa, se você carregar o arquivo .vsix para o Galeria de Visual Studio site da empresa para que os usuários podem encontrar navegando no Extension Manager.

Consulte também

Compartilhar via