时间戳

首页 > 解决方案 > 弹出窗口离开屏幕。定位应该怎么做？

uwp - 弹出窗口离开屏幕。定位应该怎么做？

问题描述

我正在创建一个用户控件。在用户控件中单击按钮时，我希望它打开一个将进行设置的弹出窗口。我可以打开 PopUp，但无法定位它。如果按钮靠近屏幕边缘，则弹出窗口会离开屏幕并且不会出现。例如，如果它在底部，我希望它向上打开。我试图用下面的示例图片来解释它。

如果你能帮忙，我会很高兴。谢谢。

适当的形象

图像不正确

用户控制代码

        <Grid Height="60" Width="140">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="5"/>
        </Grid.RowDefinitions>

        <controls:DropShadowPanel Name="ShadowEffect" Grid.RowSpan="5" BlurRadius="10.0" ShadowOpacity="1" Color="Black">
            <Border Background="White" Width="140">
            </Border>
        </controls:DropShadowPanel>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold" FontSize="14" Text="{Binding ID}" TextAlignment="Center" Margin="0,4,0,0"/>

        <CheckBox Name="LockerCheck" Background="Blue" IsChecked="{Binding IsChecked}" Margin="5,-2,0,0" Checked="LockerCheck_Checked" Unchecked="LockerCheck_Unchecked" Grid.RowSpan="3" VerticalAlignment="Top">
            <CheckBox.RenderTransform>
                <CompositeTransform ScaleX="0.7" ScaleY="0.7"/>
            </CheckBox.RenderTransform>
        </CheckBox>

        <Button Name="LockerButton" Grid.Row="2" Height="27" Width="70" Background="#FFCF0000" BorderBrush="Transparent" HorizontalAlignment="Center" VerticalAlignment="Top" Click="LockerButton_Click" Margin="0,0,0,0">
            <Image Name="LockerIcon" Source="/Images/lock.png"/>
        </Button>

        <Rectangle Name="LockerStatusColor" Grid.Row="4" Fill="#FFCF0000"/>

        <Button Name="PopUpButton" Content="O" HorizontalAlignment="Right" Click="PopUpButton_Click">
        </Button>
    </Grid>

    <Popup x:Name="myPopup" IsLightDismissEnabled="True" HorizontalAlignment="Center" VerticalAlignment="Center" >
        <StackPanel Orientation="Horizontal" Width="250" Height="400" Background="Red">
            <TextBlock Text="POPUP TEXT" Width="100"></TextBlock>
            <Button Content="POPUP BUTTON"></Button>
        </StackPanel>
    </Popup>

标签： uwppopup

解决方案

弹出窗口离开屏幕。定位应该怎么做？

对于这种情况，您需要获取转换为当前窗口的Popup 内容边界。然后计算超出部分，并将弹出窗口设置 HorizontalOffset VerticalOffset为正确位置。

例如给出弹出内容x:Name = PopContent。

<Popup
    x:Name="myPopup"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    IsLightDismissEnabled="True"
    IsOpen="True"
    LayoutUpdated="myPopup_LayoutUpdated">
    <StackPanel
        x:Name="PopContent"
        Width="250"
        Height="400"
        Background="Red"
        Orientation="Horizontal">
        <TextBlock Width="100" Text="POPUP TEXT" />
        <Button Content="POPUP BUTTON" />
    </StackPanel>
</Popup>

然后使用以下代码在LayoutUpdated事件中正确弹出窗口的位置。

private void myPopup_LayoutUpdated(object sender, object e)
{        
    Rect bounds = PopContent.TransformToVisual(Window.Current.Content).TransformBounds(new Rect(0.0, 0.0, PopContent.ActualWidth, PopContent.ActualHeight));
    Rect rect = new Rect(0.0, 0.0, Window.Current.Bounds.Width, Window.Current.Bounds.Height);
    if (!rect.Contains(new Point(bounds.Left, bounds.Top)))
    {
       
        if (bounds.Top < 0)
        {
            myPopup.HorizontalOffset = -(bounds.Top);
        }
        if (bounds.Left < 0)
        {
            myPopup.VerticalOffset = -(bounds.Left);
        }
      
    }
    if (!rect.Contains(new Point(bounds.Right, bounds.Bottom)))
    {

        if (bounds.Bottom > rect.Height)
        {
            myPopup.VerticalOffset = -(bounds.Bottom - rect.Height);

        }
        if (bounds.Right > rect.Width)
        {
            myPopup.HorizontalOffset = -(bounds.Right - rect.Width);
        }       
    }
}

推荐阅读