Popup を DropDownList っぽく表示する

Button を置いただけの簡単なページを用意します。

<UserControl x:Class="Nakamura.Windows.Test.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Button x:Name="_button"
                Canvas.Left="50"
                Canvas.Top="50"
                Content="ポップアップを表示"
                Width="150"
                Click="Button_Click"/>
        <Primitives:Popup x:Name="_popup">
            <ListBox Width="150">
                <ListBoxItem Content="Item1"/>
                <ListBoxItem Content="Item2"/>
                <ListBoxItem Content="Item3"/>
            </ListBox>
        </Primitives:Popup>
    </Canvas>
</UserControl>

そして、Button がクリックされたときの処理を記述します

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // Button の左下の座標を Silverlight アプリケーション上での座標に変換
        GeneralTransform transform = _button.TransformToVisual(Application.Current.RootVisual);
        Point point = transform.Transform(new Point(0, _button.ActualHeight));

        // Popup の表示位置を指定
        _popup.VerticalOffset = point.Y;
        _popup.HorizontalOffset = point.X;

        // 表示の切り替え
        _popup.IsOpen = !_popup.IsOpen;
    }
}

これを実行すると次の画面が表示されます。
f:id:griefworker:20090204072238p:image

Button を押すと…
f:id:griefworker:20090204072258p:image

ListBox が表示されました!ComboBox の DropDownList っぽいですね!!


(追記)
WPF の Popup には Placement プロパティがあるので簡単ですが、Silverlight の方には無いのでちょっと面倒ですね。