Demonstra Passo a passo: Implementando um trilho dentro de um controle
Essa explicação passo a passo mostra como criar um adorno em tempo de design de um controle personalizado Windows Presentation Foundation (WPF).Um adorner Rail adiciona um marcador ou regra ao longo um lado de um controle que é Não dimensionamento em um único eixo.O adorner é um controle deslizante, que é colocado dentro do controle.Você pode usar este adorner para definir a propriedade RenderTransform em um controle de botão personalizado.A configuração da propriedade RenderTransform inclina o controle.Para obter uma lista completa de código, consulte Como: Implementar um trilho dentro de um controle.
Nesta explicação passo a passo, você executa as seguintes tarefas:
Criar um projeto de biblioteca de controle personalizado WPF .
Criar um conjunto de módulos (assembly) separado de metadados em tempo de design.
Implementar o provedor de adorno.
Testar o controle em tempo de design.
Quando você terminar, você saberá como criar um provedor de adorno para um controle personalizado.
Observação: |
---|
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio. |
Pré-requisitos
Para completar este passo a passo, são necessários os seguintes componentes:
- Visual Studio 2008.
Criando o Controle Personalizado
A primeira etapa é criar o projeto para o controle personalizado.O controle é um botão simples com pequena quantidade de código em tempo de design, que usa o método GetIsInDesignMode para implementar um comportamento de tempo de design.
Para criar o controle personalizado
Criar um novo projeto Biblioteca de controle personalizado WPF em Visual Basic ou Visual C# chamado SkewButtonLibrary .
O código de CustomControl1 abre no Editor de Códigos.
In O gerenciador de soluções, altere o nome do arquivo de código para SkewButton.cs ou SkewButton.vb.Se um caixa de mensagem aparecer que pergunta se você deseja executar uma renomeação para todas as referências no projeto atual, clique em Sim .
Em Gerenciador de Soluções, expanda a pasta Temas.
Clique duas vezes em Generic.xaml.
Generic.xaml é aberto no WPF Designer.
No modo de exibição XAML, substitua todas as ocorrências de "CustomControl1" com "ButtonWithDesignTime".
Abra SkewButton.cs ou SkewButton.vb no Editor de Códigos.
Substitua o código gerado automaticamente pelo código a seguir.O controle personalizado SkewButton herda de Button e exibe o texto "modo de design ativo" quando o botão aparece no designer.A marca GetIsInDesignMode e o seguinte código em tempo de design são opcionais e são mostrados apenas para demonstração.
Imports System Imports System.Collections.Generic Imports System.Text Imports System.Windows.Controls Imports System.Windows.Media Imports System.ComponentModel ' The SkewButton control implements a button ' with a skew transformation applied. Public Class SkewButton Inherits Button Public Sub New() ' The following code enables custom design-mode logic. ' The GetIsInDesignMode check and the following design-time ' code are optional and shown only for demonstration. If DesignerProperties.GetIsInDesignMode(Me) Then Content = "Design mode active" End If End Sub End Class
using System; using System.Collections.Generic; using System.Text; using System.Windows.Controls; using System.Windows.Media; using System.ComponentModel; namespace SkewButtonLibrary { // The SkewButton control implements a button // with a skew transformation applied. public class SkewButton : Button { public SkewButton() { // The following code enables custom design-mode logic. // The GetIsInDesignMode check and the following design-time // code are optional and shown only for demonstration. if (DesignerProperties.GetIsInDesignMode(this)) { Content = "Design mode active"; } } } }
Defina o caminho de saída do projeto para "bin\".
Crie a solução.
Criando o Conjunto de Módulos (Assembly) de Metadados em Tempo de Design
Código em tempo de design é implantado em conjuntos de módulos (assemblies) de metadados especiais.Para esta explicação passo a passo, adorno personalizado é implantado em um assembly chamado SkewButtonLibrary.VisualStudio.Design.Para obter mais informações, consulte Armazenamento de metadados.
Para criando o conjunto de módulos (assembly) de metadados em tempo de design
Adicione um novo projeto de biblioteca de classes no Visual Basic ou Visual C# denominado CustomControlLibrary.VisualStudio.Design à solução.
conjunto caminho de saída do projeto para "..\SkewButtonLibrary\bin\ ".Isso mantém o conjunto de módulos (assembly) do controle e o conjunto de módulos (assembly) de metadados na mesma pasta, o que permite a descoberta de metadados para os designers.
Adicione referências para os seguintes conjuntos de módulos (assemblies) WPF.
PresentationCore
PresentationFramework
WindowsBase
Adicione referências para os seguintes conjuntos de módulos (assemblies) WPF Designer:
Microsoft.Windows.Design
Microsoft.Windows.Design.Extensibility
Microsoft.Windows.Design.Interaction
Adicione uma referência para o projeto de controle da Web.
Em Gerenciador de Soluções, altere o nome do arquivo de código Class1 para Metadata.cs ou Metadata.vb.Se um caixa de mensagem aparecer que pergunta se você deseja executar uma renomeação para todas as referências no projeto atual, clique em Sim .
Substitua o código gerado automaticamente pelo código a seguir.Esse código cria um AttributeTable que anexa a implementação personalizada em tempo de design à classe SkewButton.
Imports System Imports System.Collections.Generic Imports System.Text Imports System.ComponentModel Imports System.Windows.Media Imports System.Windows.Controls Imports System.Windows Imports Microsoft.Windows.Design.Features Imports Microsoft.Windows.Design.Metadata Imports SkewButtonLibrary.VisualStudio.Design Imports SkewButtonLibrary ' Container for any general design-time metadata to initialize. ' Designers look for a type in the design-time assembly that ' implements IRegisterMetadata. If found, designers instantiate ' this class and call its Register() method automatically. Friend Class Metadata Implements IRegisterMetadata ' Called by the designer to register any design-time metadata. Public Sub Register() Implements IRegisterMetadata.Register Dim builder As New AttributeTableBuilder() ' Add the adorner provider to the design-time metadata. builder.AddCustomAttributes(GetType(SkewButton), New FeatureAttribute(GetType(SkewButtonAdornerProvider))) MetadataStore.AddAttributeTable(builder.CreateTable()) End Sub End Class
using System; using System.Collections.Generic; using System.Text; using System.ComponentModel; using System.Windows.Media; using System.Windows.Controls; using System.Windows; using SkewButtonLibrary; using Microsoft.Windows.Design.Features; using Microsoft.Windows.Design.Metadata; using SkewButtonLibrary.VisualStudio.Design; namespace CiderPropertiesTester { // Container for any general design-time metadata to initialize. // Designers look for a type in the design-time assembly that // implements IRegisterMetadata. If found, designers instantiate // this class and call its Register() method automatically. internal class Metadata : IRegisterMetadata { // Called by the designer to register any design-time metadata. public void Register() { AttributeTableBuilder builder = new AttributeTableBuilder(); // Add the adorner provider to the design-time metadata. builder.AddCustomAttributes( typeof(SkewButton), new FeatureAttribute(typeof(SkewButtonAdornerProvider))); MetadataStore.AddAttributeTable(builder.CreateTable()); } } }
Salve a solução.
Implementando o Provedor de Adorno.
O provedor de adorno é implementado em um tipo denominado SkewButtonAdornerProvider.Este adorner FeatureProvider permite definir o controle da RenderTransform propriedade em tempo de design.
Para implementar o provedor de adorno.
Adicione uma nova classe denominada SkewButtonAdornerProvider ao projeto CustomControlLibrary.Design.
No Editor de Códigos de SkewButtonAdornerProvider, substitua o código gerado automaticamente pelo código a seguir.Esse código implementa um PrimarySelectionAdornerProvider que fornece uma adorner personalizado.
Imports System Imports System.Collections.Generic Imports System.Text Imports System.Windows.Input Imports System.Windows Imports System.Windows.Automation Imports System.Windows.Controls Imports System.Windows.Media Imports System.Windows.Shapes Imports Microsoft.Windows.Design.Interaction Imports Microsoft.Windows.Design.Model ' The following class implements an adorner provider for the ' SkewButton control. The adorner is a slider control, which ' changes the SkewTransform of the SkewButton along the x-axis. ' The adorner is placed inside the adorned control. Class SkewButtonAdornerProvider Inherits PrimarySelectionAdornerProvider Private adornedControlModel As ModelItem Private batchedChange As ModelEditingScope Private skewSlider As Slider Private skewSliderAdornerPanel As AdornerPanel Public Sub New() skewSlider = New Slider() End Sub ' The following method is called when the adorner is activated. ' It creates the adorner control, sets up the adorner panel, ' and attaches a ModelItem to the SkewButton. Protected Overrides Sub Activate(ByVal item As ModelItem, ByVal view As DependencyObject) ' Save the ModelItem and hook into when it changes. ' This enables updating the slider position when ' a new background value is set. adornedControlModel = item AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged ' Setup the slider's min and max values. skewSlider.Minimum = 0 skewSlider.Maximum = 45 ' Set the slider's background to the rail fill color. skewSlider.Background = AdornerColors.RailFillBrush ' All adorners are placed in an AdornerPanel ' for sizing and layout support. Dim panel As AdornerPanel = Me.Panel ' Place the slider in the adorner panel. Dim placement As New AdornerPlacementCollection() AdornerPanel.SetHorizontalStretch(skewSlider, AdornerStretch.Stretch) AdornerPanel.SetVerticalStretch(skewSlider, AdornerStretch.None) ' Use layout space for the adorner panel. ' If render space were used, the slider would skew along with the button. panel.CoordinateSpace = AdornerCoordinateSpaces.Layout ' The adorner's width is relative to the content. ' The slider extends half the width of the control it adorns. placement.SizeRelativeToContentWidth(0.5, 0) ' Center the adorner within the control. placement.PositionRelativeToAdornerWidth(0.5, 0) ' The adorner's height is the same as the slider's. placement.SizeRelativeToAdornerDesiredHeight(1.0, 0) ' Position the adorner within the control it adorns. placement.PositionRelativeToAdornerHeight(1.0, 0) AdornerPanel.SetPlacements(skewSlider, placement) ' Initialize the slider when it is loaded. AddHandler skewSlider.Loaded, AddressOf slider_Loaded ' Handle the value changes of the slider control. AddHandler skewSlider.ValueChanged, AddressOf slider_ValueChanged AddHandler skewSlider.PreviewMouseLeftButtonUp, AddressOf slider_MouseLeftButtonUp AddHandler skewSlider.PreviewMouseLeftButtonDown, AddressOf slider_MouseLeftButtonDown ' Run the base implementation. MyBase.Activate(item, view) End Sub ' The Panel utility property demand-creates the ' adorner panel and adds it to the provider's ' Adorners collection. Public ReadOnly Property Panel() As AdornerPanel Get If Me.skewSliderAdornerPanel Is Nothing Then Me.skewSliderAdornerPanel = New AdornerPanel() ' Add the adorner to the adorner panel. Me.skewSliderAdornerPanel.Children.Add(skewSlider) ' Add the panel to the Adorners collection. Adorners.Add(skewSliderAdornerPanel) End If Return Me.skewSliderAdornerPanel End Get End Property ' The following method deactivates the adorner. Protected Overrides Sub Deactivate() RemoveHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged MyBase.Deactivate() End Sub ' The following method handles the Loaded event. ' It assigns the slider control's initial value. Sub slider_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) skewSlider.Value = GetCurrentSkewAngle() End Sub ' The following method handles the PropertyChanged event. ' It updates the slider control's value tf the SkewButton control's ' RenderTransform property changed, Sub AdornedControlModel_PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) If e.PropertyName = "RenderTransform" Then ' Assign the SkewButton control's skew angle to the slider. skewSlider.Value = GetCurrentSkewAngle() End If End Sub ' The following method handles the MouseLeftButtonDown event. ' It calls the BeginEdit method on the ModelItem which represents the ' Skewcontrol. Sub slider_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) batchedChange = adornedControlModel.BeginEdit() End Sub ' The following method handles the MouseLeftButtonUp event. ' It commits any changes made to the ModelItem which represents the ' Skewcontrol. Sub slider_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) If Not (batchedChange Is Nothing) Then batchedChange.Complete() batchedChange.Dispose() batchedChange = Nothing End If End Sub ' The following method handles the slider control's ' ValueChanged event. It sets the value of the ' RenderTransform property by using the ModelProperty ' type. Sub slider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double)) Dim newSkewValue As Double = e.NewValue ' During setup, don't make a value local and set the skew angle. If newSkewValue = GetCurrentSkewAngle() Then Return End If ' Access the SkewButton control's RenderTransform property ' by using the ModelProperty type. Dim skewProperty As ModelProperty = adornedControlModel.Properties(Control.RenderTransformProperty) If Not skewProperty.IsSet Then ' If the value isn't local, make it local ' before setting a sub-property value. skewProperty.SetValue(skewProperty.ComputedValue) End If ' Set the RenderTransform property on the SkewButton. skewProperty.SetValue(New SkewTransform(newSkewValue, 0)) End Sub ' This utility method gets the SkewControl control's ' skew angle by using the ModelItem. Private Function GetCurrentSkewAngle() Dim skewXform As SkewTransform = adornedControlModel.Properties(Control.RenderTransformProperty).ComputedValue Return skewXform.AngleX End Function End Class
using System; using System.Collections.Generic; using System.Text; using System.Windows.Input; using System.Windows; using System.Windows.Automation; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; using Microsoft.Windows.Design.Interaction; using Microsoft.Windows.Design.Model; namespace SkewButtonLibrary.VisualStudio.Design { // The following class implements an adorner provider for the // SkewButton control. The adorner is a slider control, which // changes the SkewTransform of the SkewButton along the x-axis. // The adorner is placed inside the adorned control. class SkewButtonAdornerProvider : PrimarySelectionAdornerProvider { private ModelItem adornedControlModel; private ModelEditingScope batchedChange; private Slider skewSlider; private AdornerPanel skewButtonAdornerPanel; public SkewButtonAdornerProvider() { skewSlider = new Slider(); } // The following method is called when the adorner is activated. // It creates the adorner control, sets up the adorner panel, // and attaches a ModelItem to the SkewButton. protected override void Activate(ModelItem item, DependencyObject view) { // Save the ModelItem and hook into when it changes. // This enables updating the slider position when // a new background value is set. adornedControlModel = item; adornedControlModel.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler( AdornedControlModel_PropertyChanged); // Setup the slider's min and max values. skewSlider.Minimum = 0; skewSlider.Maximum = 45; // Set the slider's background to the rail fill color. skewSlider.Background = AdornerColors.RailFillBrush; // All adorners are placed in an AdornerPanel // for sizing and layout support. AdornerPanel panel = this.Panel; // Place the slider in the adorner panel. AdornerPlacementCollection placement = new AdornerPlacementCollection(); AdornerPanel.SetHorizontalStretch(skewSlider, AdornerStretch.Stretch); AdornerPanel.SetVerticalStretch(skewSlider, AdornerStretch.None); // Use layout space for the adorner panel. // If render space were used, the slider would skew along with the button. panel.CoordinateSpace = AdornerCoordinateSpaces.Layout; // The adorner's width is relative to the content. // The slider extends half the width of the control it adorns. placement.SizeRelativeToContentWidth(0.5, 0); // Center the adorner within the control. placement.PositionRelativeToAdornerWidth(0.5, 0); // The adorner's height is the same as the slider's. placement.SizeRelativeToAdornerDesiredHeight(1.0, 0); // Position the adorner within the control it adorns. placement.PositionRelativeToAdornerHeight(1.0, 0); AdornerPanel.SetPlacements(skewSlider, placement); // Initialize the slider when it is loaded. skewSlider.Loaded += new RoutedEventHandler(slider_Loaded); // Handle the value changes of the slider control. skewSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>( slider_ValueChanged); skewSlider.PreviewMouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonUp); skewSlider.PreviewMouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonDown); // Run the base implementation. base.Activate(item, view); } // The Panel utility property demand-creates the // adorner panel and adds it to the provider's // Adorners collection. public AdornerPanel Panel { get { if (this.skewButtonAdornerPanel == null) { skewButtonAdornerPanel = new AdornerPanel(); skewButtonAdornerPanel.Children.Add(skewSlider); // Add the panel to the Adorners collection. Adorners.Add(skewButtonAdornerPanel); } return this.skewButtonAdornerPanel; } } // The following method deactivates the adorner. protected override void Deactivate() { adornedControlModel.PropertyChanged -= new System.ComponentModel.PropertyChangedEventHandler( AdornedControlModel_PropertyChanged); base.Deactivate(); } // The following method handles the Loaded event. // It assigns the slider control's initial value. void slider_Loaded(object sender, RoutedEventArgs e) { skewSlider.Value = GetCurrentSkewAngle(); } // The following method handles the PropertyChanged event. // It updates the slider control's value tf the SkewButton control's // RenderTransform property changed, void AdornedControlModel_PropertyChanged( object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (e.PropertyName == "RenderTransform") { // Assign the SkewButton control's skew angle to the slider. skewSlider.Value = GetCurrentSkewAngle(); } } // The following method handles the MouseLeftButtonDown event. // It calls the BeginEdit method on the ModelItem which represents the // Skewcontrol. void slider_MouseLeftButtonDown( object sender, System.Windows.Input.MouseButtonEventArgs e) { batchedChange = adornedControlModel.BeginEdit(); } // The following method handles the MouseLeftButtonUp event. // It commits any changes made to the ModelItem which represents the // Skewcontrol. void slider_MouseLeftButtonUp( object sender, System.Windows.Input.MouseButtonEventArgs e) { if (batchedChange != null) { batchedChange.Complete(); batchedChange.Dispose(); batchedChange = null; } } // The following method handles the slider control's // ValueChanged event. It sets the value of the // RenderTransform property by using the ModelProperty // type. void slider_ValueChanged( object sender, RoutedPropertyChangedEventArgs<double> e) { double newSkewValue = e.NewValue; // During setup, don't make a value local and set the skew angle. if (newSkewValue == GetCurrentSkewAngle()) { return; } // Access the SkewButton control's RenderTransform property // by using the ModelProperty type. ModelProperty skewProperty = adornedControlModel.Properties[Control.RenderTransformProperty]; if (!skewProperty.IsSet) { // If the value isn't local, make it local // before setting a sub-property value. skewProperty.SetValue(skewProperty.ComputedValue); } // Set the RenderTransform property on the SkewButton. skewProperty.SetValue(new SkewTransform(newSkewValue, 0)); } // This utility method gets the SkewControl control's // skew angle by using the ModelItem. private double GetCurrentSkewAngle() { SkewTransform skewXform = adornedControlModel.Properties[ Control.RenderTransformProperty].ComputedValue as SkewTransform; return skewXform.AngleX; } } }
Crie a solução.
Testando a Implementação em Tempo de Design
Você pode usar o controle SkewButton do modo como você usaria qualquer outro controle WPF.O WPF Designer trata a criação de todos os objetos em tempo de design.
Para testar a implementação em tempo de design
Adicione um projeto de aplicativos do Windows chamado WpfUserControlHost à solução.
Window1.xaml é aberto no WPF Designer.
Adicione uma referência para o projeto de controle da Web.
No modo de exibição XAML, substitua o XAML gerado automaticamente pelo seguinte XAML.Este XAML adiciona uma referência ao namespace SkewButtonLibrary e adiciona o controle personalizado SkewButton.O botão aparece no modo Design com um plano de fundo vermelho, indicando que o controle está no modo de design.Se o botão não for exibido, talvez você precise clicar na Barra de Informações na parte superior do designer para recarregar o modo de exibição.
<Window x:Class="DemoApplication.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:cc="clr-namespace:SkewButtonLibrary;assembly=SkewButtonLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:SkewButton Margin="30,30,30,30" Background="#FFD4D0C8"> <cc:SkewButton.RenderTransform> <SkewTransform AngleX="0" AngleY="0" /> </cc:SkewButton.RenderTransform> </cc:SkewButton> </Grid> </Window>
<Window x:Class="DemoApplication.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:cc="clr-namespace:SkewButtonLibrary;assembly=SkewButtonLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:SkewButton Margin="30,30,30,30" Background="#FFD4D0C8"> <cc:SkewButton.RenderTransform> <SkewTransform AngleX="0" AngleY="0" /> </cc:SkewButton.RenderTransform> </cc:SkewButton> </Grid> </Window>
No modo Design, clique no controle SkewButton para selecioná-lo.
Um controle Slider aparece acima do controle SkewButton.Se o controle deslizante não for exibido, tente recriar a solução.
Altere o valor do controle deslizante.
O controle inclina ao arrastar o controle deslizante.No modo XAML, a propriedade RenderTransform é definida para o valor especificado pelo controle .
Execute o projeto DemoApplication.
Em tempo de execução, o botão está inclinado no ângulo que é definido com o adorner.
Próximas etapas
Você pode adicionar mais recursos em tempo de design personalizados para os controles personalizados.
Adicione um adorner personalizado a tempo de design do seu controle.Para obter mais informações, consulte Demonstra Passo a passo: Criar um adorno de time de design.
Criar um provedor de adorno para edição no lugar certo.Para obter mais informações, consulte Demonstra Passo a passo: Implementação de edição no local.
Criar um editor de cores personalizado, que pode ser usado na Janela de Propriedades.Para obter mais informações, consulte Demonstra Passo a passo: Implementando um editor de cor.
Consulte também
Tarefas
Como: Implementar um trilho dentro de um controle
Referência
PrimarySelectionAdornerProvider