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

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

## 要点  
### やりたいこと
WPFでユーザーコントロールを作って、WPFの画面で使う。

### 変化点
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/352601/a01584a2-c32e-3275-e413-e6c029c1c52f.jpeg)

### 詳細
まず、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>
```


## コード
https://github.com/tera1707/WPF-/tree/master/004_UserControl


## 備考
とくになし。