如何始终将 PopUp 放置在 WPF 中的 ToggleButton 下 [英] How to always place PopUp under a ToggleButton in WPF

问题描述

当我点击一个切换按钮时，我想在它下面放置一个弹出窗口.在这个弹出窗口中，我想添加按钮和其他控件.但是，当我调整 mian 窗口的大小时，如何确保弹出窗口始终位于我的切换按钮下.

I want to place a popup under a togglebutton when I click on it. In this popup I want to add button and other controls. But how can I make sure that the popup window always will be under my togglebutton also when I resize my mian window.

我的 XAML 代码:

My XAML code:

     <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#代码:

C# code for click on togglebutton:

    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;
    }

推荐答案

使用 Popup 的 Placement 和 PlacementTarget 属性 :)

Use Placement and PlacementTarget properties of the Popup :)

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

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

The thing to note here is that, if the window is moved when Popup is open, it wont move along.. What you could do is Bind the IsOpen property to ToggleButton's IsChecked and set StaysOpen=False. Doing that, the Popup will close automatically, toggling the button back :) , also you wont be needing the C# code if you are to do this :)

或者这里是另一个 SO 帖子的链接，如果它应该保持打开状态，无论如何:移动 WPF 弹出窗口

OR here is a link to another SO post if it should stay open whatever the case be : Move a WPF Popup

希望对你有帮助:)

这篇关于如何始终将 PopUp 放置在 WPF 中的 ToggleButton 下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！