簡単なユーザーコントロール(WPF)の作り方

概要

WPFユーザーコントロールの最低限の構成。

要点

やりたいこと

WPFでユーザーコントロールを作って、WPFの画面で使う。

変化点

詳細

まず、UserControlを継承したクラスに、画面とやりとりするための依存関係プロパティを作る。(下の例では、MyTextとMyCommand)

SimpleUserControl.xaml.cs

/// <summary>
/// SimpleUserControl.xaml の相互作用ロジック
/// </summary>
public partial class SimpleUserControl : UserControl
{
    /// <summary>
    /// 文字列の依存関係プロパティ
    /// </summary>
    public string MyText
    {
        get { return (string)GetValue(MyTextProperty); }
        set { SetValue(MyTextProperty, value); }
    }
    public static readonly DependencyProperty MyTextProperty =
        DependencyProperty.Register(
            "MyText",                               // プロパティ名
            typeof(string),                         // プロパティの型
            typeof(SimpleUserControl),              // プロパティを所有する型＝このクラスの名前
            new PropertyMetadata(string.Empty));    // 初期値

    /// <summary>
    /// コマンドの依存関係プロパティ
    /// </summary>
    public ICommand MyCommand
    {
        get { return (ICommand)GetValue(MyCommandProperty); }
        set { SetValue(MyCommandProperty, value); }
    }
    public static readonly DependencyProperty MyCommandProperty =
        DependencyProperty.Register(
            "MyCommand",                    // プロパティ名
            typeof(ICommand),               // プロパティの型
            typeof(SimpleUserControl),      // プロパティを所有する型＝このクラスの名前
            new PropertyMetadata(null));    // 初期値

    /// <summary>
    /// コンストラクタ
    /// </summary>
    public SimpleUserControl()
    {
        InitializeComponent();
    }
}

次に、ユーザーコントロールのxamlを作成し、好きなコントロールを配置し、.csで作った依存関係プロパティをバインドする。
UserControlにx:Name="root"をつけるのと、バインドする部分のElementName=rootを忘れない。

SimpleUserControl.xaml

<UserControl x:Class="WpfApp1.SimpleUserControl"
             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" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="150"
             x:Name="root">
    <Grid Width="150" Height="100" Background="#99FF0000">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="50"/>
        </Grid.ColumnDefinitions>
        <!-- UserControlに「root」という名前を付けて、下でバインドするときに「ElementName=root」とすることを忘れないこと！ -->
        <Viewbox>
            <TextBlock Text="{Binding MyText, ElementName=root}" Grid.Column="0"/>
        </Viewbox>
        
        <!-- コマンド(=ボタン押したときの処理)も依存関係プロパティで登録できる -->
        <Button Content="ボタン" Command="{Binding MyCommand, ElementName=root}" Grid.Column="1"/>
    </Grid>
</UserControl>

作ったユーザーコントロールをメイン画面で使う。

SimpleUserControl.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!--  Viewで直接指定  -->
        <local:SimpleUserControl 
            MyText="メインウインドウ側で指定した文字列"
            MyCommand="{Binding VmMyCommand}"            
            />
    </Grid>
</Window>

コード

備考

とくになし。