WPFで簡単なUserControlの作り方 [C#][WPF]

UserControlは便利

繰り返し使用するUI部品は、UserControlにして何度も使用できるようにしたほうが便利です。

例えば、MainWindow.xamlを以下のように記載した場合、同じような表記が繰り返し発生します。 これをUserControlに置き換えます。

<Window x:Class="WpfApp5.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:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent ="WidthAndHeight">
    <StackPanel Width="Auto" Height="Auto" Margin="10">
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="Name : "/>
            <TextBlock Text="Ichiro"/>
            <Button Content="Show Message"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="Name : "/>
            <TextBlock Text="Jiro"/>
            <Button Content="Show Message"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="Name : "/>
            <TextBlock Text="Saburo"/>
            <Button Content="Show Message"/>
        </StackPanel>
    </StackPanel>
</Window>

ユーザーコントロールは以下のようにプロジェクトに追加します。 プロジェクトのプロパティで、追加を選択して、ユーザーコントロールを選択。

次に、ユーザーコントロールのxamlファイルを以下のように書き換えて、

<UserControl x:Class="WpfApp5.UserControl1"
             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:WpfApp5"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel Orientation="Horizontal" Margin="10">
        <TextBlock Text="Name : "/>
        <TextBlock Text="Ichiro"/>
        <Button Content="Show Message"/>
    </StackPanel>
</UserControl>

MainWindow.xamlも以下のように書き換えます。

<Window x:Class="WpfApp5.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:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent ="WidthAndHeight">
    <StackPanel Width="Auto" Height="Auto" Margin="10">
        <local:UserControl1/>
        <local:UserControl1/>
        <local:UserControl1/>
    </StackPanel>
</Window>

[表示結果]

これですと、全部表示が同じですので、UserControlの外側から値を設定できるようにさせます。

(1) MainWindow.xaml書き換え

<Window x:Class="WpfApp5.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:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent ="WidthAndHeight">
    <StackPanel Width="Auto" Height="Auto" Margin="10">
        <local:UserControl1 DataContext="Ichiro"/>
        <local:UserControl1 DataContext="Jiro"/>
        <local:UserControl1 DataContext="Saburo"/>
    </StackPanel>
</Window>

(2) UserControl1.xaml書き換え

<UserControl x:Class="WpfApp5.UserControl1"
             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:WpfApp5"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Name="parent">
    <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=parent}" Margin="10">
        <TextBlock Text="Name : "/>
        <TextBlock Text="{Binding DataContext}"/>
        <Button Content="Show Message"/>
    </StackPanel>
</UserControl>

[表示結果]

ここで、DataContext="{Binding ElementName=parent}"で、ElementNameプロパティにparentを指定することで、UserControlのUI要素をバインディング・ソースにしてデータ・バインディングを行えます。 StackPanel以下のUIアイテムから、上記のDataContextに対して、直接バインディングできるようです。 これは、コードが短くなります。

あと、上のxamlコードは次にようにも書き換えることができます。 RelativeSourceは、バインディング ターゲットの位置に対して相対的な位置を指定することにより、バインディング ソースを取得または設定します。 例えば {RelativeSource Self} は自身を参照し、{RelativeSource FindAncestor} では自分の要素を内包する、親の要素を対象に指定します。 以下は、UserControlを指定したパターン

<UserControl x:Class="WpfApp5.UserControl1"
             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:WpfApp5"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel Orientation="Horizontal" Margin="10">
        <TextBlock Text="Name : "/>
        <TextBlock Text="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"/>
        <Button Content="Show Message"/>
    </StackPanel>
</UserControl>

以下のサイトを参考にしました

• 独自の依存関係プロパティを作成する

http://yujiro15.net/YKSoftware/tips_DependencyProperty.html

qiita.com

d.hatena.ne.jp

Git

需要はなさそうだけど、一応Gitにもコードを上げます。 github.com