保持窗口范围内弹出 [英] Keep popup within window bounds

问题描述

我想显示一个按钮下方的弹出。

这是它看起来像现在：

，但我希望它留在窗口边界之内，像这样（油漆为例）

这是我在底部声明的弹出最上面一栏：

 <网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition高度=55/> 
< RowDefinition高度=35/> 
< /Grid.RowDefinitions> 
 
<电网X：NAME =AdminContainerGrid.Row =0> 
< Grid.ColumnDefinitions> 
< ColumnDefinition WIDTH =4 */> 
< ColumnDefinition宽度=10/> 
< ColumnDefinition WIDTH =自动/> 
< /Grid.ColumnDefinitions> 
 
< BORDER =背景透明> 
< Viewbox控件StretchDirection =DownOnly拉伸=统一HEIGHT =35的Horizo​​ntalAlignment =左保证金=10,0,0,0> 
< ContentControl中CONTENT ={StaticResource的LynxLogo}保证金=0.5/> 
< / Viewbox控件> 
< /边框> 
 
<切换按钮X：NAME =AdminOptionsToggleButton
 Grid.Column =2
 VerticalAlignment =中心
的Horizo​​ntalAlignment =拉伸
 =器isChecked{结合mainViewModel.OptionsPopupOpen，模式=双向}
风格={StaticResource的EmptyToggleButtonStyle}
光标=手> 
 
<电网X：NAME =AdminPanel的Horizo​​ntalAlignment =右HEIGHT =45
 VerticalAlignment =拉伸保证金=0,0,2,0> 
< Grid.Style> 
<样式和GT; 
< setter属性=Grid.BackgroundVALUE =透明/> 
< Style.Triggers> 
< D​​ataTrigger绑定={绑定的RelativeSource = {的RelativeSource AncestorType =切换按钮}，路径= IsMouseOver}VALUE =真> 
< setter属性=Grid.BackgroundVALUE =＃FF404040/> 
< / DataTrigger> 
< D​​ataTrigger绑定={绑定的RelativeSource = {的RelativeSource AncestorType =切换按钮}，路径=}器isCheckedVALUE =真> 
< setter属性=Grid.BackgroundVALUE =＃FF353535/> 
< / DataTrigger> 
< /Style.Triggers> 
< /样式和GT; 
< /Grid.Style> 
 
< Grid.ColumnDefinitions> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition宽度=45/> 
< /Grid.ColumnDefinitions> 
 
 
< BORDER Grid.Column =0填充=20,0,0,0> 
<网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition高度=*/> 
< RowDefinition高度=*/> 
< /Grid.RowDefinitions> 
 
<！ - 姓名 - > 
< TextBlock的Grid.Row =0文本={结合adminViewModel.Name}
风格={StaticResource的AdminTextBlockStyle}VerticalAlignment =底
字号=16 /> 
<！ - 状态 - > 
< TextBlock的Grid.Row =1文本={结合adminViewModel.StatusDescription}
风格={StaticResource的AdminTextBlockStyle}VerticalAlignment =底
字号=13保证金=0,0,0,1/> 
< /网格和GT; 
< /边框> 
 
< BORDER Grid.Column =1的Horizo​​ntalAlignment =右保证金=3> 
< Viewbox控件StretchDirection =DownOnly> 
<图像X：NAME =ProfilePicture源=/图像/ ProfilePictures / profile_placeholder.png/> 
< / Viewbox控件> 
< /边框> 
< /网格和GT; 
< /切换按钮> 
< /网格和GT; 
 
<访问量：OptionPopup X：NAME =OptionsMenuPlacementTarget ={绑定的ElementName = AdminPanel}
放置=底
了minWidth ={结合ActualWidth的，的ElementName = AdminPanel}
了maxWidth ={结合ActualWidth的，的ElementName = AdminContainer}/> 
  

解决方案

我固定它通过设置位置自定义：

 <访问量：OptionPopup X：NAME =OptionsMenuPopup
 PlacementTarget ={绑定的ElementName = AdminPanel}
放置=自定义
了minWidth ={结合ActualWidth的，的ElementName = AdminPanel}
了maxWidth ={结合ActualWidth的，的ElementName = AdminContainer}/> 
  

和在我的用户的代码构造函数后面我加了

  OptionsMenuPopup.CustomPopupPlacementCallback + =（尺寸popupSize，尺寸的targetSize，点偏移）=> 
新的[] {新CustomPopupPlacement（）{点=新的点（targetSize.Width  -  popupSize.Width，targetSize.Height）}}; 
  

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}" />

解决方案

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

这篇关于保持窗口范围内弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！