UWP XAMLポップアップがVerticalAlignmentを尊重していませんか？

Question

私はWindows Store/UWPアプリケーションでポップアップを中心にしようとしています。簡単に言うと

は、私は、いくつかのテキスト

イベントハンドラとButtonと... Button_Click

Popupという名前popupTestをTextBlock

• をメインページを取り、追加しています。それは
  • TextBlock
  • Buttonと...
    • とBorder ...
      • StackPanelが含まれています。このButtonのイベントハンドルは、PopupのIsOpenをfalseに設定します。 Popupを中央しようとした後trueにIsOpenを設定

    Button_Click

コール_centerPopup、。私はこれを働かせることはできません。

private void _centerPopup(Popup popup, Border popupBorder, FrameworkElement extraElement = null) 
{ 
    double ratio = .9; // How much of the window the popup fills, give or take. (90%) 

    Panel pnl = (Panel)popup.Parent; 
    double parentHeight = pnl.ActualHeight; 
    double parentWidth = pnl.ActualWidth; 

    // Min 200 for each dimension. 
    double width = parentWidth * ratio > 200 ? parentWidth * ratio : 200; 
    double height = parentHeight * ratio > 200 ? parentHeight * ratio : 200; 

    popup.Width = width; 
    popup.Height = height; 

    //popup.HorizontalAlignment = HorizontalAlignment.Center; 
    popup.VerticalAlignment = VerticalAlignment.Top; // <<< This is ignored?! 

    // Resize the border too. Not sure how to get this "for free". 
    popupBorder.Width = width; 
    popupBorder.Height = height; 

    // Not using this here, but if there's anything else that needs resizing, do it. 
    if (null != extraElement) 
    { 
     extraElement.Width = width; 
     extraElement.Height = height; 
    } 
} 

私はButton_Clickでポップアップのサイズを変更し、中央しようとしていない場合は、ここで私は、 "私をクリックして" クリックした後に何を得るのです...

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    //_centerPopup(this.popupTest, this.popupTestBorder); 
    this.popupTest.IsOpen = true; 
} 

Iのコメントを解除する場合_ centerPopupへの呼び出しで、私はのポップアップの下にボタンの下にこれを得る：

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    _centerPopup(this.popupTest, this.popupTestBorder); 
    this.popupTest.IsOpen = true; 
} 

これは良くありません。私はthoughtpopup.VerticalAlignment = VerticalAlignment.Top;を修正しました。

FrameworkElement.VerticalAlignment施設

それはそのようなパネルや項目コントロールなどの親要素内に構成されている場合、この要素に適用される垂直配向特性を取得または設定します。

---

のStackPanelの最上部へ移動ポップアップ？

奇妙なことに、PopupをStackPanelの上に移動すると、実際には他のコントロールが表示された後に押し下げられます。

クリック_centerPopupせずに "私をクリックして"：

それは有望に見えます！それは他のコントロールをうまく乗り越えていて、レイアウトが終了した後にレイアウトに明白な影響はありません。

VerticalAlignmentからTopにコメントアウトしても、_centerPopupを追加してください。物事は恐ろしく激しく死にます。

あなたが他のすべてのコントロールがを押し下げたことに気づくまで、完璧に見えます。 ???ここでクリック後に "閉じます" です：

その他のコントロールは永久にを押し下げています。なぜそれが起こるのですか？私はそれをサイズ変更する前にポップアップフロートをしてはいけないのですか？

---

完全なソースを

XAML

<Page 
    x:Class="PopupPlay.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:PopupPlay" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <StackPanel Name="StackMain"> 
     <TextBlock> 
      This is some text<LineBreak /> 
      This is some text<LineBreak /> 
      This is some text<LineBreak /> 
      This is some text<LineBreak /> 
     </TextBlock> 
     <Button Click="Button_Click" Content="Click Me"></Button> 

     <Popup x:Name="popupTest"> 
      <Border 
        Name="popupTestBorder" 
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
        BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
        BorderThickness="2"> 
       <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
        <TextBlock Name="txtPopup" 
           Text="This is some text" 
           FontSize="24" 
           HorizontalAlignment="Center" /> 
        <Button Name="btnClose" 
          Click="btnClose_Click" 
           Content="Click to close"></Button> 
       </StackPanel> 
      </Border> 
     </Popup> 
    </StackPanel> 
</Page> 

全MainPage.xaml.csコード

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 

namespace PopupPlay 
{ 
    /// <summary> 
    /// An empty page that can be used on its own or navigated to within a Frame. 
    /// </summary> 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      this.InitializeComponent(); 
     } 

     private void Button_Click(object sender, RoutedEventArgs e) 
     { 
      _centerPopup(this.popupTest, this.popupTestBorder); 

      this.popupTest.IsOpen = true; 
     } 

     private void _centerPopup(Popup popup, Border popupBorder, FrameworkElement extraElement = null) 
     { 
      double ratio = .9; // How much of the window the popup fills, give or take. (90%) 

      Panel pnl = (Panel)popup.Parent; 
      double parentHeight = pnl.ActualHeight; 
      double parentWidth = pnl.ActualWidth; 

      // Min 200 for each dimension. 
      double width = parentWidth * ratio > 200 ? parentWidth * ratio : 200; 
      double height = parentHeight * ratio > 200 ? parentHeight * ratio : 200; 

      popup.Width = width; 
      popup.Height = height; 

      //popup.HorizontalAlignment = HorizontalAlignment.Center; 
      popup.VerticalAlignment = VerticalAlignment.Top; // <<< This is ignored?! 

      // Resize the border too. Not sure how to get this "for free". 
      popupBorder.Width = width; 
      popupBorder.Height = height; 

      // Not using this here, but if there's anything else that needs resizing, do it. 
      if (null != extraElement) 
      { 
       extraElement.Width = width; 
       extraElement.Height = height; 
      } 
     } 

     private void btnClose_Click(object sender, RoutedEventArgs e) 
     { 
      this.popupTest.IsOpen = false; 
     } 
    } 
} 

---

関連していると思われるいくつかの質問があります。私は実行可能な修正が表示されません。 （注：これらはすべてUWP固有のものではありません）それは非常にに位置していますとき痛々しいほど、これと同じ設定を別のアプリで私のために働いている

• Center Popup in XAML
• Place Popup at top right corner of a window in XAML
• How to set vertical offset for popup having variable height

Pivotでもっと複雑なグリッドが表示されますが、それはpivots are buggyです。

Wpf's Placement stuff sounds promising UWP-landには存在しません。

Answer 1

Popupは、垂直StackPanelの中にあります。つまり、StackPanelは、パネルの他の子要素と並んでポップアップをレイアウトするため、テキストをプッシュダウンします。

また、パネルではポップアップのサイズに十分な垂直スペースが割り当てられているため、割り当てられたスペース内に垂直方向にポップアップを整える余裕がないため、パネルでは無視されています。私はこのように、Pageのルート要素としてGridを使用して、そしてGrid内に直接StackPanelとPopupを置くことをお勧め

：お好きな時に

<Grid> 
    <StackPanel Name="StackMain"> 
     <TextBlock> 
     This is some text<LineBreak /> 
     This is some text<LineBreak /> 
     This is some text<LineBreak /> 
     This is some text<LineBreak /> 
     </TextBlock> 
     <Button Click="Button_Click" Content="Click Me"></Button> 
    </StackPanel> 
    <Popup x:Name="popupTest"> 
     <Border 
       Name="popupTestBorder" 
       Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
       BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
       BorderThickness="2"> 
      <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
       <TextBlock Name="txtPopup" 
          Text="This is some text" 
          FontSize="24" 
          HorizontalAlignment="Center" /> 
       <Button Name="btnClose" 
         Click="btnClose_Click" 
          Content="Click to close"></Button> 
      </StackPanel> 
     </Border> 
    </Popup> 
</Grid> 

Grid sが、この目的のために良いです他の子要素の位置とサイズに影響を与えない、重複要素または複数要素を持つこと。ポップアップのレイアウトをと別のにスタックパネルとその子レイアウトから配置したいので、XAMLをそのように整理する必要があります。

Answer 2

（上記のサンプルコードに示すように）ので、コンテンツ領域の外にポップアップコントロールを移動し、ContentPanelグリッド内のすべてのコンテンツをごstacklayoutを入れて...次のようにXAMLを変更

<Page...> 
    <Grid x:Name="LayoutRoot"> 
     <Popup> 
     </Popup> 

     <Grid x:Name="ContentPanel"> 
     </Grid> 
    </Grid> 
</Page> 

をお試しください

他のコントロールを押し下げることを止めるべきです...