UserControlで作成したポップアップ（Popup）を表示する

UserControl内に配置したポップアップ（Popup）を表示する方法についてです。

以下、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" />
                <Button Name="ButtonBanana" Content="バナナ" Margin="10, 2" />
                <Button Name="ButtonOrange" Content="オレンジ" Margin="10, 2" />
            </StackPanel>
        </Canvas>
    </Popup>
</UserControl>

「StaysOpen」に「false」を設定すると、ポップアップで表示されたエリア以外をクリックしたら、ポップアップが閉じるようになります。

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

◆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" />
    </Canvas>
</Window>

◆MainWindow.cs

using System.Windows;

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

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

「選択」ボタンが押されたら、ポップアップの「IsOpen」に「true」を設定して、ポップアップを開いています。

上記のコードを実行して、選択ボタンを押すと以下のように表示されます。

ポップアップ以外のエリアをクリックすると、ポップアップが閉じます。