Keep popup within window bounds

Question

I'm trying to display a popup under a button.

This is what it looks like now :

But I want it to stay within the window borders, something like this (example in paint)

This is my top bar with the popup declared at the bottom:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="55" />
        <RowDefinition Height="35" />
    </Grid.RowDefinitions>

    <Grid x:Name="AdminContainer" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Border Background="Transparent">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" Height="35" HorizontalAlignment="Left" Margin="10,0,0,0">
                <ContentControl Content="{StaticResource LynxLogo}" Margin="0,5" />
            </Viewbox>
        </Border>

        <ToggleButton x:Name="AdminOptionsToggleButton" 
                      Grid.Column="2" 
                      VerticalAlignment="Center"
                      HorizontalAlignment="Stretch"
                      IsChecked="{Binding mainViewModel.OptionsPopupOpen, Mode=TwoWay}"
                      Style="{StaticResource EmptyToggleButtonStyle}"
                      Cursor="Hand">

            <Grid x:Name="AdminPanel" HorizontalAlignment="Right" Height="45"
                  VerticalAlignment="Stretch" Margin="0,0,2,0" >
                <Grid.Style>
                    <Style>
                        <Setter Property="Grid.Background" Value="Transparent"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Grid.Background" Value="#FF404040"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}" Value="True">
                                <Setter Property="Grid.Background" Value="#FF353535"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="45" />
                </Grid.ColumnDefinitions>


                <Border Grid.Column="0" Padding="20,0,0,0">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <!--Name-->
                        <TextBlock Grid.Row="0" Text="{Binding adminViewModel.Name}"
                                   Style="{StaticResource AdminTextBlockStyle}" VerticalAlignment="Bottom"
                                   FontSize="16" />
                        <!--Status-->
                        <TextBlock Grid.Row="1" Text="{Binding adminViewModel.StatusDescription}"
                                   Style="{StaticResource AdminTextBlockStyle}" VerticalAlignment="Bottom"
                                   FontSize="13" Margin="0,0,0,1" />
                    </Grid>
                </Border>

                <Border Grid.Column="1" HorizontalAlignment="Right" Margin="3">
                    <Viewbox StretchDirection="DownOnly">
                        <Image x:Name="ProfilePicture" Source="/Image/ProfilePictures/profile_placeholder.png" />
                    </Viewbox>
                </Border>
            </Grid>
        </ToggleButton>
    </Grid>

    <views:OptionPopup x:Name="OptionsMenu" PlacementTarget="{Binding ElementName=AdminPanel}"
                       Placement="Bottom" 
                       MinWidth="{Binding ActualWidth, ElementName=AdminPanel}"
                       MaxWidth="{Binding ActualWidth, ElementName=AdminContainer}" />

Answer 1

I fixed it by setting the placement the custom:

<views:OptionPopup x:Name="OptionsMenuPopup"
     PlacementTarget="{Binding ElementName=AdminPanel}"
     Placement="Custom"
     MinWidth="{Binding ActualWidth, ElementName=AdminPanel}"
     MaxWidth="{Binding ActualWidth, ElementName=AdminContainer}" /> 

And in the constructor of my usercontrol in code behind I added

OptionsMenuPopup.CustomPopupPlacementCallback += (Size popupSize, Size targetSize, Point offset) =>
            new[] { new CustomPopupPlacement() { Point = new Point(targetSize.Width - popupSize.Width, targetSize.Height) } }; 

Answer 2

您可以结合使用SystemParameters.PrimaryScreenHeight和Popup的左上角点来计算您有多少空间，并将其设置为Popup内容的MaxHeight和MaxWidth。