如何使弹出窗口出现在特定角落答案

【问题标题】：How to make a Popup appear in a specific corner如何使弹出窗口出现在特定角落
【发布时间】：2019-08-07 11:41:04
【问题描述】：

无论我的View 的大小和分辨率如何，我都希望我的Popup 始终出现在特定的角落（例如右下角）。

我尝试使用HorizontalAlignment 和VerticalAlignment，但它并没有真正起作用。

这是我的代码：

<Grid x:Name="Output" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Row="1">
    <Popup x:Name="StandardPopup">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            BorderThickness="2" Width="500" Height="500">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <WebView x:Name="WebView1" Source="https://www.bing.com/" Width="490" Height="490" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

【问题讨论】：

标签： c# xaml user-interface uwp popup

【解决方案1】：

您可以创建一个 UserControl 来帮助您实现这一目标。

创建一个名为 TestPopup 的新 UserControl

<UserControl
    ...
    >

    <Grid>
        <Grid HorizontalAlignment="Right" VerticalAlignment="Bottom">
            <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            BorderThickness="2" Width="500" Height="500">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <WebView x:Name="WebView1" Source="https://www.bing.com/" Width="490" Height="490" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>

</UserControl>

代码隐藏：

public sealed partial class TestPopup : UserControl
{
    private Popup _popup = null;
    public TestPopup()
    {
        this.InitializeComponent();
        // If you need to top placement, please comment out the Width/Height statement below
        this.Width = Window.Current.Bounds.Width;
        this.Height = Window.Current.Bounds.Height;

        //Assign the current control to the Child property of the popup. The Child property is what the popup needs to display.
        _popup = new Popup();
        _popup.Child = this;
    }
    public void ShowPopup()
    {
        _popup.IsOpen = true;
    }
    public void HidePopup()
    {
        _popup.IsOpen = false;
    }
}

在需要时使用 C# 代码引用

public sealed partial class MainPage : Page
{
    private TestPopup _popup = new TestPopup();
    public MainPage()
    {
        this.InitializeComponent();
        _popup.ShowPopup();
    }
}

为确保它在任何宽度的右下角，可以监听页面的SizeChanged事件。

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    _popup.Width = Window.Current.Bounds.Width;
    _popup.Height = Window.Current.Bounds.Height;
    // If you need to use the Width/Height of the page
    // _popup.Width = e.NewSize.Width;
    // _popup.Height = e.NewSize.Height;
}

最好的问候。

【讨论】：

谢谢，它工作得很好，但是有一件事情困扰着我，当我将VerticalAlignment 值更改为"Top" 时，Popup 进入了Titlebar，所以我添加了@987654330 @来解决问题，但我想知道这是否是最好的解决方案。
您好，代码中用户控件的宽高是由窗口决定的，标题栏也是窗口的一部分。如果您打算将 Popup 放在顶部，请考虑将窗口的宽度和高度替换为 Page 的宽度和高度。
你能告诉我Window.Current.Bounds 相当于Page 吗？
嗨，请检查我的更新答案，我更改了 Page_SizeChanged 和 TestPopup 构造函数的内容

【解决方案2】：

遗憾的是Popup 不支持对齐，您必须使用 偏移值

注意：不要忘记您可以使用 Bindings for Offsets 并使用一些 Converter 魔法来获得您想要的行为。

<Popup HorizontalOffset="20" 
       VerticalOffset="10">
    <!--Content-->
</Popup>

【讨论】：