2021.1.7

UserControl側で操作した内容を呼び出し元の画面に反映する

UserControl内に配置したボタンなどのイベント処理で、同じタイミングで、呼び出し元の画面の処理を呼び出したいことがあるので、その方法についてです。

目次

  • UserControlのコード
  • 呼び出し元(MainWindow)のコード
  • 実行結果

UserControlのコード

以下、UserControlのコードになります。UserControlに配置したポップアップ画面で表示された一覧から項目を選択した際に、呼び出し元の画面にその内容を反映する処理となります。

◆UserControl1.xaml


<UserControl x:Class="WpfApp1.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" 
             mc:Ignorable="d">
    <Popup Name="MyPopup"  StaysOpen="False">
        <Canvas Width="220" Height="100" Background="LightBlue">
            <Label Content="該当する項目を以下から選択してください。"/>
            <StackPanel Canvas.Top="25" Canvas.Left="50" Width="100">
                <Button Name="ButtonApple" Content="りんご" Margin="10, 2" Click="ButtonFruit_Click" />
                <Button Name="ButtonBanana" Content="バナナ" Margin="10, 2" Click="ButtonFruit_Click" />
                <Button Name="ButtonOrange" Content="オレンジ" Margin="10, 2" Click="ButtonFruit_Click" />
            </StackPanel>
        </Canvas>
    </Popup>
</UserControl>

◆UserControl1.cs


using System;
using System.Windows.Controls;

namespace WpfApp1
{
    public partial class UserControl1 : UserControl
    {
        public event ItemClickHandler ItemClick;
        public delegate void ItemClickHandler(object sender, EventArgs e);

        public string SelectedFruit { get; set; }

        public UserControl1()
        {
            InitializeComponent();
        }

        private void ButtonFruit_Click(object sender, EventArgs e)
        {
            var button = (Button)sender;
            SelectedFruit = button.Content.ToString();
            ItemClick?.Invoke(this, e);
        }
    }
}

ItemClick?.Invoke(this, e);で呼び出し元画面で設定したイベント処理が実行されます。

呼び出し元(MainWindow)のコード

上記で作成したUserControlをMainWindow側で呼び出します。

UserControl側で用意したハンドラ(ItemClick)にイベント処理(FruitSelect_Click)を設定しています。

◆MainWindow.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="600">
    <Canvas>
        <TextBox Name="TextBox01" Canvas.Top="5" Canvas.Left="5" Width="150" Height="20"/>
        <Button Name="Button01" Canvas.Top="4" Canvas.Left="170" Content="選択" Padding="10, 2" Click="Button01_Click"/>
        <local:UserControl1 x:Name="PopupControl" Canvas.Top="30" Canvas.Left="5" ItemClick="FruitSelect_Click"/>
    </Canvas>
</Window>

◆MainWindow.cs


using System;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button01_Click(object sender, EventArgs e)
        {
            PopupControl.MyPopup.IsOpen = true;
        }

        private void FruitSelect_Click(object sender, EventArgs e)
        {
            //var obj = (UserControl1)sender;
            //TextBox01.Text = obj.SelectedFruit;
            TextBox01.Text = PopupControl.SelectedFruit;
            PopupControl.MyPopup.IsOpen = false;
        }
    }
}

実行結果

上記のコードを実行して、選択ボタンを押すとポップアップが表示され、

表示された項目のいずれかのボタンをクリックすると、クリックしたボタンの内容がテキストボックスに反映されます。

WPF】関連記事