チュートリアル : コントロール内でのレールの実装

更新 : 2007 年 11 月

このチュートリアルでは、Windows Presentation Foundation (WPF) カスタム コントロール用のレール装飾を作成する方法について説明します。レール装飾は、コントロールの 1 つの辺にマーカーまたは規則を追加します。単一の軸に沿ったスケーリングは行われません。装飾は、コントロール内に配置されるスライダです。この装飾を使用して、カスタム ボタン コントロールの RenderTransform プロパティを設定できます。RenderTransform プロパティを設定すると、コントロールが傾斜します。完全なコードの一覧については、「方法 : コントロール内にレールを実装する」を参照してください。

このチュートリアルでは次のタスクを行います。

• WPF カスタム コントロール ライブラリ プロジェクトを作成する。

• デザイン時メタデータに対する個別のアセンブリを作成する。

• 装飾プロバイダを実装する。

• デザイン時にコントロールをテストする。

このチュートリアルを終了すると、カスタム コントロール用の装飾を作成する方法を習得できます。

メモ :
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

前提条件

このチュートリアルを完了するには、次のコンポーネントが必要です。

• Visual Studio 2008

カスタム コントロールの作成

最初に、カスタム コントロールのプロジェクトを作成します。コントロールは、デザイン時コードが少量のシンプルなボタンにします。このボタンは、GetIsInDesignMode メソッドを使用して、デザイン時動作を実装します。

カスタム コントロールを作成するには

1. Visual Basic または Visual C# で SkewButtonLibrary という名前の新しい WPF カスタム コントロール ライブラリ プロジェクトを作成します。

   コード エディタで CustomControl1 のコードが開きます。

2. ソリューション エクスプローラで、コード ファイル名を SkewButton.cs または SkewButton.vb に変更します。このプロジェクト内のすべての参照について名前を変更するかどうかをたずねるメッセージ ボックスが開いたら、[はい] をクリックします。

3. ソリューション エクスプローラで、Themes フォルダを展開します。

4. Generic.xaml をダブルクリックします。

   WPF デザイナで Generic.xaml が開きます。

5. XAML ビューで、"CustomControl1" の出現箇所をすべて "SkewButton" に置き換えます。

6. コード エディタで SkewButton.cs または SkewButton.vb を開きます。

7. 自動的に生成されたコードを次のコードに置き換えます。SkewButton カスタム コントロールは、Button からの継承で、ボタンがデザイナに表示されると、"Design mode active" というテキストを表示します。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";
               }
           }
       }
   }
   

8. プロジェクトの出力パスを "bin\" に設定します。

9. ソリューションをビルドします。

デザイン時メタデータ アセンブリの作成

デザイン時コードは、特殊なメタデータ アセンブリに配置されます。このチュートリアルでは、カスタム装飾は、SkewButtonLibrary.VisualStudio.Design という名前のアセンブリに配置されます。詳細については、「メタデータ ストア」を参照してください。

デザイン時メタデータ アセンブリを作成するには

1. Visual Basic または Visual C# の SkewButtonLibrary.VisualStudio.Design という名前の新しいクラス ライブラリ プロジェクトをソリューションに追加します。

2. プロジェクトの出力パスを "..\SkewButtonLibrary\bin\" に設定します。これにより、コントロールのアセンブリとメタデータのアセンブリが同じフォルダ内に配置されるため、デザイナがメタデータを検出できます。

3. 次の WPF アセンブリへの参照を追加します。

   • PresentationCore

   • PresentationFramework

   • WindowsBase

4. 次の WPF デザイナ アセンブリへの参照を追加します。

   • Microsoft.Windows.Design

   • Microsoft.Windows.Design.Extensibility

   • Microsoft.Windows.Design.Interaction

5. SkewButtonLibrary プロジェクトへの参照を追加します。

6. ソリューション エクスプローラで、Class1 コード ファイル名を Metadata.cs または Metadata.vb に変更します。このプロジェクト内のすべての参照について名前を変更するかどうかをたずねるメッセージ ボックスが開いたら、[はい] をクリックします。

7. 自動的に生成されたコードを次のコードに置き換えます。このコードにより、カスタム デザイン時実装を SkewButton クラスに関連付ける AttributeTable が作成されます。

   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());
           }
       }
   }
   

8. ソリューションを保存します。

装飾プロバイダの実装

装飾プロバイダは SkewButtonAdornerProvider という名前の型で実装されます。この装飾 FeatureProvider により、コントロールの RenderTransform プロパティをデザイン時に設定できるようになります。

装飾プロバイダを実装するには

1. SkewButtonAdornerProvider という名前の新しいクラスを SkewButtonLibrary.VisualStudio.Design プロジェクトに追加します。

2. 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;
           }
       }
   }
   

3. ソリューションをビルドします。

デザイン時実装のテスト

SkewButton コントロールは、他の WPF コントロールと同じように使用できます。WPF デザイナは、すべてのデザイン時オブジェクトの作成を処理します。

デザイン時実装をテストするには

1. DemoApplication という名前の新しい WPF アプリケーション プロジェクトをソリューションに追加します。

   WPF デザイナで Window1.xaml が開きます。

2. SkewButtonLibrary プロジェクトへの参照を追加します。

3. XAML ビューで、自動的に生成された XAML を次の XAML に置き換えます。この XAML により、SkewButtonLibrary 名前空間への参照が追加され、SkewButton カスタム コントロールが追加されます。ボタンは、"Design mode active" というテキストと共にデザイン ビューに表示されます。これは、現在デザイン モードであることを示すものです。ボタンが表示されない場合は、デザイナの一番上の情報バーをクリックして、ビューの再読み込みを行う必要があります。

   <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>
   

4. デザイン ビューで、SkewButton コントロールをクリックして選択します。

   Slider コントロールが SkewButton コントロール内に表示されます。スライダ コントロールが表示されない場合は、ソリューションのリビルドを試みます。

5. スライダ コントロールの値を変更します。

   スライダをドラッグすると、コントロールが傾斜します。XAML ビューで、RenderTransform プロパティが、装飾によって指定された値に設定されます。

6. DemoApplication プロジェクトを実行します。

   実行時には、装飾で設定した角度でボタンが傾斜されます。

次の手順

カスタム コントロールに、さらにカスタム デザイン時機能を追加できます。

• コントロールのデザイン時にカスタム装飾を追加します。詳細については、「チュートリアル : デザイン時装飾の作成」を参照してください。

• 埋め込み先編集用の装飾プロバイダを作成します。詳細については、「チュートリアル : 埋め込み先編集の実装」を参照してください。

• [プロパティ] ウィンドウで使用できるカスタム カラー エディタを作成します。詳細については、「チュートリアル : カラー エディタの実装」を参照してください。

参照

処理手順

方法 : コントロール内にレールを実装する

参照

PrimarySelectionAdornerProvider

SkewTransform

その他の技術情報

高度な機能拡張という概念

WPF デザイナの機能拡張