Пошаговое руководство. Реализация границы в элементе управления
Обновлен: Ноябрь 2007
В данном примере показано, как создать графический элемент «граница» для пользовательского элемента управления Windows Presentation Foundation (WPF). Графический элемент «граница» добавляет маркер или линейку вдоль одной стороны элемента управления, который не масштабируется по одной оси. Графический элемент является ползунком, который размещается в элементе управления. Этот графический элемент можно использовать при задании значения свойства RenderTransform для пользовательского элемента управления «кнопка». Установка значения свойства RenderTransform вызывает наклон элемента управления. Полный листинг кода см. в разделе Практическое руководство. Реализация границы в элементе управления.
В данном пошаговом руководстве выполняются следующие задачи.
Создание проекта библиотеки настраиваемых элементов управления WPF.
Создание отдельной сборки для метаданных времени разработки.
Реализация поставщика графических элементов.
Тестирование элемента управления во время разработки.
В результате будет полностью описан процесс создания графического элемента для настраиваемого элемента управления.
Примечание. |
---|
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или версии среды. Для изменения параметров выберите пункт Импорт и экспорт параметров в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio. |
Обязательные компоненты
Ниже приведены компоненты, которые необходимы для выполнения данного пошагового руководства.
- Visual Studio 2008.
Создание настраиваемого элемента управления
Первым этапом является создание проекта для настраиваемого элемента управления. Этот элемент управления представляет собой простую кнопку, созданную с помощью небольшого количества кода, в котором для реализации поведения во время разработки используется метод GetIsInDesignMode.
Создание настраиваемого элемента управления
Создайте новый проект WPF библиотеки настраиваемых элементов управления на языке Visual Basic или Visual C# с именем SkewButtonLibrary.
Код для CustomControl1 откроется в редакторе кода.
В обозревателе решений измените имя файла с кодом на SkewButton.cs или SkewButton.vb. Если появляется окно сообщения, запрашивающее подтверждение переименования всех ссылок в этом проекте, нажмите кнопку Да.
В обозревателе решений разверните папку «Themes».
Дважды щелкните файл Generic.xaml.
Файл Generic.xaml откроется в WPF (конструктор).
В представлении XAML замените все вхождения «CustomControl1» на «SkewButton».
Откройте файл SkewButton.cs или SkewButton.vb в редакторе кода.
Замените автоматически создаваемый код на следующий код. Настраиваемый элемент управления SkewButton является производным от класса Button и отображает текст «Режим разработки активен», когда кнопка появляется в конструкторе. Проверка GetIsInDesignMode и следующий код времени разработки являются необязательными и приведены только для демонстрации.
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"; } } } }
Задайте выходной путь проекта как «bin\».
Выполните построение решения.
Создание сборки метаданных времени разработки
Код времени разработки развертывается в специальных сборках метаданных. В данном примере пользовательский графический элемент развертывается в сборке с именем SkewButtonLibrary.VisualStudio.Design. Дополнительные сведения см. в разделе Хранилище метаданных.
Создание сборки метаданных времени разработки
Добавьте к решению новый проект библиотеки классов на языке Visual Basic или Visual C# с именем SkewButtonLibrary.VisualStudio.Design.
Задайте выходной путь проекта как «.. \SkewButtonLibrary\bin\». В этом случае сборка элемента управления и сборка метаданных будут находиться в одной папке, что обеспечит доступ конструкторов к метаданным.
Добавьте ссылки на следующие сборки WPF:
PresentationCore
PresentationFramework
WindowsBase
Добавьте ссылки на следующие сборки WPF (конструктор):
Microsoft.Windows.Design
Microsoft.Windows.Design.Extensibility
Microsoft.Windows.Design.Interaction
Добавьте ссылку на проект SkewButtonLibrary.
В обозревателе решений измените имя файла с кодом «Class1» на Metadata.cs или Metadata.vb. Если появляется окно сообщения, запрашивающее подтверждение переименования всех ссылок в этом проекте, нажмите кнопку Да.
Замените автоматически создаваемый код на следующий код. Этот код создает таблицу AttributeTable, которая присоединяет пользовательскую реализацию времени разработки к классу 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()); } } }
Сохраните решение.
Реализация поставщика графических элементов
Поставщик графических элементов реализован в типе с именем SkewButtonAdornerProvider. Этот поставщик графических элементов FeatureProvider включает настройку свойства RenderTransform элемента управления во время разработки.
Реализация поставщика графических элементов
Добавьте новый класс с именем SkewButtonAdornerProvider к проекту SkewButtonLibrary.VisualStudio.Design.
В редакторе кода для поставщика SkewButtonAdornerProvider замените автоматически создаваемый код на следующий код. Этот код реализует поставщик PrimarySelectionAdornerProvider, который предоставляет пользовательский графический элемент.
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; } } }
Выполните построение решения.
Тестирование реализации времени разработки
Элемент управления SkewButton можно использовать как любой другой элемент управления WPF. WPF (конструктор) управляет созданием всех объектов времени разработки.
Тестирование реализации времени разработки
Добавьте к решению новый проект приложения WPF с именем DemoApplication.
В WPF (конструктор) откроется файл Window1.xaml.
Добавьте ссылку на проект SkewButtonLibrary.
В представлении XAML замените автоматически создаваемый код на следующий код. Этот код XAML добавляет ссылку на пространство имен SkewButtonLibrary и добавляет настраиваемый элемент управления SkewButton. Кнопка появляется в представлении конструктора с текстом «Режим разработки активен», обозначающим включение режима разработки. Если кнопка не отображается, щелкните панель информации в верхней части конструктора для перезагрузки представления.
<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>
В представлении конструктора выберите элемент управления SkewButton.
Элемент управления Slider находится внутри элемента управления SkewButton. Если ползунок не отображается, попробуйте заново построить решение.
Измените значение элемента управления «ползунок».
Элемент управления наклоняется по мере перетаскивания ползунка. В представлении XAML свойству RenderTransform присвоено значение, указанное графическим элементом.
Запустите проект «DemoApplication».
Во время выполнения кнопка наклонена под углом, установленным при помощи графического элемента.
Следующие действия
Можно добавить дополнительные настраиваемые компоненты времени разработки для настраиваемых элементов управления.
Добавьте пользовательский графический элемент к элементу управления времени разработки. Дополнительные сведения см. в разделе Пошаговое руководство. Создание графического элемента времени разработки.
Создайте поставщик графического элемента для редактирования «на месте». Дополнительные сведения см. в разделе Пошаговое руководство. Реализация редактирования по месту.
Создайте пользовательский редактор цвета, который можно использовать в окне «Свойства». Дополнительные сведения см. в разделе Пошаговое руководство. Реализация редактора цвета.
См. также
Задачи
Практическое руководство. Реализация границы в элементе управления
Ссылки
PrimarySelectionAdornerProvider