canvas bottom missing uwp

Question

我在我的uwp應用程序中使用了一個Canvas/RelativePanel作爲背景「圖像」。

我怎樣才能將小孩放在畫布的底部？沒有像wpf中的canvas.bottom AP。我也沒有在相關面板中找到任何適當的附加屬性來將孩子定位在相關面板的底部。

 <RelativePanel> 
      <ContentControl ContentTemplate="{StaticResource AsterioidTemplate}" /> 
      <Canvas x:Name="mountain_to_bottom" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"> 
       <Path Width="126.389" Height="326.227" Canvas.Left="272.433" Canvas.Top="28.3291" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/> 
      </Canvas> 
     </RelativePanel> 

Answer 1

我如何可以定位在底部畫布一個孩子？

Canvas是支持子元素的絕對定位相對於uwp.You畫布的左上角，通過指定控制畫布內部元件的定位的x和y coordinates.Since畫布是絕對的佈局面板定位，子內容不受面板邊界的限制，所以我們不能直接在畫布底部定義子項。但是我們可以嘗試手動計算位置，讓小孩位於畫布的底部。例如，以下演示可以在畫布底部顯示圖像。

XAML代碼

<Canvas Background="Pink" x:Name="mountain_to_bottom" Height="600"> 
    <Path x:Name="pathelement" Width="126.389" Height="326.227" VerticalAlignment="Bottom" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/> 
</Canvas> 
<Button x:Name="btnbottom" Click="btnbottom_Click" Content="to bottom"></Button> 

代碼背後

private void btnbottom_Click(object sender, RoutedEventArgs e) 
    { 
     double canvasheight = mountain_to_bottom.ActualHeight; 
     if (pathelement.ActualHeight < canvasheight) 
     { 
      double top = canvasheight - pathelement.ActualHeight; 
      pathelement.SetValue(Canvas.TopProperty, top); 
     } 
    } 

我還沒有發現在relativepanel任何適當的附加屬性孩子在相對面板的底部位置。

裏面的relative panel，使用各種附加屬性定位元素。相對面板提供RelativePanel.AlignBottomWithPanel附加屬性，用於位於面板底部的孩子。

<RelativePanel BorderBrush="Gray" BorderThickness="10"> 
    <Path x:Name="pathelement" RelativePanel.AlignBottomWithPanel="True" Width="126.389" Height="326.227" VerticalAlignment="Bottom" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/> 
</RelativePanel> 

如果畫布和相關面板不能很好地滿足您的要求，您可以考慮其他容器。使用哪個容器取決於您的佈局。例如，relativePanel是一個佈局容器，可用於創建沒有明確線性模式的UI;也就是說，佈局不是基本堆疊，包裝或表格式的，您自然可以使用StackPanel或Grid。更多詳情請參考Layout panels。