調整彈出按鈕位置時，已經自動重新定位

See a demo here.

演示我有了與可選列表項的ListView如圖所示UWP應用。選擇該項目的右側打開一個Flyout（而不是一個MenuFlyout）。我指定Flyout的Placement爲Bottom,Margin,0, -4, 0, 0,FlyoutPresenter樣式。這會產生所需的外觀，Flyout直接位於物品的下方並與其相鄰。

但是，如果沒有足夠的空間來顯示Flyout，它將自動移動到Top的Placement。即使我將FlyoutPresenter樣式的邊距定義爲-4底部邊距，它似乎也不會應用。

有沒有辦法移動Flyout？如果可能的話，我寧願不要使用MenuFlyout，因爲沒有什麼是可選擇的。彈出沒有附加屬性Canvas，並且更新Flyout的最頂級子女的Canvas.Top位置不起作用（並且我沒有真正期望它）。

編輯：期望的行爲是Flyout出現在TopPlacement，爲正在發生的事情，但沒有空間，在Flyout和Target之間。

來源

2017-06-01 Tyler Southard

這不是件好事嗎？你寧願看到飛出去切斷？ –

對不起 - 我不清楚期望的結果。我已經更新了相應的問題。 –

根據放置的Quickstart: Adding a Flyout一個彈出按鈕部分：

的彈出按鈕被使用優選放置，如果有在屏幕上爲它空間中示出。如果沒有足夠的空間，例如元素靠近屏幕邊緣，則使用此後備順序放置彈出窗口。

當placement設置爲bottom時，如果沒有足夠的空間，它將放置在設計的頂部。

，但沒有在彈出與目標之間的空間

如果底部沒有足夠的空間，在Flyout地方在頂部，在這個時候，FlyoutPresenter的margin應改爲0,4,0,0而不是0,-4,0,0可以獲得與底部相同的效果。但是您不知道Flyout是頂部還是底部，因此作爲解決方案，您可以在FlyoutPresenterStyle的控制模板內爲Border元素設置margin至0,-5,0,-5，這可以滿足您的要求。例如：

<Button 
     Canvas.Top="600" 
     HorizontalAlignment="Center" 
     VerticalAlignment="Bottom" 
     Click="Button_Click" 
     Content="Open flyout"> 
     <Button.Flyout> 
      <Flyout x:Name="flyout" Placement="Bottom"> 
       <Flyout.FlyoutPresenterStyle> 
        <Style TargetType="FlyoutPresenter"> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="FlyoutPresenter"> 
            <Border 
             Margin="0,-5,0,-5" 
             Background="{TemplateBinding Background}" 
             BorderBrush="{TemplateBinding BorderBrush}" 
             BorderThickness="{TemplateBinding BorderThickness}"> 
             <ScrollViewer 
              x:Name="ScrollViewer" 
              AutomationProperties.AccessibilityView="Raw" 
              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
              ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"> 
              <ContentPresenter 
               Margin="{TemplateBinding Padding}" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               ContentTransitions="{TemplateBinding ContentTransitions}" /> 
             </ScrollViewer> 
            </Border> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </Flyout.FlyoutPresenterStyle> 
       <TextBlock Text="This is some text in a flyout." TextWrapping="Wrap" /> 
      </Flyout> 
     </Button.Flyout> 
    </Button>

來源

2017-06-02 08:00:22

謝謝。那樣做了。另一種選擇是不覆蓋控制模板並訂閱「Opened」事件，將「Flyout」與目標的定位進行比較，如果「Flyout」高於目標，則以編程方式調整「FlyoutPresenterStyle」。 –

調整彈出按鈕位置時，已經自動重新定位

回答

相關問題