VB のたまご

作成日: 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」、と5つ指定していますが、このほかにも設定方法はあります。 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 の2つを表示するウィンドウを作成しました。

  • スポンサーリンク


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

  • <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>
    

  •  この例では、2つ目のポップアップ位置をずらして表示しています。 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>
    

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