如何在WPF中使PopUp始终位于ToggleButton下方

Question

当我点击一个togglebutton时，我希望能够在其下方放置弹出窗口。在这个弹出窗口中，我想添加按钮和其他控件。但是如何确保当我调整主窗口大小时，弹出窗口始终位于我的togglebutton之下呢？

我的XAML代码：

     <ToggleButton
    x:Name="userBtn"
    Margin="610,25,378,0"
    VerticalAlignment="Top"            
    Height="29"
    Grid.Column="2" 
    >
        <ToggleButton.Resources>
            <BitmapImage x:Key="imgNormal" UriSource="/Resources/home.jpg"/>
            <BitmapImage x:Key="imgHover" UriSource="/Resources/home_checked.jpg"/>
            <BitmapImage x:Key="imgChecked" UriSource="/Resources/home_checked.jpg"/>
        </ToggleButton.Resources>
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton" >
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="150" Height="32">
                                <Image x:Name="PART_Image" Height="22" Width="22" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" Margin="0,0,0,0" Source="{StaticResource imgNormal}"/>
                                <TextBlock x:Name="PART_TEXT" FontFamily="Arial" Foreground="#FFAFADAD" FontSize="13" HorizontalAlignment="Center" Text="{x:Static properties:Resources.BtnDashboard}"  Margin="10,9,0,0"></TextBlock>
                            </StackPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/>
                                    <Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgHover}"/>
                                    <Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter TargetName="PART_Image" Property="Opacity" Value="0.6"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>

    <Popup Name="UserMenuPopUp" PopupAnimation="Fade" Width="280" Height="auto" Margin="20" AllowsTransparency="True" HorizontalAlignment="Left" Placement="bottom" PlacementTarget="{Binding ElementName=userBtn}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="false" >
        <Border Margin="2,0,48,0" BorderThickness="1" Background="#EEEEEE" Height="105">
            <Grid>

            </Grid>
        </Border>
    </Popup>

在 C# 中点击切换按钮的代码：

    private void UserBtn_Click(object sender, RoutedEventArgs e)
    {
        // Get location, adn sender
        var element = (System.Windows.Controls.Primitives.ToggleButton)sender;
        var location = element.PointToScreen(new Point(0, 0));

        // Set popup location
        UserMenuPopUp.HorizontalOffset = (location.X);
        UserMenuPopUp.VerticalOffset = (location.Y);
        UserMenuPopUp.IsOpen = true;
    }

- Loc Dai Le

Answer 1

使用Popup的Placement和PlacementTarget属性 :)

<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=myToggleButton}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="False" />

需要注意的是，如果在 Popup 打开时移动窗口，它不会随之移动。您可以将 IsOpen 属性绑定到 ToggleButton 的 IsChecked，并设置 StaysOpen=False。这样做，弹出窗口将自动关闭，并切换按钮 :) ，如果您这样做，就不需要 C# 代码了 :)

或者，如果无论如何都要保持打开状态，请参阅以下链接： WPF 弹出窗口移动

希望对您有所帮助 :)

- fahimalizain

---

感谢您的回答@faztp12。弹出窗口位置正确，但当我移动主窗口时，它不会跟随 :( - Loc Dai Le

完美的解决方案 :) 非常感谢。但是没有C#代码它就不能工作吗？ - Loc Dai Le

由于Popup与ToggleButton的IsChecked属性绑定，因此不再需要C#代码 :) 删除UserBtn_Click事件 ;) - fahimalizain

是的 :) - 只需使用新的 XAML 代码编辑我的问题。 - Loc Dai Le

另外，如果您在C#中明确要求弹出窗口打开，则绑定将会中断 :P 请注意，在这种情况下，这种方法不起作用 :) - fahimalizain