VB のたまご

  1. ホーム　>　
  2. WPF　>　
  3. WPF 入門　>　
  4. コードビハインド　>　
  5. Popup

作成日: 2017/03/05, 更新日: 2017/03/05



Popup

    イメージ
  • 　popup は、ポップアップウィンドウを表示するためのコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「PopupWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

    • スポンサーリンク


    <Window x:Class="PopupWindow1"
        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:z04_NormalControls"
        mc:Ignorable="d"
        Title="PopupWindow1" Height="300" Width="300">
    
    <Grid>

        <StackPanel Margin="50" Background="AliceBlue">

            <Button Name="button1" Content="button1" Width="150" Height="150" />
            
            <Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Bottom">
                <TextBlock FontSize="14" Background="LightGreen" Text="Placement=Bottom" />
            </Popup>

            <Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Top">
                <TextBlock FontSize="14" Background="LightGreen" Text="Placement=Top" />
            </Popup>

            <Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Left">
                <TextBlock FontSize="14" Background="LightGreen" Text="Placement=Left" />
            </Popup>

            <Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Right">
                <TextBlock FontSize="14" Background="LightGreen" Text="Placement=Right" />
            </Popup>

            <Popup IsOpen="False" PlacementTarget="{Binding ElementName=button1}" Placement="Center">
                <TextBlock FontSize="14" Background="LightGreen" Text="Placement=Center" />
            </Popup>

        </StackPanel>
        
    </Grid>
    
</Window>

  • 　Popup は、対象となるコントロール（PlacementTarget）を基準に、どの位置に表示するかを設定します。 例えば、上記では対象となるコントロールは Button コントロールの button1 を指定して、どの位置に表示するかは Placement に位置を指定しています。 上記では、「Bottom」、「Top」、「Left」、「Right」、「Center」、と５つ指定していますが、このほかにも設定方法はあります。 IsOpen で表示する（True）／しない（False）を設定します。

  • 　PlacementTarget を省略した場合は、親のコントロールを対象とします。以下はそのサンプルです。 

    • <Window x:Class="PopupWindow2"
        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:z04_NormalControls"
        mc:Ignorable="d"
        Title="PopupWindow2" Height="300" Width="300">
    
    <Grid>

        <StackPanel Margin="50" Background="AliceBlue">
            <Popup Placement="Bottom" IsOpen="True">
                <StackPanel>
                    <TextBlock Text="popup1" Background="White" />
                    <Button Content="popup2" />
                </StackPanel>
            </Popup>
        </StackPanel>
        
    </Grid>
    
</Window>

  • 　Popup コントロールの親コントロールを StackPanel コントロールにしているので StackPanel を対象に、Placement=Bottom に設定しているので、下部にポップアップが表示されます。 また、Popup となるウィンドウは自作して作成します。今回で言えば、TextBlock のみであったり、StackPanel を敷いて TextBlock と Button の２つを表示するウィンドウを作成しました。

    • スポンサーリンク


  • 　ところで、ちょっと対象コントロールとポップアップの距離が近すぎて窮屈だなと感じませんか？ そういう場合は、表示位置を相対的にずらす設定があります。 

    • <Window x:Class="PopupWindow3"
        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:z04_NormalControls"
        mc:Ignorable="d"
        Title="PopupWindow3" Height="300" Width="300">

    <Grid>

        <StackPanel Margin="50" Background="AliceBlue">
            <Popup Placement="Bottom" IsOpen="True">
                <StackPanel>
                    <TextBlock Text="popup1" Background="White" />
                    <Button Content="popup2" />
                </StackPanel>
            </Popup>
            <Popup Placement="Bottom" IsOpen="True"
                   HorizontalOffset="50" VerticalOffset="20">
                <StackPanel>
                    <TextBlock Text="popup3" Background="White" />
                    <Button Content="popup4" />
                </StackPanel>
            </Popup>
        </StackPanel>

    </Grid>

</Window>

  • 　この例では、２つ目のポップアップ位置をずらして表示しています。 HorizontalOffset ｛水平方向（横方向のうち右）｝に 50、VerticalOffset ｛垂直方向（縦方向のうち下）｝に 20、ずらして表示します。

  • 　これらの値をマイナス値に設定するとどうなると思いますか？以下はそのサンプルです。 

    • <Window x:Class="PopupWindow4"
        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:z04_NormalControls"
        mc:Ignorable="d"
        Title="PopupWindow4" Height="300" Width="300">

    <Grid>

        <StackPanel Margin="50" Background="AliceBlue">
            <Popup Placement="Bottom" IsOpen="True">
                <StackPanel>
                    <TextBlock Text="popup1" Background="White" />
                    <Button Content="popup2" />
                </StackPanel>
            </Popup>
            <Popup Placement="Bottom" IsOpen="True"
                   HorizontalOffset="-50" VerticalOffset="-20">
                <StackPanel>
                    <TextBlock Text="popup3" Background="White" />
                    <Button Content="popup4" />
                </StackPanel>
            </Popup>
        </StackPanel>

    </Grid>

</Window>

  • 　さきほどのポップアップが右下方向にずれたのに対して、今回のポップアップは左上方向にずれたことが分かります。 このポップアップですが、画面を移動した際に、置いてけぼりになってしまう動作になってしまいます（追従しない）。 この点に注意ですね。