WPF でフリーフォーム ユーザーコントロールを作成の方法

1年 ago
陽, 向宇
2 minutes

フリーフォームなユーザーコントロールを作成するには、WPFのPath要素とGeometryクラスを使用して形状を定義します。以下にWPFでフリーフォームのユーザーコントロールを作成する方法の簡単な例を示します。

  1. 新しい WPF プロジェクトを作成します。
  2. MainWindow.xaml に MyShapeControl というカスタム ユーザー コントロールを定義し、そこで Canvas をルート要素として追加します。
<UserControl x:Class="YourNamespace.MyShapeControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Canvas x:Name="canvas"/>
</UserControl>
  1. MyShapeControlのコードファイルにおいて、自由形状のPathデータを受け取るための依存関係プロパティを定義します：
public partial class MyShapeControl : UserControl
{
    public static readonly DependencyProperty PathDataProperty =
        DependencyProperty.Register("PathData", typeof(Geometry), typeof(MyShapeControl), new PropertyMetadata(null, OnPathDataChanged));

    public Geometry PathData
    {
        get { return (Geometry)GetValue(PathDataProperty); }
        set { SetValue(PathDataProperty, value); }
    }

    private static void OnPathDataChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        MyShapeControl shapeControl = (MyShapeControl)d;
        shapeControl.DrawPathData();
    }

    public MyShapeControl()
    {
        InitializeComponent();
    }

    private void DrawPathData()
    {
        canvas.Children.Clear();
        if (PathData != null)
        {
            Path path = new Path();
            path.Data = PathData;
            path.Stroke = Brushes.Black;
            path.Fill = Brushes.Transparent;
            canvas.Children.Add(path);
        }
    }
}
  1. MainWindow.xaml で MyShapeControl を使用して、PathData プロパティをパスデータにバインドします。
<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:MyShapeControl PathData="{Binding MyPathData}"/>
    </Grid>
</Window>
  1. MainWindowのコードファイルで、ViewModelを定義し、MyPathDataプロパティにカスタムのPathデータを設定します。
public partial class MainWindow : Window
{
    public class ViewModel : INotifyPropertyChanged
    {
        private Geometry myPathData;
        public Geometry MyPathData
        {
            get { return myPathData; }
            set
            {
                if (myPathData != value)
                {
                    myPathData = value;
                    OnPropertyChanged("MyPathData");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public MainWindow()
    {
        InitializeComponent();

        ViewModel viewModel = new ViewModel();
        viewModel.MyPathData = Geometry.Parse("M 10,10 L 50,10 50,50 10,50 Z");

        DataContext = viewModel;
    }
}

先ほどの例で、MyShapeControlは自由な形状を描くために使用されるカスタムユーザーコントロールです。根要素としてCanvasを使用しており、そこでPathDataという属性をMyPathDataという属性にバインドするPath要素を描画します。MyPathDataの値を変更することで、自由な形状の表現を変更できます。

このサンプルが、自由形状のユーザー コントロールを作成するのに役立てば幸いです。

bannerAds