Popupサンプルコード

<Window x:Class="WpfAppMVVM.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:vm="clr-namespace:WpfAppMVVM.ViewModel"
        xmlns:local="clr-namespace:WpfAppMVVM"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>

    <Window.DataContext>
        <vm:MainWindowVM />
    </Window.DataContext>

    <Grid x:Name="PopupRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            
            <ListBox Grid.Column="0" ItemsSource="{Binding Items}">
                <!-- リストボックスを横並び -->
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>

            <Button Grid.Column="1" Command="{Binding OpenPopupCommand}">...</Button>

            <!-- Popupコントロール -->
            <Popup x:Name="MyPopup"
                   Grid.Column="0" IsOpen="{Binding IsPopupOpen}" 
                   Placement="Center"
                   PlacementTarget="{Binding ElementName=PopupRoot}"
                   >

                <Grid Background="Transparent">
                    <!-- 背景全体を覆う透明なRectangle (操作ブロック用) -->
                    <Rectangle Fill="Orange" Width="{Binding ElementName=PopupRoot, Path=ActualWidth}" Height="{Binding ElementName=PopupRoot, Path=ActualHeight}" />

                    <!-- Popupの中身（枠線や背景色が必要） -->
                    <Border Background="White" BorderBrush="Blue" BorderThickness="1" Padding="20" Width="200" Height="400">
                        <StackPanel>
                            <TextBlock Text="これはポップアップです！" Margin="0,0,0,10"/>
                            <Button Content="×" Command="{Binding ClosePopupCommand}"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </Popup>
        </Grid>

        <Grid Grid.Row="1">
            <!-- メインのコンテンツ -->
            <StackPanel>
                <Button Content="表示ボタン" Command="{Binding OpenPopupCommand2}" />
                <TextBlock Text="メインの画面内容..." />
            </StackPanel>

            <Grid Background="DarkGreen" 
                    Visibility="{Binding IsPopupOpen2, Converter={StaticResource BooleanToVisibilityConverter}}">

                <!-- 擬似ポップアップ（Gridで重ねる） -->
                <!-- Visibility を ViewModel の bool とバインド（変換が必要） -->
                <Canvas Background="Transparent" 
                        Visibility="{Binding IsPopupOpen2, Converter={StaticResource BooleanToVisibilityConverter}}">

                    <!-- 配置場所を自由に指定（例：ボタンの近くなど） -->
                    <Border Background="White" BorderBrush="Gray" BorderThickness="1" 
                            Width="200" Padding="10"
                            Canvas.Left="50" Canvas.Top="40">
                        <StackPanel>
                            <TextBlock Text="これはちらつかないポップアップです！" />
                            <Button Content="閉じる" Command="{Binding ClosePopupCommand2}" />
                        </StackPanel>

                        <!-- 影をつけてポップアップらしくする -->
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="10" ShadowDepth="2" Opacity="0.3"/>
                        </Border.Effect>
                    </Border>
                </Canvas>
            </Grid>
        </Grid>

        <Grid Grid.Row="2">
            <StackPanel Orientation="Horizontal">
                <Button>OK</Button>
                <Button>Cancel</Button>
                <Button>Help</Button>
            </StackPanel>
        </Grid>

    </Grid> 
</Window> 



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfAppMVVM
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // ウィンドウが動いたとき
            this.LocationChanged += UpdatePopupPosition;
            // ウィンドウのサイズが変わったとき
            this.SizeChanged += UpdatePopupPosition;
        }

        private void UpdatePopupPosition(object sender, EventArgs e)
        {
            // Popupが表示されている場合のみ再計算
            if (MyPopup.IsOpen)
            {
                // 一度 false にしてすぐ true に戻すと、配置が再計算（リフレッシュ）される
                var offset = MyPopup.HorizontalOffset;
                MyPopup.HorizontalOffset = offset + 0.01;
                MyPopup.HorizontalOffset = offset;
            }
        }
    }
}


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace WpfAppMVVM.ViewModel
{
    public class MainWindowVM : ViewModelBase
    {
        public IReadOnlyList<string> Items { get; } = new[] { "Item1", "Item2", "Item3" };

        // Popupの開閉状態を管理するプロパティ
        private bool _isPopupOpen;
        public bool IsPopupOpen {
            get { return _isPopupOpen; }
            set { SetProperty(ref _isPopupOpen, value); }
        }

        public ICommand OpenPopupCommand => new RelayCommand(() => IsPopupOpen = true);

        public ICommand ClosePopupCommand => new RelayCommand(() => IsPopupOpen = false);

        // Popup2の開閉状態を管理するプロパティ

        private bool _isPopupOpen2;
        public bool IsPopupOpen2
        {
            get { return _isPopupOpen2; }
            set { SetProperty(ref _isPopupOpen2, value); }
        }

        public ICommand OpenPopupCommand2 => new RelayCommand(() => IsPopupOpen2 = true);

        public ICommand ClosePopupCommand2 => new RelayCommand(() => IsPopupOpen2 = false);


        public MainWindowVM()
        {
        }

        public string Title => "MVVM Sample";
    }
}

関連記事